/* =============================================================================
   GSM Community Module — Premium Dark-Theme CSS
   Version: 9.5.0
   Design: Ethereal Glass / Asymmetric Bento — SaaS-tier
   ============================================================================= */

/* ─── Custom Properties ───────────────────────────────────────────────────── */
:root {
  --gsm-c-void:        #060608;
  --gsm-c-carbon:      #0f1015;
  --gsm-c-surface:     #16181f;
  --gsm-c-elevated:    #1c1f28;
  --gsm-c-hover:       #22263200;
  --gsm-c-bd:          rgba(255,255,255,0.07);
  --gsm-c-bd-hover:    rgba(255,255,255,0.13);
  --gsm-c-snow:        #ffffff;
  --gsm-c-smoke:       rgba(255,255,255,0.55);
  --gsm-c-muted:       rgba(255,255,255,0.62); /* ISSUE-027: raised to 0.62 → contrast ≈ 5.1:1 (WCAG AA) */
  --gsm-c-red:         #FF6B5E;
  --gsm-c-accent:      #C5F04A;
  --gsm-c-accent-glow: rgba(197,240,74,0.18);
  --gsm-c-accent-2:    #C5F04A;
  --gsm-c-green:       #22c55e;
  --gsm-c-amber:       #f59e0b;
  --gsm-c-blue:        #3b82f6;

  --gsm-font-sans:     'Geist', system-ui, -apple-system, sans-serif;
  --gsm-font-mono:     'Geist Mono', 'Fira Code', monospace;

  --gsm-radius-xs:     6px;
  --gsm-radius-sm:     10px;
  --gsm-radius-md:     16px;
  --gsm-radius-lg:     22px;
  --gsm-radius-xl:     30px;
  --gsm-radius-pill:   9999px;

  --gsm-shadow-ambient: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  --gsm-shadow-float:   0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  --gsm-shadow-modal:   0 24px 80px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.07) inset;
  --gsm-shadow-glow:    0 0 0 1px var(--gsm-c-bd), 0 8px 32px color-mix(in srgb, var(--gsm-c-accent) 12%, transparent);

  --gsm-ease-spring:    cubic-bezier(0.32, 0.72, 0, 1);
  --gsm-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --gsm-ease-in:        cubic-bezier(0.4, 0, 1, 1);

  --gsm-col-left:       280px;
  --gsm-col-right:      300px;
  --gsm-feed-gap:       16px;
}

/* ─── ISSUE-028: Skip navigation link (visible on keyboard focus) ────────── */
.gsm-comm-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 99999;
  background: var(--gsm-c-accent);
  color: var(--ds-accent-ink, #12160A);
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 200ms ease;
}
.gsm-comm-skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ─── Reset & Base ────────────────────────────────────────────────────────── */
.gsm-community-wrap *,
.gsm-community-wrap *::before,
.gsm-community-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gsm-community-wrap {
  font-family: var(--gsm-font-sans);
  background: var(--gsm-c-void);
  color: var(--gsm-c-snow);
  min-height: 100dvh; /* 100dvh respects iOS Safari's dynamic viewport (no jumping) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Top Bar ─────────────────────────────────────────────────────────────── */
/* ISSUE-001: position:fixed instead of sticky — overflow:hidden on the Pixelz
   theme ancestor (#pxl-main) silently breaks CSS sticky. Fixed is immune to
   ancestor overflow and guarantees the topbar is always visible.
   ISSUE-002: top uses a CSS variable set by JS to account for WP admin bar
   + site header height dynamically.                                           */
.gsm-comm-topbar {
  position: fixed;
  top: var(--gsm-topbar-top, 32px);
  left: 0;
  right: 0;
  z-index: 9900;
  background: rgba(6,6,8,0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  isolation: isolate;
  transform: translateZ(0);
  border-bottom: 1px solid var(--gsm-c-bd);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

/* ISSUE-001: Push the entire community wrap down so fixed topbar doesn't
   overlap the page content. Value matches topbar height (64px). */
.gsm-community-wrap {
  padding-top: calc(var(--gsm-topbar-top, 32px) + 64px);
}

.gsm-comm-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.gsm-comm-topbar-brand svg {
  width: 28px;
  height: 28px;
  color: var(--gsm-c-accent);
  flex-shrink: 0;
}

.gsm-comm-topbar-brand span {
  font-size: 15px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  letter-spacing: -0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

.gsm-comm-topbar-search {
  flex: 1;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

.gsm-comm-topbar-search input {
  width: 100%;
  height: 38px;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-pill);
  color: var(--gsm-c-snow);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  padding: 0 14px 0 38px;
  outline: none;
  transition: border-color 400ms var(--gsm-ease-out),
              background 400ms var(--gsm-ease-out),
              box-shadow 400ms var(--gsm-ease-out);
}

.gsm-comm-topbar-search input::placeholder { color: var(--gsm-c-muted); }

.gsm-comm-topbar-search input:focus {
  border-color: var(--gsm-c-accent);
  background: var(--gsm-c-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
}

.gsm-comm-topbar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gsm-c-muted);
  pointer-events: none;
  width: 14px;
  height: 14px;
}

.gsm-comm-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.gsm-comm-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 300ms var(--gsm-ease-out),
              border-color 300ms var(--gsm-ease-out),
              color 300ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-out);
  outline: none;
}

.gsm-comm-icon-btn:hover {
  background: var(--gsm-c-surface);
  border-color: var(--gsm-c-bd-hover);
  color: var(--gsm-c-snow);
  transform: translateY(-1px);
}

.gsm-comm-icon-btn:active { transform: scale(0.95); }

.gsm-comm-icon-btn svg { width: 16px; height: 16px; }

.gsm-notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  background: var(--gsm-c-red);
  border-radius: var(--gsm-radius-pill);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--gsm-c-void);
  transform: scale(0);
  transition: transform 300ms var(--gsm-ease-spring);
}

.gsm-notif-badge.visible { transform: scale(1); }

/* ─── Layout Grid ─────────────────────────────────────────────────────────── */
.gsm-comm-layout {
  display: grid;
  grid-template-columns: var(--gsm-col-left) 1fr var(--gsm-col-right);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  align-items: start;
}

/* ─── Sidebar Shared ──────────────────────────────────────────────────────── */
.gsm-comm-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 84px;
}

/* ─── Double-Bezel Card ───────────────────────────────────────────────────── */
.gsm-comm-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-xl);
  padding: 3px;
  box-shadow: var(--gsm-shadow-ambient);
}

.gsm-comm-card-inner {
  background: var(--gsm-c-surface);
  border-radius: calc(var(--gsm-radius-xl) - 3px);
  padding: 20px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
}

/* ─── Profile Card (Left Sidebar) ────────────────────────────────────────── */
.gsm-comm-profile-card .gsm-comm-card-inner {
  text-align: center;
  padding: 24px 20px 20px;
}

.gsm-comm-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
}

.gsm-comm-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  border: 3px solid var(--gsm-c-elevated);
  box-shadow: 0 0 0 1px var(--gsm-c-bd);
  display: block;
}

.gsm-comm-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: var(--gsm-radius-pill);
  background: conic-gradient(
    var(--gsm-c-accent) 0deg,
    var(--gsm-c-accent-2) 180deg,
    transparent 180deg
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 400ms var(--gsm-ease-out);
}

.gsm-comm-avatar-wrap:hover .gsm-comm-avatar-ring { opacity: 1; }

.gsm-comm-profile-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.gsm-comm-profile-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gsm-c-accent);
  background: var(--gsm-c-accent-glow);
  border: 1px solid color-mix(in srgb, var(--gsm-c-accent) 25%, transparent);
  border-radius: var(--gsm-radius-pill);
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 16px;
}

.gsm-comm-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.gsm-comm-stat-item {
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-md);
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out),
              border-color 250ms var(--gsm-ease-out);
}

.gsm-comm-stat-item:hover {
  background: var(--gsm-c-carbon);
  border-color: var(--gsm-c-bd-hover);
}

.gsm-comm-stat-num {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--gsm-c-snow);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 4px;
}

.gsm-comm-stat-label {
  font-size: 10px;
  color: var(--gsm-c-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── Feed Nav (Left Sidebar) ─────────────────────────────────────────────── */
.gsm-comm-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.gsm-comm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--gsm-radius-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gsm-c-smoke);
  cursor: pointer;
  text-decoration: none;
  transition: background 250ms var(--gsm-ease-out),
              color 250ms var(--gsm-ease-out);
  border: 1px solid transparent;
  position: relative;
}

.gsm-comm-nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 250ms var(--gsm-ease-out);
}

.gsm-comm-nav-item:hover {
  background: var(--gsm-c-elevated);
  color: var(--gsm-c-snow);
  border-color: var(--gsm-c-bd);
}

.gsm-comm-nav-item:hover svg { opacity: 1; }

.gsm-comm-nav-item.active {
  background: var(--gsm-c-accent-glow);
  color: var(--gsm-c-snow);
  border-color: color-mix(in srgb, var(--gsm-c-accent) 20%, transparent);
  font-weight: 600;
}

.gsm-comm-nav-item.active svg { opacity: 1; color: var(--gsm-c-accent); }

.gsm-comm-nav-badge {
  margin-left: auto;
  background: var(--gsm-c-elevated);
  color: var(--gsm-c-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--gsm-radius-pill);
  border: 1px solid var(--gsm-c-bd);
}

.gsm-comm-nav-item.active .gsm-comm-nav-badge {
  background: var(--gsm-c-accent);
  color: var(--ds-accent-ink, #12160A);
  border-color: transparent;
}

/* ─── Feed Column (Center) ────────────────────────────────────────────────── */
.gsm-comm-feed-col {
  display: flex;
  flex-direction: column;
  gap: var(--gsm-feed-gap);
  min-width: 0;
}

/* ─── Compose Card ────────────────────────────────────────────────────────── */
.gsm-comm-compose-card .gsm-comm-card-inner {
  padding: 16px;
}

.gsm-comm-compose-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gsm-comm-compose-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gsm-c-elevated);
}

.gsm-comm-compose-trigger {
  flex: 1;
  height: 44px;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-pill);
  color: var(--gsm-c-muted);
  font-family: var(--gsm-font-sans);
  font-size: 14px;
  padding: 0 18px;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: background 300ms var(--gsm-ease-out),
              border-color 300ms var(--gsm-ease-out),
              color 300ms var(--gsm-ease-out);
  width: 100%;
}

.gsm-comm-compose-trigger:hover {
  background: var(--gsm-c-carbon);
  border-color: var(--gsm-c-bd-hover);
  color: var(--gsm-c-smoke);
}

.gsm-comm-compose-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gsm-c-bd);
}

.gsm-comm-compose-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--gsm-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--gsm-c-smoke);
  font-family: var(--gsm-font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out),
              border-color 250ms var(--gsm-ease-out),
              color 250ms var(--gsm-ease-out);
}

.gsm-comm-compose-action-btn svg { width: 15px; height: 15px; }

.gsm-comm-compose-action-btn:hover {
  background: var(--gsm-c-elevated);
  border-color: var(--gsm-c-bd);
  color: var(--gsm-c-snow);
}

/* ─── Feed Filter Tabs ────────────────────────────────────────────────────── */
.gsm-comm-feed-tabs {
  display: flex;
  gap: 4px;
  background: var(--gsm-c-surface);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-lg);
  padding: 5px;
}

.gsm-comm-feed-tab {
  flex: 1;
  padding: 8px 14px;
  border-radius: var(--gsm-radius-md);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gsm-c-smoke);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 300ms var(--gsm-ease-out),
              color 300ms var(--gsm-ease-out),
              box-shadow 300ms var(--gsm-ease-out);
}

.gsm-comm-feed-tab:hover { color: var(--gsm-c-snow); }

.gsm-comm-feed-tab.active {
  background: var(--gsm-c-elevated);
  color: var(--gsm-c-snow);
  font-weight: 600;
  box-shadow: var(--gsm-shadow-ambient);
}

/* ─── Post Card ───────────────────────────────────────────────────────────── */
.gsm-comm-post {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-xl);
  padding: 2px;
  box-shadow: var(--gsm-shadow-ambient);
  transition: border-color 400ms var(--gsm-ease-out),
              box-shadow 400ms var(--gsm-ease-out);
  animation: postSlideIn 500ms var(--gsm-ease-out) both;
}

@keyframes postSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gsm-comm-post:hover {
  border-color: var(--gsm-c-bd-hover);
  box-shadow: var(--gsm-shadow-glow);
}

.gsm-comm-post-inner {
  background: var(--gsm-c-surface);
  border-radius: calc(var(--gsm-radius-xl) - 2px);
  padding: 20px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05);
}

/* Post Header */
.gsm-comm-post-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.gsm-comm-post-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.gsm-comm-post-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  border: 2px solid var(--gsm-c-elevated);
  cursor: pointer;
  transition: transform 300ms var(--gsm-ease-out),
              border-color 300ms var(--gsm-ease-out);
}

.gsm-comm-post-avatar:hover {
  transform: scale(1.06);
  border-color: var(--gsm-c-accent);
}

.gsm-comm-online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  background: var(--gsm-c-green);
  border-radius: var(--gsm-radius-pill);
  border: 2px solid var(--gsm-c-surface);
}

.gsm-comm-post-meta {
  flex: 1;
  min-width: 0;
}

.gsm-comm-post-author {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  letter-spacing: -0.2px;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms var(--gsm-ease-out);
}

.gsm-comm-post-author:hover { color: var(--gsm-c-accent); }

.gsm-comm-post-role-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--gsm-radius-pill);
  margin-left: 6px;
  vertical-align: middle;
}

.gsm-badge-owner  { background: rgba(245,158,11,0.15); color: var(--gsm-c-amber); border: 1px solid rgba(245,158,11,0.25); }
.gsm-badge-coach  { background: color-mix(in srgb, var(--gsm-c-accent) 15%, transparent);  color: var(--gsm-c-accent); border: 1px solid color-mix(in srgb, var(--gsm-c-accent) 25%, transparent); }
.gsm-badge-member { background: rgba(34,197,94,0.12);   color: var(--gsm-c-green);  border: 1px solid rgba(34,197,94,0.2); }
.gsm-badge-admin  { background: rgba(255,107,94,0.12);   color: var(--gsm-c-red);    border: 1px solid rgba(255,107,94,0.2); }
.gsm-badge-staff  { background: rgba(168,85,247,0.14);  color: #a855f7;             border: 1px solid rgba(168,85,247,0.24); }

.gsm-comm-post-time {
  display: block;
  font-size: 11.5px;
  color: var(--gsm-c-muted);
  margin-top: 2px;
}

.gsm-comm-post-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--gsm-radius-pill);
  margin-top: 4px;
}

.gsm-type-post        { background: color-mix(in srgb, var(--gsm-c-accent) 10%, transparent);  color: var(--gsm-c-accent);   border: 1px solid color-mix(in srgb, var(--gsm-c-accent) 20%, transparent); }
.gsm-type-workout     { background: rgba(34,197,94,0.1);   color: var(--gsm-c-green);    border: 1px solid rgba(34,197,94,0.2); }
.gsm-type-achievement { background: rgba(245,158,11,0.1);  color: var(--gsm-c-amber);    border: 1px solid rgba(245,158,11,0.2); }
.gsm-type-question    { background: rgba(59,130,246,0.1);  color: var(--gsm-c-blue);     border: 1px solid rgba(59,130,246,0.2); }
.gsm-type-event       { background: color-mix(in srgb, var(--gsm-c-accent-2) 10%, transparent);  color: var(--gsm-c-accent-2); border: 1px solid color-mix(in srgb, var(--gsm-c-accent-2) 20%, transparent); }
/* Additional server-side types */
.gsm-type-checkin     { background: rgba(34,197,94,0.08);  color: var(--gsm-c-green);    border: 1px solid rgba(34,197,94,0.18); }
.gsm-type-tip         { background: rgba(245,158,11,0.08); color: var(--gsm-c-amber);    border: 1px solid rgba(245,158,11,0.18); }
.gsm-type-media       { background: rgba(59,130,246,0.08); color: var(--gsm-c-blue);     border: 1px solid rgba(59,130,246,0.18); }

.gsm-comm-post-options-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--gsm-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--gsm-c-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 250ms var(--gsm-ease-out),
              border-color 250ms var(--gsm-ease-out),
              color 250ms var(--gsm-ease-out);
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
}

.gsm-comm-post-options-btn svg { width: 16px; height: 16px; }

.gsm-comm-post-options-btn:hover {
  background: var(--gsm-c-elevated);
  border-color: var(--gsm-c-bd);
  color: var(--gsm-c-snow);
}

/* Post Body */
.gsm-comm-post-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  margin-bottom: 14px;
  word-break: break-word;
}

.gsm-comm-post-body .gsm-mention {
  color: var(--gsm-c-accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.gsm-comm-post-body .gsm-mention:hover { text-decoration: underline; }

.gsm-comm-post-body .gsm-hashtag {
  color: var(--gsm-c-blue);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.gsm-comm-post-body .gsm-hashtag:hover { text-decoration: underline; }

/* Post Media */
.gsm-comm-post-media {
  margin-bottom: 14px;
  border-radius: var(--gsm-radius-lg);
  overflow: hidden;
  border: 1px solid var(--gsm-c-bd);
}

.gsm-comm-post-media img,
.gsm-comm-post-media video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 500px;
  object-fit: cover;
  transition: transform 600ms var(--gsm-ease-spring);
}

.gsm-comm-post-media:hover img { transform: scale(1.015); }

.gsm-comm-post-media-grid {
  display: grid;
  gap: 3px;
  border-radius: var(--gsm-radius-lg);
  overflow: hidden;
}

.gsm-comm-post-media-grid.count-2 { grid-template-columns: 1fr 1fr; }
.gsm-comm-post-media-grid.count-3 { grid-template-columns: 2fr 1fr; }
.gsm-comm-post-media-grid.count-3 .gsm-comm-media-item:first-child { grid-row: span 2; }
.gsm-comm-post-media-grid.count-4 { grid-template-columns: 1fr 1fr; }

.gsm-comm-media-item {
  overflow: hidden;
  position: relative;
  background: var(--gsm-c-elevated);
}

.gsm-comm-media-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 400ms var(--gsm-ease-spring),
              filter 400ms var(--gsm-ease-out);
}

.gsm-comm-media-item img:hover {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* Post Actions Bar */
.gsm-comm-post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--gsm-c-bd);
}

.gsm-comm-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: var(--gsm-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--gsm-c-smoke);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out),
              border-color 250ms var(--gsm-ease-out),
              color 250ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-out);
}

.gsm-comm-action-btn svg { width: 15px; height: 15px; transition: transform 300ms var(--gsm-ease-spring); }

.gsm-comm-action-btn:hover {
  background: var(--gsm-c-elevated);
  border-color: var(--gsm-c-bd);
  color: var(--gsm-c-snow);
}

.gsm-comm-action-btn:active { transform: scale(0.95); }

.gsm-comm-action-btn.liked { color: var(--gsm-c-red); }
.gsm-comm-action-btn.liked svg { transform: scale(1.2); }

.gsm-comm-action-count {
  font-size: 12px;
  font-weight: 600;
  min-width: 14px;
}

.gsm-comm-action-btn.reaction-btn { position: relative; }

/* ─── Reaction Picker ─────────────────────────────────────────────────────── */
.gsm-reaction-picker {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.9);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-xl);
  padding: 8px 12px;
  display: flex;
  gap: 4px;
  box-shadow: var(--gsm-shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--gsm-ease-out),
              transform 300ms var(--gsm-ease-spring);
  z-index: 50;
  white-space: nowrap;
}

.gsm-reaction-picker.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: all;
}

.gsm-reaction-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--gsm-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: background 200ms var(--gsm-ease-out),
              transform 300ms var(--gsm-ease-spring);
  line-height: 1;
}

.gsm-reaction-btn:hover {
  background: var(--gsm-c-surface);
  border-color: var(--gsm-c-bd-hover);
  transform: scale(1.35) translateY(-3px);
}

.gsm-reaction-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.gsm-reaction-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-pill);
  padding: 4px 10px 4px 7px;
  font-size: 12px;
  color: var(--gsm-c-smoke);
  cursor: pointer;
  transition: background 200ms var(--gsm-ease-out),
              border-color 200ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-out);
}

.gsm-reaction-chip:hover {
  background: var(--gsm-c-carbon);
  border-color: var(--gsm-c-bd-hover);
  transform: scale(1.04);
}

.gsm-reaction-chip.active {
  background: var(--gsm-c-accent-glow);
  border-color: color-mix(in srgb, var(--gsm-c-accent) 30%, transparent);
  color: var(--gsm-c-snow);
}

/* ─── Comments Section ────────────────────────────────────────────────────── */
.gsm-comm-comments {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gsm-c-bd);
  display: none;
}

.gsm-comm-comments.open { display: block; }

.gsm-comm-comment {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  animation: commentSlideIn 350ms var(--gsm-ease-out) both;
}

@keyframes commentSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.gsm-comm-comment-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gsm-c-elevated);
}

.gsm-comm-comment-bubble {
  flex: 1;
  min-width: 0;
}

.gsm-comm-comment-author {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  margin-bottom: 4px;
}

.gsm-comm-comment-time {
  font-size: 11px;
  color: var(--gsm-c-muted);
  font-weight: 400;
  margin-left: 6px;
}

.gsm-comm-comment-body {
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: 4px var(--gsm-radius-md) var(--gsm-radius-md) var(--gsm-radius-md);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  word-break: break-word;
  transition: border-color 250ms var(--gsm-ease-out);
}

.gsm-comm-comment:hover .gsm-comm-comment-body { border-color: var(--gsm-c-bd-hover); }

.gsm-comm-comment-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding-left: 14px;
}

.gsm-comm-comment-action {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gsm-c-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--gsm-font-sans);
  padding: 0;
  transition: color 200ms var(--gsm-ease-out);
}

.gsm-comm-comment-action:hover { color: var(--gsm-c-snow); }
.gsm-comm-comment-action.liked { color: var(--gsm-c-accent); }

/* Comment Input */
.gsm-comm-comment-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 8px;
}

.gsm-comm-comment-input-wrap {
  flex: 1;
  position: relative;
}

.gsm-comm-comment-input {
  width: 100%;
  min-height: 40px;
  max-height: 120px;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-pill);
  color: var(--gsm-c-snow);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  padding: 10px 44px 10px 16px;
  outline: none;
  resize: none;
  line-height: 1.4;
  transition: border-color 300ms var(--gsm-ease-out),
              box-shadow 300ms var(--gsm-ease-out),
              border-radius 300ms var(--gsm-ease-out);
}

.gsm-comm-comment-input::placeholder { color: var(--gsm-c-muted); }

.gsm-comm-comment-input:focus {
  border-color: var(--gsm-c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
  border-radius: var(--gsm-radius-lg);
}

.gsm-comm-comment-send {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-accent);
  border: none;
  color: var(--ds-accent-ink, #12160A);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out),
              transform 250ms var(--gsm-ease-spring);
  opacity: 0;
  transform: scale(0.8);
}

.gsm-comm-comment-send svg { width: 13px; height: 13px; }

.gsm-comm-comment-input:focus ~ .gsm-comm-comment-send,
.gsm-comm-comment-input:not(:placeholder-shown) ~ .gsm-comm-comment-send {
  opacity: 1;
  transform: scale(1);
}

.gsm-comm-comment-send:hover { background: var(--gsm-c-accent-2); transform: scale(1.08); }

.gsm-comm-load-more-comments {
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gsm-c-accent);
  cursor: pointer;
  padding: 8px 0;
  transition: color 200ms var(--gsm-ease-out), opacity 200ms var(--gsm-ease-out);
  background: none;
  border: none;
  font-family: var(--gsm-font-sans);
  width: 100%;
}

.gsm-comm-load-more-comments:hover { color: var(--gsm-c-accent-2); }

/* ─── Options Dropdown ────────────────────────────────────────────────────── */
.gsm-comm-options-menu {
  position: absolute;
  top: 38px;
  right: 0;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-md);
  box-shadow: var(--gsm-shadow-float);
  min-width: 160px;
  z-index: 60;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 200ms var(--gsm-ease-out),
              transform 250ms var(--gsm-ease-spring);
}

.gsm-comm-options-menu.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.gsm-comm-options-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gsm-c-smoke);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 200ms var(--gsm-ease-out), color 200ms var(--gsm-ease-out);
}

.gsm-comm-options-item svg { width: 14px; height: 14px; }
.gsm-comm-options-item:hover { background: var(--gsm-c-surface); color: var(--gsm-c-snow); }
.gsm-comm-options-item.danger { color: var(--gsm-c-red); }
.gsm-comm-options-item.danger:hover { background: rgba(255,107,94,0.08); }

/* ─── Infinite Scroll Sentinel ────────────────────────────────────────────── */
#gsm-comm-feed-sentinel {
  height: 1px;
  opacity: 0;
}

.gsm-comm-feed-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  gap: 8px;
  color: var(--gsm-c-muted);
  font-size: 13px;
}

.gsm-comm-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gsm-c-bd);
  border-top-color: var(--gsm-c-accent);
  border-radius: var(--gsm-radius-pill);
  animation: spin 700ms linear infinite;
}

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

.gsm-comm-feed-loader.gsm-loader-error {
  color: var(--gsm-c-danger, #e55);
}
.gsm-comm-feed-loader.gsm-loader-error .gsm-comm-spinner {
  border-top-color: var(--gsm-c-danger, #e55);
  animation: none;
}

.gsm-comm-feed-end {
  text-align: center;
  padding: 28px 16px;
  color: var(--gsm-c-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gsm-comm-feed-end-dot {
  width: 40px;
  height: 2px;
  background: var(--gsm-c-bd);
  border-radius: var(--gsm-radius-pill);
}

/* ─── Right Sidebar ───────────────────────────────────────────────────────── */
.gsm-comm-right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 84px;
}

/* Gym Stats Block */
.gsm-comm-gym-stats .gsm-comm-card-inner { padding: 18px; }

.gsm-comm-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gsm-c-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gsm-comm-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gsm-c-bd);
}

.gsm-comm-gym-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--gsm-c-bd);
}

.gsm-comm-gym-stat-row:last-child { border-bottom: none; padding-bottom: 0; }

.gsm-comm-gym-stat-label {
  font-size: 12.5px;
  color: var(--gsm-c-smoke);
}

.gsm-comm-gym-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  letter-spacing: -0.3px;
}

/* Suggestions Block */
.gsm-comm-suggestions .gsm-comm-card-inner { padding: 18px; }

.gsm-comm-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gsm-comm-suggestion-item:last-child { border-bottom: none; padding-bottom: 0; }

.gsm-comm-suggestion-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gsm-c-elevated);
}

.gsm-comm-suggestion-info { flex: 1; min-width: 0; }

.gsm-comm-suggestion-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gsm-c-snow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsm-comm-suggestion-sub {
  font-size: 11px;
  color: var(--gsm-c-muted);
}

.gsm-comm-follow-btn {
  padding: 5px 12px;
  border-radius: var(--gsm-radius-pill);
  font-family: var(--gsm-font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out),
              color 250ms var(--gsm-ease-out),
              border-color 250ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-out);
  outline: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.gsm-comm-follow-btn.follow {
  background: var(--gsm-c-accent);
  color: var(--ds-accent-ink, #12160A);
  border: 1px solid transparent;
}

.gsm-comm-follow-btn.follow:hover {
  background: var(--gsm-c-accent-2);
  transform: scale(1.04);
}

.gsm-comm-follow-btn.following {
  background: transparent;
  color: var(--gsm-c-smoke);
  border: 1px solid var(--gsm-c-bd);
}

.gsm-comm-follow-btn.following:hover {
  background: rgba(255,107,94,0.08);
  color: var(--gsm-c-red);
  border-color: rgba(255,107,94,0.3);
}

/* ─── Compose Modal ───────────────────────────────────────────────────────── */
.gsm-comm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0);
  /* No backdrop-filter here: blur(0px) still creates a GPU compositing layer.
     backdrop-filter is applied only in the .open state below. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--gsm-ease-out),
              background 350ms var(--gsm-ease-out);
}

.gsm-comm-overlay.open {
  opacity: 1;
  pointer-events: all;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.gsm-comm-modal {
  background: var(--gsm-c-carbon);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-xl);
  box-shadow: var(--gsm-shadow-modal);
  width: 100%;
  max-width: 560px;
  transform: translateY(24px) scale(0.97);
  transition: transform 400ms var(--gsm-ease-spring);
  overflow: hidden;
}

.gsm-comm-overlay.open .gsm-comm-modal {
  transform: translateY(0) scale(1);
}

.gsm-comm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--gsm-c-bd);
}

.gsm-comm-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  letter-spacing: -0.3px;
}

.gsm-comm-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--gsm-radius-sm);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out),
              color 250ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-out);
}

.gsm-comm-modal-close:hover {
  background: var(--gsm-c-surface);
  color: var(--gsm-c-snow);
  transform: scale(1.06);
}

.gsm-comm-modal-close svg { width: 15px; height: 15px; }

.gsm-comm-modal-body { padding: 20px 22px; }

/* Post type pills */
.gsm-comm-post-types {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.gsm-comm-post-type-btn {
  padding: 6px 14px;
  border-radius: var(--gsm-radius-pill);
  font-family: var(--gsm-font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gsm-c-bd);
  background: var(--gsm-c-elevated);
  color: var(--gsm-c-smoke);
  transition: all 250ms var(--gsm-ease-out);
}

.gsm-comm-post-type-btn:hover { color: var(--gsm-c-snow); border-color: var(--gsm-c-bd-hover); }

.gsm-comm-post-type-btn.active-type-post        { background: color-mix(in srgb, var(--gsm-c-accent) 15%, transparent);  color: var(--gsm-c-accent); border-color: color-mix(in srgb, var(--gsm-c-accent) 35%, transparent); }
.gsm-comm-post-type-btn.active-type-workout     { background: rgba(34,197,94,0.12);   color: var(--gsm-c-green);  border-color: rgba(34,197,94,0.3); }
.gsm-comm-post-type-btn.active-type-achievement { background: rgba(245,158,11,0.12);  color: var(--gsm-c-amber);  border-color: rgba(245,158,11,0.3); }
.gsm-comm-post-type-btn.active-type-question    { background: rgba(59,130,246,0.12);  color: var(--gsm-c-blue);   border-color: rgba(59,130,246,0.3); }
.gsm-comm-post-type-btn.active-type-event       { background: color-mix(in srgb, var(--gsm-c-accent-2) 12%, transparent);  color: var(--gsm-c-accent-2); border-color: color-mix(in srgb, var(--gsm-c-accent-2) 30%, transparent); }

/* Textarea */
.gsm-comm-compose-textarea-wrap {
  position: relative;
  margin-bottom: 14px;
}

.gsm-comm-compose-textarea {
  width: 100%;
  min-height: 120px;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-lg);
  color: var(--gsm-c-snow);
  font-family: var(--gsm-font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  padding: 14px 16px;
  outline: none;
  resize: none;
  transition: border-color 300ms var(--gsm-ease-out),
              box-shadow 300ms var(--gsm-ease-out);
}

.gsm-comm-compose-textarea::placeholder { color: var(--gsm-c-muted); }

.gsm-comm-compose-textarea:focus {
  border-color: var(--gsm-c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
}

/* @mention autocomplete */
.gsm-comm-mention-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-md);
  box-shadow: var(--gsm-shadow-float);
  max-height: 200px;
  overflow-y: auto;
  z-index: 70;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 200ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-out);
}

.gsm-comm-mention-dropdown.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.gsm-comm-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 150ms var(--gsm-ease-out);
}

.gsm-comm-mention-item:hover,
.gsm-comm-mention-item.focused { background: var(--gsm-c-surface); }

.gsm-comm-mention-item img {
  width: 30px;
  height: 30px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}

.gsm-comm-mention-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gsm-c-snow);
}

.gsm-comm-mention-role {
  font-size: 11px;
  color: var(--gsm-c-muted);
}

/* Media Upload Area */
.gsm-comm-media-upload-area {
  border: 1.5px dashed var(--gsm-c-bd);
  border-radius: var(--gsm-radius-lg);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 300ms var(--gsm-ease-out),
              background 300ms var(--gsm-ease-out);
  margin-bottom: 16px;
  position: relative;
}

.gsm-comm-media-upload-area:hover,
.gsm-comm-media-upload-area.drag-over {
  border-color: var(--gsm-c-accent);
  background: var(--gsm-c-accent-glow);
}

.gsm-comm-media-upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.gsm-comm-media-upload-icon {
  width: 36px;
  height: 36px;
  background: var(--gsm-c-elevated);
  border-radius: var(--gsm-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  color: var(--gsm-c-accent);
}

.gsm-comm-media-upload-icon svg { width: 18px; height: 18px; }

.gsm-comm-media-upload-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gsm-c-smoke);
}

.gsm-comm-media-upload-sub {
  font-size: 11px;
  color: var(--gsm-c-muted);
  margin-top: 4px;
}

.gsm-comm-media-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.gsm-comm-media-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--gsm-radius-md);
  overflow: hidden;
  border: 1px solid var(--gsm-c-bd);
}

.gsm-comm-media-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gsm-comm-media-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: var(--gsm-radius-pill);
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background 200ms var(--gsm-ease-out);
}

.gsm-comm-media-preview-remove:hover { background: var(--gsm-c-red); }

.gsm-comm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--gsm-c-bd);
}

.gsm-comm-char-count {
  font-size: 12px;
  color: var(--gsm-c-muted);
}

.gsm-comm-char-count.near-limit { color: var(--gsm-c-amber); }
.gsm-comm-char-count.at-limit   { color: var(--gsm-c-red); }

.gsm-comm-post-submit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: var(--gsm-c-accent);
  border: none;
  border-radius: var(--gsm-radius-pill);
  color: var(--ds-accent-ink, #12160A);
  font-family: var(--gsm-font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.2px;
  transition: background 300ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-spring),
              box-shadow 300ms var(--gsm-ease-out);
  outline: none;
}

.gsm-comm-post-submit:hover {
  background: var(--gsm-c-accent-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--gsm-c-accent) 9%, transparent);
}

.gsm-comm-post-submit:active { transform: scale(0.97); }

.gsm-comm-post-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.gsm-comm-post-submit-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--gsm-radius-pill);
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms var(--gsm-ease-spring),
              background 250ms var(--gsm-ease-out);
}

.gsm-comm-post-submit-icon svg { width: 13px; height: 13px; }

.gsm-comm-post-submit:hover .gsm-comm-post-submit-icon {
  transform: translateX(2px) translateY(-1px) scale(1.05);
  background: rgba(255,255,255,0.22);
}

/* ─── Notification Panel ──────────────────────────────────────────────────── */
/* ISSUE-026/035: top uses CSS var set by JS to always sit just below the fixed topbar */
.gsm-comm-notif-panel {
  position: fixed;
  top: calc(var(--gsm-topbar-top, 32px) + 64px + 8px);
  right: 24px;
  width: 360px;
  max-height: 520px;
  background: var(--gsm-c-carbon);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-xl);
  box-shadow: var(--gsm-shadow-float);
  z-index: 150;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-12px) scale(0.97);
  pointer-events: none;
  transition: opacity 300ms var(--gsm-ease-out),
              transform 350ms var(--gsm-ease-spring);
}

.gsm-comm-notif-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.gsm-comm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gsm-c-bd);
  flex-shrink: 0;
}

.gsm-comm-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gsm-c-snow);
}

.gsm-comm-mark-all-read {
  font-size: 12px;
  font-weight: 600;
  color: var(--gsm-c-accent);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--gsm-font-sans);
  transition: color 200ms var(--gsm-ease-out);
}

.gsm-comm-mark-all-read:hover { color: var(--gsm-c-accent-2); }

.gsm-comm-notif-list {
  overflow-y: auto;
  flex: 1;
}

.gsm-comm-notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 200ms var(--gsm-ease-out);
  text-decoration: none;
}

.gsm-comm-notif-item:hover { background: var(--gsm-c-elevated); }

.gsm-comm-notif-item.unread { background: color-mix(in srgb, var(--gsm-c-accent) 6%, transparent); }
.gsm-comm-notif-item.unread:hover { background: color-mix(in srgb, var(--gsm-c-accent) 10%, transparent); }

.gsm-comm-notif-avatar {
  position: relative;
  flex-shrink: 0;
}

.gsm-comm-notif-avatar img {
  width: 40px;
  height: 40px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
}

.gsm-comm-notif-type-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: var(--gsm-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 2px solid var(--gsm-c-carbon);
}

.gsm-notif-like    { background: var(--gsm-c-red); }
.gsm-notif-comment { background: var(--gsm-c-blue); }
.gsm-notif-follow  { background: var(--gsm-c-green); }
.gsm-notif-mention { background: var(--gsm-c-accent); }
.gsm-notif-dm      { background: var(--gsm-c-accent-2); }

.gsm-comm-notif-content { flex: 1; min-width: 0; }

.gsm-comm-notif-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--gsm-c-smoke);
}

.gsm-comm-notif-text strong { color: var(--gsm-c-snow); font-weight: 700; }

.gsm-comm-notif-time {
  font-size: 11px;
  color: var(--gsm-c-muted);
  margin-top: 3px;
}

.gsm-comm-notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-accent);
  flex-shrink: 0;
  align-self: center;
}

/* ─── DM Panel ────────────────────────────────────────────────────────────── */
.gsm-comm-dm-panel {
  position: fixed;
  bottom: 0;
  /* z-index 151 — one above notif panel (150) so DM never hides behind notifications */
  right: 96px;
  width: 340px;
  height: 480px;
  background: var(--gsm-c-carbon);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-xl) var(--gsm-radius-xl) 0 0;
  box-shadow: var(--gsm-shadow-float);
  z-index: 151;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 450ms var(--gsm-ease-spring);
}

.gsm-comm-dm-panel.open { transform: translateY(0); }

.gsm-comm-dm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gsm-c-bd);
  cursor: pointer;
  flex-shrink: 0;
}

.gsm-comm-dm-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gsm-c-snow);
}

/* DM panel view switching — use CSS classes so flex display is never broken by jQuery .show() */
#gsm-comm-dm-list-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Chat view is hidden by default; JS adds .gsm-dm-active to show it */
.gsm-comm-dm-chat-view {
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  display: none;
}

.gsm-comm-dm-chat-view.gsm-dm-active {
  display: flex;
}

/* Hide the list view when chat is active */
#gsm-comm-dm-list-view.gsm-dm-hidden {
  display: none;
}

/* DM conversation list */
.gsm-comm-dm-conversations {
  overflow-y: auto;
  flex: 1;
}

.gsm-comm-dm-conv-item {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 200ms var(--gsm-ease-out);
  align-items: center;
}

.gsm-comm-dm-conv-item:hover { background: var(--gsm-c-elevated); }
.gsm-comm-dm-conv-item.active { background: var(--gsm-c-accent-glow); }

.gsm-comm-dm-conv-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}

.gsm-comm-dm-conv-info { flex: 1; min-width: 0; }

.gsm-comm-dm-conv-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gsm-c-snow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsm-comm-dm-conv-preview {
  font-size: 11.5px;
  color: var(--gsm-c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.gsm-comm-dm-conv-meta {
  text-align: right;
  flex-shrink: 0;
}

.gsm-comm-dm-conv-time {
  font-size: 10.5px;
  color: var(--gsm-c-muted);
  white-space: nowrap;
}

.gsm-comm-dm-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: var(--gsm-c-accent);
  border-radius: var(--gsm-radius-pill);
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-accent-ink, #12160A);
  padding: 0 4px;
  margin-top: 4px;
}

/* DM chat view */
.gsm-comm-dm-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gsm-c-bd);
  flex-shrink: 0;
}

.gsm-comm-dm-back-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--gsm-radius-sm);
  background: var(--gsm-c-elevated);
  border: none;
  color: var(--gsm-c-smoke);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms var(--gsm-ease-out),
              color 200ms var(--gsm-ease-out);
}

.gsm-comm-dm-back-btn:hover { background: var(--gsm-c-surface); color: var(--gsm-c-snow); }
.gsm-comm-dm-back-btn svg { width: 13px; height: 13px; }

.gsm-comm-dm-chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}

.gsm-comm-dm-chat-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  flex: 1;
}

.gsm-comm-dm-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gsm-comm-dm-msg {
  display: flex;
  gap: 8px;
  animation: msgSlideIn 250ms var(--gsm-ease-out) both;
}

@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gsm-comm-dm-msg.outgoing { flex-direction: row-reverse; }

.gsm-comm-dm-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-end;
}

.gsm-comm-dm-msg-bubble {
  max-width: 75%;
  padding: 9px 14px;
  border-radius: 4px var(--gsm-radius-lg) var(--gsm-radius-lg) var(--gsm-radius-lg);
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
}

.gsm-comm-dm-msg.incoming .gsm-comm-dm-msg-bubble {
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-snow);
}

.gsm-comm-dm-msg.outgoing .gsm-comm-dm-msg-bubble {
  background: var(--gsm-c-accent);
  border-radius: var(--gsm-radius-lg) 4px var(--gsm-radius-lg) var(--gsm-radius-lg);
  color: var(--ds-accent-ink, #12160A);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--gsm-c-accent) 6%, transparent);
}

.gsm-comm-dm-msg-time {
  display: block;
  font-size: 10px;
  color: var(--gsm-c-muted);
  margin-top: 4px;
  text-align: right;
}

.gsm-comm-dm-msg.outgoing .gsm-comm-dm-msg-time { color: rgba(255,255,255,0.5); }

.gsm-comm-dm-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: 4px var(--gsm-radius-lg) var(--gsm-radius-lg) var(--gsm-radius-lg);
  width: fit-content;
  align-self: flex-start;
}

.gsm-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-muted);
  animation: typingBounce 1.2s var(--gsm-ease-out) infinite;
}

.gsm-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.gsm-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.gsm-comm-dm-input-area {
  padding: 12px 14px;
  /* iOS notch safety: add bottom padding equal to the safe area inset */
  padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
  border-top: 1px solid var(--gsm-c-bd);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.gsm-comm-dm-input {
  flex: 1;
  height: 38px;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-pill);
  color: var(--gsm-c-snow);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  padding: 0 14px;
  outline: none;
  transition: border-color 250ms var(--gsm-ease-out),
              box-shadow 250ms var(--gsm-ease-out);
}

.gsm-comm-dm-input::placeholder { color: var(--gsm-c-muted); }

.gsm-comm-dm-input:focus {
  border-color: var(--gsm-c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
}

.gsm-comm-dm-send-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-accent);
  border: none;
  color: var(--ds-accent-ink, #12160A);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 250ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-dm-send-btn svg { width: 16px; height: 16px; }
.gsm-comm-dm-send-btn:hover { background: var(--gsm-c-accent-2); transform: scale(1.08); }
.gsm-comm-dm-send-btn:active { transform: scale(0.94); }

/* ─── Profile Hover Card ──────────────────────────────────────────────────── */
.gsm-comm-profile-hovercard {
  position: fixed;
  z-index: 300;
  width: 280px;
  background: var(--gsm-c-carbon);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-xl);
  box-shadow: var(--gsm-shadow-modal);
  padding: 20px;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  pointer-events: none;
  transition: opacity 250ms var(--gsm-ease-out),
              transform 300ms var(--gsm-ease-spring);
}

.gsm-comm-profile-hovercard.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.gsm-comm-hc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.gsm-comm-hc-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
  border: 3px solid var(--gsm-c-elevated);
}

.gsm-comm-hc-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.gsm-comm-hc-bio {
  font-size: 12.5px;
  color: var(--gsm-c-smoke);
  line-height: 1.5;
  margin-bottom: 12px;
}

.gsm-comm-hc-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gsm-c-bd);
}

.gsm-comm-hc-stat { text-align: center; }
.gsm-comm-hc-stat-num { display: block; font-size: 16px; font-weight: 800; color: var(--gsm-c-snow); }
.gsm-comm-hc-stat-lbl { font-size: 10px; color: var(--gsm-c-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.gsm-comm-hc-actions {
  display: flex;
  gap: 8px;
}

.gsm-comm-hc-follow-btn {
  flex: 1;
  padding: 8px 14px;
  background: var(--gsm-c-accent);
  border: none;
  border-radius: var(--gsm-radius-pill);
  color: var(--ds-accent-ink, #12160A);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out), transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-hc-follow-btn:hover { background: var(--gsm-c-accent-2); transform: scale(1.02); }

.gsm-comm-hc-follow-btn.following {
  background: var(--gsm-c-elevated);
  color: var(--gsm-c-smoke);
  border: 1px solid var(--gsm-c-bd);
}

.gsm-comm-hc-msg-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 250ms var(--gsm-ease-out),
              color 250ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-hc-msg-btn:hover { background: var(--gsm-c-surface); color: var(--gsm-c-snow); transform: scale(1.06); }
.gsm-comm-hc-msg-btn svg { width: 16px; height: 16px; }

/* ─── Empty State ─────────────────────────────────────────────────────────── */
.gsm-comm-empty-state {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.gsm-comm-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--gsm-radius-xl);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gsm-c-muted);
}

.gsm-comm-empty-icon svg { width: 28px; height: 28px; }

.gsm-comm-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gsm-c-snow);
}

.gsm-comm-empty-sub {
  font-size: 13px;
  color: var(--gsm-c-muted);
  max-width: 260px;
  line-height: 1.55;
}

/* ─── Toast Notifications ─────────────────────────────────────────────────── */
.gsm-comm-toast-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.gsm-comm-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-pill);
  box-shadow: var(--gsm-shadow-float);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gsm-c-snow);
  white-space: nowrap;
  animation: toastIn 350ms var(--gsm-ease-spring) both;
  pointer-events: all;
}

.gsm-comm-toast.success { border-color: rgba(34,197,94,0.25); }
.gsm-comm-toast.error   { border-color: rgba(255,107,94,0.25); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.95); }
}

.gsm-comm-toast.leaving { animation: toastOut 300ms var(--gsm-ease-in) both; }

.gsm-comm-toast-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--gsm-radius-pill);
  flex-shrink: 0;
}

.gsm-comm-toast.success .gsm-comm-toast-dot { background: var(--gsm-c-green); }
.gsm-comm-toast.error   .gsm-comm-toast-dot { background: var(--gsm-c-red); }
.gsm-comm-toast.info    .gsm-comm-toast-dot { background: var(--gsm-c-accent); }

/* ─── Scrollbars ──────────────────────────────────────────────────────────── */
.gsm-community-wrap ::-webkit-scrollbar { width: 5px; height: 5px; }
.gsm-community-wrap ::-webkit-scrollbar-track { background: transparent; }
.gsm-community-wrap ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: var(--gsm-radius-pill); }
.gsm-community-wrap ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ─── Search Results Dropdown (Right Sidebar) ─────────────────────────────── */
.gsm-comm-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-md);
  box-shadow: var(--gsm-shadow-float);
  z-index: 70;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 200ms var(--gsm-ease-out), transform 200ms var(--gsm-ease-out);
}

.gsm-comm-search-results.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.gsm-comm-search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 150ms var(--gsm-ease-out);
  text-decoration: none;
  color: inherit;
}

.gsm-comm-search-result-item:hover { background: var(--gsm-c-surface); }

.gsm-comm-search-result-item img {
  width: 32px;
  height: 32px;
  border-radius: var(--gsm-radius-pill);
  object-fit: cover;
}

.gsm-comm-search-result-name { font-size: 13px; font-weight: 600; color: var(--gsm-c-snow); }
.gsm-comm-search-result-sub  { font-size: 11px; color: var(--gsm-c-muted); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root {
    --gsm-col-left: 240px;
    --gsm-col-right: 260px;
  }
}

@media (max-width: 900px) {
  .gsm-comm-layout {
    grid-template-columns: 1fr !important;
    padding: 16px 16px 60px !important;
    gap: 16px !important;
  }

  .gsm-comm-sidebar,
  .gsm-comm-right-sidebar {
    position: static;
  }

  .gsm-comm-right-sidebar { order: -1; }

  .gsm-comm-left-sidebar .gsm-comm-profile-card { display: none; }

  .gsm-comm-left-sidebar .gsm-comm-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .gsm-comm-nav-item { flex: 1; min-width: 80px; justify-content: center; padding: 8px 10px; }
  .gsm-comm-nav-item span:not(.gsm-comm-nav-badge) { display: none; }
  .gsm-comm-nav-item svg { width: 18px; height: 18px; opacity: 1; }
}

@media (max-width: 640px) {
  .gsm-comm-topbar { padding: 0 16px; }
  .gsm-comm-topbar-brand span { display: none; }
  .gsm-comm-topbar-search { max-width: none; }

  .gsm-comm-dm-panel {
    right: 0;
    left: 0;
    width: 100%;
    border-radius: var(--gsm-radius-xl) var(--gsm-radius-xl) 0 0;
  }

  .gsm-comm-notif-panel {
    right: 8px;
    left: 8px;
    width: auto;
  }

  /* Compose modal → bottom sheet on mobile */
  .gsm-comm-overlay { padding: 0; align-items: flex-end; }

  .gsm-comm-modal {
    max-width: 100%;
    border-radius: var(--gsm-radius-xl) var(--gsm-radius-xl) 0 0;
    transform: translateY(100%);   /* slide up from below instead of scale */
  }

  .gsm-comm-overlay.open .gsm-comm-modal {
    transform: translateY(0);
  }

  /* Bottom-sheet safe area */
  .gsm-comm-modal-footer {
    padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
  }

  .gsm-comm-post-types { gap: 4px; }
  .gsm-comm-post-type-btn { font-size: 11px; padding: 5px 10px; }

  .gsm-reaction-picker { left: 0; transform: translateX(0) translateY(0) scale(1); }
  .gsm-reaction-picker.visible { transform: translateX(0) translateY(0) scale(1); }
}

/* ─── Login wall (guest prompt) ───────────────────────────────────────────── */
.gsm-comm-login-wall {
  background: var(--gsm-c-surface);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-xl);
  padding: 48px 32px;
  text-align: center;
  max-width: 480px;
  margin: 40px auto;
  box-shadow: var(--gsm-shadow-float);
}

.gsm-comm-login-wall h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--gsm-c-snow);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.gsm-comm-login-wall p {
  font-size: 14px;
  color: var(--gsm-c-smoke);
  line-height: 1.6;
  margin-bottom: 24px;
}

.gsm-comm-login-wall a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--gsm-c-accent);
  border-radius: var(--gsm-radius-pill);
  color: var(--ds-accent-ink, #12160A);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background 300ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-spring),
              box-shadow 300ms var(--gsm-ease-out);
}

.gsm-comm-login-wall a:hover {
  background: var(--gsm-c-accent-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--gsm-c-accent) 9%, transparent);
}

/* ─── Compose form (modal body scoped) ───────────────────────────────────── */
.gsm-comm-compose-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── WCAG 2.4.7 — :focus-visible rings ──────────────────────────────────── */
/*
 * Every element with outline:none must provide a visible focus indicator for
 * keyboard users. We use :focus-visible (ignored by mouse clicks, shown on
 * Tab/keyboard) so the design is clean for pointer users but accessible for
 * keyboard-only users.
 */
.gsm-community-wrap button:focus-visible,
.gsm-community-wrap a:focus-visible,
.gsm-community-wrap input:focus-visible,
.gsm-community-wrap textarea:focus-visible,
.gsm-community-wrap select:focus-visible,
.gsm-community-wrap [tabindex]:focus-visible {
  outline: 2px solid var(--gsm-c-accent);
  outline-offset: 2px;
}

/* Pill-shaped elements get pill-shaped focus ring */
.gsm-comm-icon-btn:focus-visible,
.gsm-comm-follow-btn:focus-visible,
.gsm-comm-post-submit:focus-visible,
.gsm-comm-dm-send-btn:focus-visible,
.gsm-comm-hc-follow-btn:focus-visible,
.gsm-comm-hc-msg-btn:focus-visible,
.gsm-comm-compose-trigger:focus-visible {
  outline: 2px solid var(--gsm-c-accent);
  outline-offset: 3px;
  border-radius: var(--gsm-radius-pill); /* matches element shape */
}

/* Inputs already use box-shadow focus — keep that, just ensure keyboard ring shows too */
.gsm-comm-topbar-search input:focus-visible,
.gsm-comm-compose-textarea:focus-visible,
.gsm-comm-comment-input:focus-visible,
.gsm-comm-dm-input:focus-visible {
  outline: 2px solid var(--gsm-c-accent);
  outline-offset: 2px;
}

/* ─── Reduced Motion ──────────────────────────────────────────────────────── */
/* Respect the user's OS-level "Reduce motion" accessibility setting.
   Collapse all transitions and animations to instant state changes.
   Animations that convey meaning (spinners) are reduced to opacity only. */
@media (prefers-reduced-motion: reduce) {
  .gsm-community-wrap *,
  .gsm-community-wrap *::before,
  .gsm-community-wrap *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* Keep spinner visible but don't spin */
  .gsm-comm-spinner {
    animation: none !important;
    opacity: 0.6;
  }

  /* Skip entry animations — show elements immediately */
  .gsm-comm-post,
  .gsm-comm-card,
  .gsm-comm-notif-item,
  .gsm-comm-dm-msg {
    opacity:   1      !important;
    transform: none   !important;
    filter:    none   !important;
  }

  /* Modals / panels — snap open instead of sliding */
  .gsm-comm-overlay,
  .gsm-comm-modal,
  .gsm-comm-notif-panel,
  .gsm-comm-dm-panel,
  .gsm-comm-reaction-picker,
  .gsm-comm-options-menu,
  .gsm-comm-mention-dropdown,
  .gsm-comm-search-results {
    transition: none !important;
  }
}

/* ─── FULL-APP MODE: hide theme chrome on the community page ──────────────── */
/*
 * The community is a full-screen app. The theme site header is hidden so the
 * fixed community topbar can anchor directly under the WP admin bar (or the
 * top of the viewport when logged out). This removes the ~90px empty gap that
 * appeared when the topbar was pushed below a still-visible theme header.
 * Scoped to body.gsm-comm-fullapp so it never leaks to other pages.
 */
body.gsm-comm-fullapp .pxl-header-sticky,
body.gsm-comm-fullapp #pxl-header,
body.gsm-comm-fullapp .pxl-header,
body.gsm-comm-fullapp .site-header,
body.gsm-comm-fullapp header.header,
body.gsm-comm-fullapp [class*="header-wrap"] {
  display: none !important;
}
/* Collapse any leftover top spacing the theme reserved for its header. */
body.gsm-comm-fullapp #pxl-main,
body.gsm-comm-fullapp .pxl-main,
body.gsm-comm-fullapp .site-content,
body.gsm-comm-fullapp #content,
body.gsm-comm-fullapp main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ─── BUG-03: WordPress admin bar offset ─────────────────────────────────── */
/*
 * When the WP admin bar is visible (body.admin-bar), it adds 32px (desktop)
 * or 46px (mobile ≤ 782px) to the top of the viewport. Fixed elements that
 * use `top: Npx` must compensate, otherwise they render behind the admin bar.
 */
body.admin-bar .gsm-comm-topbar {
  top: 32px; /* desktop admin bar height */
}

body.admin-bar .gsm-comm-notif-panel {
  top: calc(72px + 32px); /* topbar height + admin bar */
}

@media (max-width: 782px) {
  body.admin-bar .gsm-comm-topbar {
    top: 46px; /* mobile admin bar height */
  }
  body.admin-bar .gsm-comm-notif-panel {
    top: calc(72px + 46px);
  }
}

/* ─── BUG-06/14: Body scroll lock when compose modal is open ─────────────── */
/*
 * `overflow: hidden` alone fails on iOS Safari — the page still scrolls.
 * The reliable cross-browser technique: position:fixed + negative top = scrollY.
 * The exact `top` value is injected by JS using window.scrollY before opening.
 */
body.gsm-modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  /* top is set dynamically via JS: $('body').css('top', '-' + scrollY + 'px') */
}

/* ─── BUG-17: Emoji font stack on feed tabs and type pills ───────────────── */
/*
 * Plus Jakarta Sans / Geist don't include emoji glyphs.
 * Adding system emoji fonts as fallbacks ensures 💪🏆❓📅 render correctly
 * on all platforms (Windows Segoe UI Emoji, macOS Apple Color Emoji, Linux Noto).
 */
.gsm-comm-feed-tab,
.gsm-comm-post-type-btn,
.gsm-comm-post-type-pill {
  font-family: var(--gsm-font-sans), 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', emoji;
}

/* ─── BUG-15: Notification panel — sticky header guarantee ───────────────── */
/*
 * The flex layout already handles this (flex-shrink: 0 on header + flex: 1 /
 * overflow-y: auto on list). Adding position: sticky as belt-and-suspenders
 * in case a browser incorrectly allows the header to scroll in a flex column.
 */
.gsm-comm-notif-panel .gsm-comm-panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gsm-c-carbon);
  /* Subtle bottom shadow separates header from scrolling content below */
  box-shadow: 0 1px 0 var(--gsm-c-bd);
}

/* ─── BUG-18: Reaction picker overflow fix ───────────────────────────────── */
/*
 * Previous implementation: left: 50%; transform: translateX(-50%)
 * This centered the picker over the reaction button, but when the button sits
 * near the left edge of the feed column (e.g. 40 px from viewport left), the
 * picker's left edge was pushed off-screen into the sidebar.
 *
 * Fix: anchor the picker to the LEFT edge of the parent button and translate
 * only on the Y axis. This guarantees the picker never overflows left.
 * On very narrow viewports (< 640 px) it was already set to left: 0.
 */
.gsm-reaction-picker {
  left: 0 !important;
  right: auto;
  transform: translateY(8px) scale(0.9) !important;
}

.gsm-reaction-picker.visible {
  transform: translateY(0) scale(1) !important;
}

/* ─── BUG-21: Comprehensive :focus-visible coverage ─────────────────────── */
/*
 * The base rule covers all buttons/inputs but some elements had inline
 * outline: none that won the specificity war. Using !important here is
 * intentional — accessibility focus indicators must never be suppressed.
 * The :focus-visible pseudo-class means mouse clicks still look clean;
 * only keyboard navigation triggers the ring.
 */
.gsm-community-wrap button:focus-visible,
.gsm-community-wrap a:focus-visible,
.gsm-community-wrap input:focus-visible,
.gsm-community-wrap textarea:focus-visible,
.gsm-community-wrap [tabindex]:focus-visible {
  outline: 2px solid var(--gsm-c-accent) !important;
  outline-offset: 2px !important;
}

/* Action buttons & feed tabs need consistent ring shape */
.gsm-comm-action-btn:focus-visible,
.gsm-comm-feed-tab:focus-visible,
.gsm-comm-post-type-btn:focus-visible,
.gsm-comm-options-item:focus-visible,
.gsm-comm-mark-all-read:focus-visible,
.gsm-comm-nav-item:focus-visible {
  outline: 2px solid var(--gsm-c-accent) !important;
  outline-offset: 2px !important;
  border-radius: var(--gsm-radius-sm);
}

/* ─── BUG-07: Custom delete confirmation modal ───────────────────────────── */
/*
 * Replaces the native browser confirm() dialog with a SaaS-quality overlay.
 * Shares the .gsm-comm-overlay base styles (position: fixed, z-index: 200)
 * but uses a narrower, danger-themed modal card.
 */
.gsm-comm-delete-overlay {
  z-index: 250; /* above compose overlay (200) */
}

.gsm-comm-delete-modal {
  max-width: 400px;
  padding: 0;
}

.gsm-comm-delete-modal-inner {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.gsm-comm-delete-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--gsm-radius-lg);
  background: rgba(255,107,94, 0.1);
  border: 1px solid rgba(255,107,94, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gsm-c-red);
  flex-shrink: 0;
  margin-bottom: 4px;
}

.gsm-comm-delete-icon-wrap svg {
  width: 26px;
  height: 26px;
}

.gsm-comm-delete-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--gsm-c-snow);
  letter-spacing: -0.4px;
}

.gsm-comm-delete-body {
  font-size: 13.5px;
  color: var(--gsm-c-smoke);
  line-height: 1.6;
  max-width: 300px;
}

.gsm-comm-delete-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.gsm-comm-delete-cancel {
  flex: 1;
  padding: 11px 20px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
  font-family: var(--gsm-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out),
              border-color 250ms var(--gsm-ease-out),
              color 250ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-delete-cancel:hover {
  background: var(--gsm-c-surface);
  border-color: var(--gsm-c-bd-hover);
  color: var(--gsm-c-snow);
}

.gsm-comm-delete-cancel:active { transform: scale(0.97); }

.gsm-comm-delete-confirm {
  flex: 1;
  padding: 11px 20px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-red);
  border: 1px solid transparent;
  color: #fff;
  font-family: var(--gsm-font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 250ms var(--gsm-ease-out),
              box-shadow 250ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-delete-confirm:hover {
  background: #FF6B5E;
  box-shadow: 0 4px 16px rgba(255,107,94, 0.35);
}

.gsm-comm-delete-confirm:active { transform: scale(0.97); }

/* Reduced motion: snap the delete modal open/closed */
@media (prefers-reduced-motion: reduce) {
  .gsm-comm-delete-overlay,
  .gsm-comm-delete-modal {
    transition: none !important;
  }
}

/* ─── BUG-16: Publish button visual disabled state ───────────────────────── */
.gsm-comm-post-submit:disabled,
.gsm-comm-post-submit[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
  pointer-events: none; /* prevent hover glow when disabled */
}

/* ─── BUG-08: Shake animation for disabled-button tap feedback ───────────── */
@keyframes gsm-shake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-5px); }
  30%     { transform: translateX(5px); }
  45%     { transform: translateX(-4px); }
  60%     { transform: translateX(4px); }
  75%     { transform: translateX(-2px); }
  90%     { transform: translateX(2px); }
}

.gsm-comm-post-submit.gsm-shake,
.gsm-comm-comment-input.gsm-shake,
.gsm-comm-dm-input.gsm-shake {
  animation: gsm-shake 0.45s var(--gsm-ease-out) both;
}

/* ─── BUG-17: @mention dropdown keyboard-focus indicator ────────────────── */
/*
 * The `.focused` class is applied by the ArrowUp/Down JS handler.
 * The previous background change was too subtle (same as :hover).
 * Add a left accent bar and stronger background to make it unmissable.
 */
.gsm-comm-mention-item.focused {
  background: color-mix(in srgb, var(--gsm-c-accent) 12%, transparent) !important;
  border-left: 2px solid var(--gsm-c-accent);
  padding-left: 12px; /* compensate for 2px border */
}

/* ─── BUG-19: Delete modal ghost text prevention ────────────────────────── */
/*
 * During the opacity:0 → opacity:0 closing transition the modal text was
 * briefly visible through the backdrop. Using visibility:hidden at opacity=0
 * ensures the element is completely off the paint layer before display ends.
 */
.gsm-comm-delete-overlay:not(.open) .gsm-comm-delete-modal {
  visibility: hidden;
  transition: opacity 350ms var(--gsm-ease-out),
              transform 400ms var(--gsm-ease-spring),
              visibility 0s linear 350ms; /* delay matches opacity duration */
}

.gsm-comm-delete-overlay.open .gsm-comm-delete-modal {
  visibility: visible;
  transition: opacity 350ms var(--gsm-ease-out),
              transform 400ms var(--gsm-ease-spring),
              visibility 0s linear 0s; /* instant on open */
}

/* ─── BUG-07/INFO-01: Compose modal design notes ────────────────────────── */
/*
 * The centered dialog card is intentional SaaS design (same pattern as
 * Twitter, Linear, Notion compose). The BACKDROP (.gsm-comm-overlay) is
 * full-screen (position:fixed; inset:0). The modal card inside is max-width:560px.
 * On mobile (≤ 640px) it becomes a full-width bottom sheet (already implemented).
 */

/* =============================================================================
   COMMUNITY PROFILE SYSTEM — Full profile modal, Onboarding wizard, Sidebar edits
   ============================================================================= */

/* ─── Sidebar: avatar wrapper + camera edit overlay ────────────────────────── */
.gsm-comm-avatar-wrap {
  position: relative;
  display: inline-block;
  width: 72px;
  height: 72px;
  margin-bottom: 10px;
}

.gsm-comm-avatar-wrap .gsm-comm-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gsm-c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
}

.gsm-comm-avatar-edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gsm-c-accent);
  border: 2px solid var(--gsm-c-carbon);
  color: var(--ds-accent-ink, #12160A);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-spring);
  z-index: 2;
}

.gsm-comm-avatar-edit-btn:hover {
  background: var(--gsm-c-accent-2);
  transform: scale(1.12);
}

/* ─── Sidebar: "Modifier mon profil" button ─────────────────────────────────── */
.gsm-comm-edit-profile-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: var(--gsm-radius-pill);
  background: transparent;
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
  font-family: var(--gsm-font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 220ms var(--gsm-ease-out),
              border-color 220ms var(--gsm-ease-out),
              color 220ms var(--gsm-ease-out),
              transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-edit-profile-btn:hover {
  background: var(--gsm-c-accent-glow);
  border-color: var(--gsm-c-accent);
  color: var(--gsm-c-snow);
}

.gsm-comm-edit-profile-btn:active { transform: scale(0.97); }
.gsm-comm-edit-profile-btn:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }

/* =============================================================================
   FULL PROFILE MODAL
   ============================================================================= */

/* overlay — covers viewport, blurs behind modal */
.gsm-comm-pf-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--gsm-ease-out);
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 80px;
}

.gsm-comm-pf-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* The card */
.gsm-comm-pf-modal {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: var(--gsm-c-carbon);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-2xl);
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  will-change: transform, opacity;
}

/* Close button */
.gsm-comm-pf-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms, transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-pf-close:hover { background: var(--gsm-c-red); color: #fff; transform: scale(1.08); }
.gsm-comm-pf-close:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }

/* ── Cover hero ── */
.gsm-comm-pf-cover {
  position: relative;
  height: 200px;
  background: var(--gsm-c-elevated);
  overflow: hidden;
}

.gsm-comm-pf-cover-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 600ms var(--gsm-ease-out);
}

.gsm-comm-pf-cover:hover .gsm-comm-pf-cover-inner {
  transform: scale(1.02);
}

.gsm-comm-pf-cover-edit {
  position: absolute;
  bottom: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--gsm-radius-pill);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  font-family: var(--gsm-font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms, transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-pf-cover-edit:hover { background: rgba(0,0,0,0.75); transform: scale(1.04); }

/* ── Identity row ── */
.gsm-comm-pf-identity {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 24px 20px;
  margin-top: -40px; /* avatar overlaps cover by 40px */
  flex-wrap: wrap;
}

/* Avatar wrap */
.gsm-comm-pf-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.gsm-comm-pf-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--gsm-c-carbon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsm-c-accent) 15%, transparent);
  display: block;
}

.gsm-comm-pf-avatar-edit {
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gsm-c-accent);
  border: 2px solid var(--gsm-c-carbon);
  color: var(--ds-accent-ink, #12160A);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms, transform 200ms var(--gsm-ease-spring);
}

.gsm-comm-pf-avatar-edit:hover { background: var(--gsm-c-accent-2); transform: scale(1.12); }
.gsm-comm-pf-avatar-edit:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }

/* Profile meta */
.gsm-comm-pf-meta {
  flex: 1;
  min-width: 0;
  padding-top: 44px; /* pushes text below cover overlap zone */
}

.gsm-comm-pf-name {
  font-family: var(--gsm-font-sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--gsm-c-snow);
  margin: 0 0 4px;
  line-height: 1.2;
  word-break: break-word;
}

.gsm-comm-pf-role-location {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.gsm-comm-pf-location {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--gsm-c-smoke);
}

.gsm-comm-pf-since {
  font-size: 11px;
  color: var(--gsm-c-muted);
}

/* Action buttons */
.gsm-comm-pf-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 44px;
  flex-wrap: wrap;
  margin-left: auto;
}

.gsm-comm-pf-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--gsm-radius-pill);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 220ms var(--gsm-ease-out),
              box-shadow 220ms,
              transform 180ms var(--gsm-ease-spring);
}

.gsm-comm-pf-follow-btn {
  background: var(--gsm-c-accent);
  border: none;
  color: var(--ds-accent-ink, #12160A);
}

.gsm-comm-pf-follow-btn:hover {
  background: var(--gsm-c-accent-2);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--gsm-c-accent) 10%, transparent);
}

.gsm-comm-pf-follow-btn.following {
  background: transparent;
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
}

.gsm-comm-pf-follow-btn.following:hover {
  background: rgba(255,107,94,0.1);
  border-color: var(--gsm-c-red);
  color: var(--gsm-c-red);
}

.gsm-comm-pf-msg-btn, .gsm-comm-pf-edit-profile {
  background: transparent;
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
}

.gsm-comm-pf-msg-btn:hover, .gsm-comm-pf-edit-profile:hover {
  background: var(--gsm-c-accent-glow);
  border-color: var(--gsm-c-accent);
  color: var(--gsm-c-snow);
}

.gsm-comm-pf-action-btn:active { transform: scale(0.96); }
.gsm-comm-pf-action-btn:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }

/* ── Bio + Goals ── */
.gsm-comm-pf-bio-wrap,
.gsm-comm-pf-goals-wrap {
  padding: 0 24px 16px;
}

.gsm-comm-pf-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gsm-c-smoke);
  margin: 0;
  white-space: pre-wrap;
}

.gsm-comm-pf-goals-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gsm-comm-pf-goal-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  font-size: 12px;
  font-weight: 600;
  color: var(--gsm-c-smoke);
  font-family: var(--gsm-font-sans);
}

/* ── Stats row ── */
.gsm-comm-pf-stats-row {
  display: flex;
  gap: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--gsm-c-bd);
  border-bottom: 1px solid var(--gsm-c-bd);
}

.gsm-comm-pf-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: background 200ms;
  padding: 8px 0;
  border-radius: var(--gsm-radius-md);
}

.gsm-comm-pf-stat:hover { background: var(--gsm-c-elevated); }

.gsm-comm-pf-stat-num {
  font-family: var(--gsm-font-sans);
  font-size: 20px;
  font-weight: 800;
  color: var(--gsm-c-snow);
}

.gsm-comm-pf-stat-lbl {
  font-size: 11px;
  color: var(--gsm-c-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ── Tabs ── */
.gsm-comm-pf-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--gsm-c-bd);
}

.gsm-comm-pf-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px 10px;
  border-radius: var(--gsm-radius-md) var(--gsm-radius-md) 0 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--gsm-c-muted);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 200ms, border-color 200ms, background 200ms;
}

.gsm-comm-pf-tab:hover { color: var(--gsm-c-snow); background: var(--gsm-c-elevated); }

.gsm-comm-pf-tab.active {
  color: var(--gsm-c-snow);
  border-bottom-color: var(--gsm-c-accent);
}

.gsm-comm-pf-tab:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }

/* ── Tab panels ── */
.gsm-comm-pf-panel {
  display: none;
  min-height: 200px;
  padding: 20px;
}

.gsm-comm-pf-panel.active { display: block; }

.gsm-comm-pf-posts-list .gsm-comm-card {
  margin-bottom: 12px;
}

.gsm-comm-pf-empty {
  text-align: center;
  color: var(--gsm-c-muted);
  font-size: 14px;
  padding: 40px 0;
}

/* ── About panel ── */
.gsm-comm-pf-about-section {
  margin-bottom: 18px;
}

.gsm-comm-pf-about-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gsm-c-muted);
  margin-bottom: 6px;
}

.gsm-comm-pf-about-section p {
  font-size: 14px;
  color: var(--gsm-c-smoke);
  margin: 0;
  line-height: 1.6;
}

/* ── Edit panel form ── */
.gsm-comm-pf-edit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gsm-comm-pf-edit-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gsm-comm-pf-edit-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gsm-c-muted);
}

.gsm-comm-pf-edit-count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gsm-c-muted);
  text-transform: none;
}

.gsm-comm-pf-edit-input,
.gsm-comm-pf-edit-textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--gsm-radius-md);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-snow);
  font-family: var(--gsm-font-sans);
  font-size: 14px;
  resize: vertical;
  transition: border-color 200ms, box-shadow 200ms;
  box-sizing: border-box;
}

.gsm-comm-pf-edit-input:focus,
.gsm-comm-pf-edit-textarea:focus {
  outline: none;
  border-color: var(--gsm-c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
}

.gsm-comm-pf-edit-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gsm-comm-pf-edit-footer {
  padding-top: 8px;
}

.gsm-comm-pf-edit-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-accent);
  border: none;
  color: var(--ds-accent-ink, #12160A);
  font-family: var(--gsm-font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 220ms var(--gsm-ease-out),
              box-shadow 220ms,
              transform 180ms var(--gsm-ease-spring);
}

.gsm-comm-pf-edit-save:hover {
  background: var(--gsm-c-accent-2);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--gsm-c-accent) 11%, transparent);
}

.gsm-comm-pf-edit-save:active { transform: scale(0.97); }
.gsm-comm-pf-edit-save:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }
.gsm-comm-pf-edit-save:disabled { opacity: 0.5; cursor: not-allowed; }

.gsm-comm-pf-edit-save-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: full-width bottom sheet */
@media (max-width: 640px) {
  .gsm-comm-pf-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .gsm-comm-pf-modal {
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    min-height: 85dvh;
    max-height: 95dvh;
    overflow-y: auto;
  }

  .gsm-comm-pf-cover { height: 140px; }
  .gsm-comm-pf-identity { padding: 0 16px 16px; margin-top: -30px; gap: 10px; }
  .gsm-comm-pf-avatar { width: 68px; height: 68px; }
  .gsm-comm-pf-meta { padding-top: 34px; }
  .gsm-comm-pf-name { font-size: 18px; }
  .gsm-comm-pf-actions { padding-top: 34px; }
  .gsm-comm-pf-bio-wrap,
  .gsm-comm-pf-goals-wrap,
  .gsm-comm-pf-stats-row,
  .gsm-comm-pf-tabs { padding-left: 16px; padding-right: 16px; }
  .gsm-comm-pf-panel { padding: 16px; }
}

/* =============================================================================
   GOAL PILLS — shared between onboarding + profile edit
   ============================================================================= */
.gsm-comm-goal-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms var(--gsm-ease-out),
              border-color 200ms,
              color 200ms,
              transform 180ms var(--gsm-ease-spring);
}

.gsm-comm-goal-pill:hover {
  background: var(--gsm-c-accent-glow);
  border-color: var(--gsm-c-accent);
  color: var(--gsm-c-snow);
}

.gsm-comm-goal-pill.selected {
  background: var(--gsm-c-accent);
  border-color: var(--gsm-c-accent);
  color: var(--ds-accent-ink, #12160A);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--gsm-c-accent) 9%, transparent);
}

.gsm-comm-goal-pill:active { transform: scale(0.96); }
.gsm-comm-goal-pill:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }

/* =============================================================================
   ONBOARDING WIZARD MODAL
   ============================================================================= */

/* Overlay */
.gsm-comm-ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 280; /* above profile modal */
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--gsm-ease-out);
}

.gsm-comm-ob-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal card */
.gsm-comm-ob-modal {
  width: 100%;
  max-width: 520px;
  background: var(--gsm-c-carbon);
  border: 1px solid var(--gsm-c-bd);
  border-radius: var(--gsm-radius-2xl);
  box-shadow: 0 40px 100px rgba(0,0,0,0.7),
              0 0 0 1px rgba(255,255,255,0.04) inset;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Spring entry */
  transform: translateY(32px) scale(0.97);
  transition: transform 480ms cubic-bezier(0.32,0.72,0,1),
              opacity 350ms ease;
}

.gsm-comm-ob-overlay.open .gsm-comm-ob-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ── Progress indicator ── */
.gsm-comm-ob-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}

.gsm-comm-ob-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gsm-c-elevated);
  border: 2px solid var(--gsm-c-bd);
  color: var(--gsm-c-muted);
  font-family: var(--gsm-font-sans);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 300ms, border-color 300ms, color 300ms;
  flex-shrink: 0;
}

.gsm-comm-ob-step.active {
  background: var(--gsm-c-accent);
  border-color: var(--gsm-c-accent);
  color: var(--ds-accent-ink, #12160A);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
}

.gsm-comm-ob-step.done {
  background: var(--gsm-c-elevated);
  border-color: var(--gsm-c-accent);
  color: var(--gsm-c-accent);
}

.gsm-comm-ob-step.done span::before {
  content: '✓';
}

.gsm-comm-ob-step.done span { font-size: 0; }
.gsm-comm-ob-step.done span::before { font-size: 13px; }

.gsm-comm-ob-line {
  flex: 1;
  height: 2px;
  background: var(--gsm-c-bd);
  transition: background 300ms;
}

.gsm-comm-ob-line.done { background: var(--gsm-c-accent); }

/* ── Step content panels ── */
.gsm-comm-ob-content {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.gsm-comm-ob-content.active {
  display: flex;
  animation: ob-slide-in 380ms cubic-bezier(0.32,0.72,0,1) both;
}

@keyframes ob-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.gsm-comm-ob-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gsm-c-accent);
}

.gsm-comm-ob-title {
  font-family: var(--gsm-font-sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--gsm-c-snow);
  margin: 0;
  line-height: 1.25;
}

.gsm-comm-ob-subtitle {
  font-size: 14px;
  color: var(--gsm-c-smoke);
  margin: 0;
  line-height: 1.6;
}

/* ── Step 1: Avatar upload circle ── */
.gsm-comm-ob-avatar-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}

.gsm-comm-ob-avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--gsm-c-elevated);
  border: 2px dashed var(--gsm-c-bd-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 220ms, box-shadow 220ms;
}

.gsm-comm-ob-avatar-circle:hover {
  border-color: var(--gsm-c-accent);
  border-style: solid;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
}

.gsm-comm-ob-avatar-circle.has-photo {
  border-color: var(--gsm-c-accent);
  border-style: solid;
}

.gsm-comm-ob-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.gsm-comm-ob-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--gsm-c-muted);
  pointer-events: none;
}

.gsm-comm-ob-avatar-placeholder span {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.gsm-comm-ob-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms, transform 180ms var(--gsm-ease-spring);
}

.gsm-comm-ob-upload-btn:hover {
  background: var(--gsm-c-accent-glow);
  border-color: var(--gsm-c-accent);
  color: var(--gsm-c-snow);
}

.gsm-comm-ob-upload-btn:active { transform: scale(0.97); }
.gsm-comm-ob-upload-btn:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }

.gsm-comm-ob-skip-hint {
  font-size: 12px;
  color: var(--gsm-c-muted);
  text-align: center;
  margin: 0;
}

/* ── Step 2: Form ── */
.gsm-comm-ob-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gsm-comm-ob-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gsm-comm-ob-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gsm-c-muted);
}

.gsm-comm-ob-bio-count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gsm-c-muted);
  text-transform: none;
}

.gsm-comm-ob-input,
.gsm-comm-ob-textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--gsm-radius-md);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-snow);
  font-family: var(--gsm-font-sans);
  font-size: 14px;
  resize: vertical;
  transition: border-color 200ms, box-shadow 200ms;
  box-sizing: border-box;
}

.gsm-comm-ob-input:focus,
.gsm-comm-ob-textarea:focus {
  outline: none;
  border-color: var(--gsm-c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gsm-c-accent-glow) 15%, transparent);
}

/* ── Step 3: Goal pills ── */
.gsm-comm-ob-goals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
}

/* ── Step 4: Follow suggestions ── */
.gsm-comm-ob-suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}

.gsm-comm-ob-sug-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--gsm-radius-lg);
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-bd);
  transition: border-color 200ms;
}

.gsm-comm-ob-sug-item:hover { border-color: var(--gsm-c-bd-hover); }

.gsm-comm-ob-sug-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.gsm-comm-ob-sug-info { flex: 1; min-width: 0; }

.gsm-comm-ob-sug-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gsm-c-snow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsm-comm-ob-sug-role {
  font-size: 11px;
  color: var(--gsm-c-muted);
}

.gsm-comm-ob-follow-btn {
  padding: 7px 16px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-accent);
  border: none;
  color: var(--ds-accent-ink, #12160A);
  font-family: var(--gsm-font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms, transform 180ms var(--gsm-ease-spring);
}

.gsm-comm-ob-follow-btn.following {
  background: var(--gsm-c-elevated);
  border: 1px solid var(--gsm-c-accent);
  color: var(--gsm-c-accent);
  cursor: default;
}

.gsm-comm-ob-follow-btn:not(.following):hover { background: var(--gsm-c-accent-2); }
.gsm-comm-ob-follow-btn:active { transform: scale(0.95); }

.gsm-comm-ob-empty-sug {
  text-align: center;
  color: var(--gsm-c-muted);
  font-size: 13px;
  padding: 20px 0;
}

/* ── Onboarding footer ── */
.gsm-comm-ob-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gsm-c-bd);
}

.gsm-comm-ob-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.gsm-comm-ob-skip {
  background: none;
  border: none;
  color: var(--gsm-c-muted);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
  transition: color 200ms;
}

.gsm-comm-ob-skip:hover { color: var(--gsm-c-smoke); }

.gsm-comm-ob-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--gsm-radius-pill);
  background: transparent;
  border: 1px solid var(--gsm-c-bd);
  color: var(--gsm-c-smoke);
  font-family: var(--gsm-font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms, border-color 200ms, transform 180ms var(--gsm-ease-spring);
}

.gsm-comm-ob-back:hover {
  background: var(--gsm-c-elevated);
  border-color: var(--gsm-c-bd-hover);
}

.gsm-comm-ob-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--gsm-radius-pill);
  background: var(--gsm-c-accent);
  border: none;
  color: var(--ds-accent-ink, #12160A);
  font-family: var(--gsm-font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 220ms var(--gsm-ease-out),
              box-shadow 220ms,
              transform 180ms var(--gsm-ease-spring);
}

.gsm-comm-ob-next:hover {
  background: var(--gsm-c-accent-2);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--gsm-c-accent) 11%, transparent);
}

.gsm-comm-ob-next:active { transform: scale(0.97); }
.gsm-comm-ob-next:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }
.gsm-comm-ob-next:disabled { opacity: 0.5; cursor: not-allowed; }
.gsm-comm-ob-back:focus-visible { outline: 2px solid var(--gsm-c-accent); outline-offset: 2px; }

/* Mobile: constrain height */
@media (max-width: 600px) {
  .gsm-comm-ob-modal {
    padding: 24px 20px;
    max-height: 96dvh;
    overflow-y: auto;
  }

  .gsm-comm-ob-title { font-size: 18px; }
  .gsm-comm-ob-avatar-circle { width: 96px; height: 96px; }
  .gsm-comm-ob-progress { gap: 0; }
}

/* Reduced motion: collapse all onboarding animations */
@media (prefers-reduced-motion: reduce) {
  .gsm-comm-ob-content.active { animation: none; }
  .gsm-comm-ob-modal,
  .gsm-comm-pf-modal { transition: none !important; }
}

/* ─── ISSUE-038: Hide WP admin bar search (conflicting dual search inputs) ── */
/* The community provides its own search; the WP admin bar search is redundant */
#wpadminbar #wp-admin-bar-search {
  display: none !important;
}

/* ─── Cookie Consent Banner ───────────────────────────────────────────────── */
.gsm-comm-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--gsm-c-surface);
  border-top: 1px solid var(--gsm-c-bd);
  padding: 16px 24px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}

.gsm-comm-cookie-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.gsm-comm-cookie-text {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  color: var(--gsm-c-muted);
  margin: 0;
  line-height: 1.5;
}

.gsm-comm-cookie-text a {
  color: var(--gsm-c-accent);
  text-decoration: underline;
}

.gsm-comm-cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.gsm-comm-cookie-btn {
  padding: 8px 18px;
  border-radius: var(--gsm-radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 150ms;
}
.gsm-comm-cookie-btn:hover { opacity: .85; }

.gsm-comm-cookie-accept {
  background: var(--gsm-c-accent);
  color: #000;
}

.gsm-comm-cookie-decline {
  background: var(--gsm-c-elevated);
  color: var(--gsm-c-muted);
  border: 1px solid var(--gsm-c-bd);
}