/* ════════════════════════════════════════════════════════════
   NOIR COMMUNITY — DISCUSSIONS
   White editorial theme · X/Twitter post grammar · Telegram glass.
   The feed is a column of floating frosted cards. Channels live
   on the left, the pulse of the community on the right.
   Everything enters with motion.
   ════════════════════════════════════════════════════════════ */
.noir-disc {
  --bg:        #ffffff;
  --bg-soft:   #f6f8f9;
  --ink:       #0f1419;
  --ink-2:     #2f3b44;
  --muted:     #5b6b78;
  --line:      rgba(15,20,25,.09);
  --hair:      rgba(15,20,25,.06);

  --orange:    #cb360f;
  --orange-2:  #e04010;
  --plum:      #7c3d6e;
  --sky:       #2e6e8e;
  --moss:      #3d6e4a;
  --lime:      #5e9326;
  --butter:    #a98f1d;
  --rose:      #c45c6a;

  /* action semantics */
  --reply:     #2e6e8e;
  --boost:     #3d8f57;
  --like:      #e0455e;

  /* glass recipe (on white) */
  --glass:        rgba(255,255,255,.72);
  --glass-2:      rgba(255,255,255,.88);
  --glass-edge:   rgba(255,255,255,.9);
  --glass-line:   rgba(15,20,25,.07);
  --glass-inset:  inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 1px rgba(15,20,25,.03);
  --glass-shadow: 0 1px 2px rgba(15,20,25,.04), 0 10px 30px rgba(15,20,25,.07);
  --glass-shadow-lg: 0 2px 6px rgba(15,20,25,.05), 0 18px 50px rgba(15,20,25,.11);

  --serif: 'Roboto Slab', Georgia, serif;
  --sans:  'Public Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
  --ease:  cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}
/* ── embed scoping: everything lives under .noir-disc ── */
.noir-disc, .noir-disc *, .noir-disc *::before, .noir-disc *::after { box-sizing: border-box; }
.noir-disc {
  position: relative;
  font-family: var(--sans); color: var(--ink); font-size: 15px;
  background:
    radial-gradient(90% 60% at 12% -5%, rgba(203,54,15,.06), transparent 60%),
    radial-gradient(80% 70% at 105% 110%, rgba(124,61,110,.07), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100%;
}
.noir-disc button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.noir-disc ::-webkit-scrollbar { width: 0; height: 0; }

/* faint adinkra so the glass has something to frost */
.noir-disc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg stroke='rgba(15,20,25,0.045)' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='35' cy='35' r='16'/%3E%3Ccircle cx='35' cy='35' r='8'/%3E%3Cpath d='M105 16 V56 M85 36 H125'/%3E%3Cpath d='M105 26 l9 9 l-9 9 l-9 -9 z'/%3E%3Cpath d='M35 86 l17 17 l-17 17 l-17 -17 z'/%3E%3Cpath d='M88 95 l9 9 l9 -9'/%3E%3Cpath d='M88 110 l9 -9 l9 9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ════════ APP SHELL — three columns ════════ */
.noir-disc .app {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 248px minmax(0,620px) 312px;
  gap: 20px; justify-content: center;
  min-height: 100%; max-width: 1320px; margin: 0 auto;
  padding: 0 18px 24px;
}

/* ════════ LEFT — channel rail ════════ */
.chan-rail {
  padding: 22px 0; display: flex; flex-direction: column; gap: 16px;
  height: 100%; overflow-y: auto;
  animation: slideInLeft .6s var(--ease) both;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 6px; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--orange-2), var(--orange));
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-weight: 800; font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(203,54,15,.32);
}
.brand-name { font-family: var(--serif); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand-name span { color: var(--orange); }
.brand-sub { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.rail-label {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 0 14px; margin-bottom: -4px;
}
/* drawer-only extra section — hidden on desktop, shown inside mobile drawer */
.chan-extra { display: none; }
.chan-list { display: flex; flex-direction: column; gap: 3px; }
.chan {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 14px;
  color: var(--ink-2); font-weight: 600; font-size: 14.5px;
  border: 1px solid transparent;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s, border-color .2s;
  position: relative; text-align: left; width: 100%;
}
.chan:hover { background: var(--glass); transform: translateX(2px); }
.chan.active {
  background: var(--glass-2);
  border-color: var(--glass-line);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  color: var(--ink);
}
.chan.active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 3px; background: var(--orange);
  box-shadow: 0 0 12px rgba(203,54,15,.5);
}
.chan-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 15px;
  background: color-mix(in srgb, var(--c, #8a7f72) 14%, #fff);
  color: var(--c, #8a7f72);
}
.chan-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-count {
  font-size: 11px; font-weight: 700; color: var(--muted);
  font-family: var(--mono);
}
.chan-dot {
  width: 8px; height: 8px; border-radius: 5px; background: var(--orange);
  box-shadow: 0 0 0 3px rgba(203,54,15,.16);
}
.rail-spacer { flex: 1; }
.new-discussion {
  margin: 0 6px; padding: 13px; border-radius: 16px;
  background: linear-gradient(150deg, var(--orange-2), var(--orange));
  color: #fff; font-weight: 800; font-size: 14.5px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(203,54,15,.34);
  transition: transform .2s var(--spring), box-shadow .2s;
}
.new-discussion:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 28px rgba(203,54,15,.42); }
.new-discussion:active { transform: scale(.96); }

/* ════════ CENTER — feed ════════ */
.feed-col { height: 100%; overflow-y: auto; padding-bottom: 60px; scroll-behavior: smooth; }

.feed-head {
  position: sticky; top: 0; z-index: 20;
  margin-top: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid var(--glass-line); border-radius: 20px;
  box-shadow: var(--glass-inset), var(--glass-shadow);
  overflow: hidden;
  animation: dropIn .55s var(--ease) both;
}
.fh-top { display: flex; align-items: center; gap: 13px; padding: 15px 18px 12px; }
.fh-title { font-family: var(--serif); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.fh-title b { color: var(--orange); font-weight: 800; }
.fh-meta { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.fh-spacer { flex: 1; }
.fh-iconbtn {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--glass-2); border: 1px solid var(--glass-line);
  display: grid; place-items: center; color: var(--ink-2);
  box-shadow: var(--glass-inset);
  transition: transform .2s var(--spring), color .2s;
}
.fh-iconbtn:hover { transform: translateY(-1px); color: var(--orange); }

/* tabs with sliding indicator */
.fh-tabs { display: flex; position: relative; padding: 0 8px; }
.fh-tab {
  flex: 1; padding: 12px 8px 14px; font-weight: 700; font-size: 14px;
  color: var(--muted); position: relative; transition: color .25s;
}
.fh-tab:hover { color: var(--ink-2); }
.fh-tab.active { color: var(--ink); }
.tab-ink {
  position: absolute; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--orange); transition: transform .4s var(--spring), width .4s var(--spring);
  box-shadow: 0 0 10px rgba(203,54,15,.45);
}

/* composer */
.composer {
  margin-top: 14px; display: flex; align-items: center; gap: 11px; padding: 8px 14px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px;
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  animation: riseIn .6s var(--ease) .08s both;
  transition: box-shadow .3s, border-color .3s, border-radius .3s;
}
/* expand into a rounded box once focused (footer + multi-line) */
.composer.focus { align-items: flex-start; border-radius: 20px; padding: 14px; }
.composer.focus { box-shadow: var(--glass-inset), var(--glass-shadow-lg); border-color: rgba(203,54,15,.25); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
  font-family: var(--serif);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 8px rgba(15,20,25,.18);
  position: relative; overflow: hidden;
}
/* Force the photo to fill the circle. The theme's `img { height:auto }` otherwise
   beats the inline height, so a portrait photo renders as an ellipse. */
.noir-disc .avatar img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 50% !important; display: block !important;
}
.composer .avatar { width: 38px; height: 38px; font-size: 13px; }
.composer.focus .avatar { width: 46px; height: 46px; }
.cmp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmp-input {
  border: none; outline: none; background: none; resize: none; font: inherit;
  font-size: 16px; color: var(--ink); line-height: 1.4; padding: 4px 0; /* 16px: iOS won't zoom-on-tap */
  min-height: 22px; max-height: 200px;
}
.composer.focus .cmp-input { font-size: 17px; line-height: 1.5; padding: 8px 0 4px; min-height: 30px; }
.cmp-input::placeholder { color: var(--muted); }
.cmp-foot {
  display: flex; align-items: center; gap: 4px; margin-top: 6px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s var(--ease), opacity .3s, margin-top .3s;
}
.composer.focus .cmp-foot { max-height: 60px; opacity: 1; margin-top: 10px; }
.cmp-tool {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: var(--orange); transition: background .2s, transform .2s;
}
.cmp-tool:hover { background: rgba(203,54,15,.1); transform: translateY(-1px); }
.cmp-foot-spacer { flex: 1; }
.cmp-ring { width: 26px; height: 26px; opacity: 0; transition: opacity .3s; }
.cmp-ring.show { opacity: 1; }
.cmp-ring circle { fill: none; stroke-width: 3; }
.cmp-ring .track { stroke: var(--line); }
.cmp-ring .meter { stroke: var(--orange); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .2s, stroke .2s; }
.cmp-post {
  padding: 9px 20px; border-radius: 999px; font-weight: 800; font-size: 14.5px;
  background: linear-gradient(150deg, var(--orange-2), var(--orange)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(203,54,15,.32);
  transition: transform .2s var(--spring), opacity .2s, filter .2s;
}
.cmp-post:hover { transform: translateY(-1px); }
.cmp-post:active { transform: scale(.95); }
.cmp-post:disabled { opacity: .45; filter: grayscale(.3); cursor: not-allowed; transform: none; }

/* ════════ POST CARD ════════ */
.feed { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.noir-disc .post {
  display: flex; gap: 13px; padding: 16px 22px !important;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px;
  -webkit-backdrop-filter: blur(18px) saturate(1.55); backdrop-filter: blur(18px) saturate(1.55);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  transition: transform .28s var(--ease), box-shadow .28s, border-color .28s;
  cursor: pointer; position: relative;
}
.post:hover { transform: translateY(-3px); box-shadow: var(--glass-inset), var(--glass-shadow-lg); border-color: var(--glass-edge); }
.post.reveal { opacity: 0; transform: translateY(22px); }
.post.in { animation: riseIn .6s var(--ease) both; }

.post-l { flex-shrink: 0; }
.post-av-wrap { position: relative; }
.av-ring { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; }
.online .av-ring { border-color: var(--lime); animation: pulseRing 2.4s ease-in-out infinite; }

.post-r { flex: 1; min-width: 0; }
.post-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p-name { font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; }
.p-name:hover { text-decoration: underline; }
.p-badge {
  width: 16px; height: 16px; flex-shrink: 0;
  display: grid; place-items: center;
}
.role-pill {
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--c,#8a7f72) 15%, #fff);
  color: var(--c,#8a7f72);
  border: 1px solid color-mix(in srgb, var(--c,#8a7f72) 25%, transparent);
}
.p-handle, .p-dot, .p-time { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.p-dot { font-size: 11px; }
.p-chan {
  font-size: 12.5px; font-weight: 700; color: var(--orange);
  background: rgba(203,54,15,.08); padding: 1px 8px; border-radius: 999px;
}
.p-menu { margin-left: auto; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; transition: background .2s, color .2s; }
.p-menu:hover { background: rgba(15,20,25,.05); color: var(--ink); }

.p-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin-top: 5px; white-space: pre-wrap; word-wrap: break-word; }
.p-text a, .mention, .tag { color: var(--orange); font-weight: 600; }
.mention { color: var(--sky); }

/* media */
.p-media { margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-line); position: relative; }
.p-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-media.single img { max-height: 360px; }
.p-media.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; aspect-ratio: 16/9; }
.p-media.grid2 img { height: 100%; }

/* link card */
.p-link {
  margin-top: 12px; border: 1px solid var(--glass-line); border-radius: 16px; overflow: hidden;
  background: var(--glass-2); transition: background .2s;
}
.p-link:hover { background: #fff; }
.p-link-thumb { height: 150px; background: linear-gradient(135deg, var(--plum), var(--sky)); display: grid; place-items: center; color: rgba(255,255,255,.85); }
.p-link-body { padding: 12px 14px; }
.p-link-host { font-size: 12px; color: var(--muted); }
.p-link-title { font-weight: 700; font-size: 15px; margin: 3px 0; }
.p-link-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* poll */
.p-poll { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.poll-opt {
  position: relative; border: 1px solid var(--glass-line); border-radius: 12px;
  padding: 11px 14px; font-size: 14px; font-weight: 600; overflow: hidden;
  transition: border-color .2s, transform .15s;
}
.poll-opt:hover { border-color: rgba(203,54,15,.4); transform: translateX(2px); }
.poll-fill { position: absolute; inset: 0; background: rgba(203,54,15,.1); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease); border-radius: 12px; }
.poll-opt.voted .poll-fill { transform: scaleX(var(--pct,0)); }
.poll-opt span { position: relative; }
.poll-pct { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 13px; opacity: 0; transition: opacity .3s; }
.poll-opt.voted .poll-pct { opacity: 1; }
.poll-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* thread preview */
.p-thread {
  margin-top: 12px; padding: 10px 13px; border-radius: 14px;
  background: var(--glass-2); border: 1px solid var(--glass-line);
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted);
  transition: background .2s;
}
.p-thread:hover { background: #fff; }
.thread-avs { display: flex; }
.thread-avs .mini { width: 22px; height: 22px; border-radius: 50%; margin-left: -7px; border: 2px solid var(--bg); font-size: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; }
.thread-avs .mini:first-child { margin-left: 0; }
.p-thread b { color: var(--orange); }

/* action row */
.p-actions { display: flex; align-items: center; margin-top: 12px; gap: 4px; }
.act {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 999px; color: var(--muted);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: color .2s, background .2s; position: relative;
}
.act svg { width: 18px; height: 18px; transition: transform .3s var(--spring); }
.act.reply:hover { color: var(--reply); background: rgba(46,110,142,.1); }
.act.boost:hover { color: var(--boost); background: rgba(61,143,87,.1); }
.act.like:hover  { color: var(--like);  background: rgba(224,69,94,.1); }
.act.view:hover  { color: var(--sky);   background: rgba(46,110,142,.08); }
.act.flush { margin-left: auto; gap: 2px; }
.act.boost.on { color: var(--boost); }
.act.boost.on svg { transform: rotate(180deg); }
.act.like.on { color: var(--like); }
.act.like.on svg { animation: likePop .45s var(--spring); }
.act.like.on .heart { fill: var(--like); }
.act.save.on { color: var(--orange); }
.act.save.on .bm { fill: var(--orange); }

/* fly-up +1 on like */
.float1 { position: absolute; left: 50%; top: 0; font-size: 12px; font-weight: 800; color: var(--like); pointer-events: none; opacity: 0; }
.float1.go { animation: float1 .8s var(--ease) forwards; }

/* ════════ THREAD DETAIL (X-style post → replies) ════════ */
.thread-wrap { display: none; flex-direction: column; }
.thread-wrap.show { display: flex; animation: threadIn .42s var(--ease) both; }
@keyframes threadIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.thread-head {
  position: sticky; top: 0; z-index: 20; margin-top: 14px;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px;
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: var(--glass-inset), var(--glass-shadow);
}
.thread-back {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--glass-2); border: 1px solid var(--glass-line);
  display: grid; place-items: center; color: var(--ink);
  box-shadow: var(--glass-inset);
  transition: transform .2s var(--spring), background .2s;
}
.thread-back:hover { transform: translateX(-3px); background: #fff; }
.thread-htitle { font-family: var(--serif); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.thread-hmeta { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* focal post — enlarged */
.focal {
  margin-top: 14px; padding: 18px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px;
  -webkit-backdrop-filter: blur(18px) saturate(1.55); backdrop-filter: blur(18px) saturate(1.55);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  animation: riseIn .5s var(--ease) both;
}
.focal-head { display: flex; align-items: center; gap: 12px; }
.focal-head .avatar { width: 50px; height: 50px; font-size: 16px; }
.focal-id { flex: 1; min-width: 0; }
.focal-name { font-weight: 800; font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.focal-handle { font-size: 13.5px; color: var(--muted); margin-top: 1px; }
.focal-text { font-size: 19px; line-height: 1.55; margin-top: 14px; color: var(--ink); white-space: pre-wrap; word-wrap: break-word; }
.focal-text .mention { color: var(--sky); } .focal-text .tag { color: var(--orange); }
.focal .p-media, .focal .p-link, .focal .p-poll { margin-top: 14px; }
.focal-time { font-size: 13.5px; color: var(--muted); margin-top: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--glass-line); }
.focal-stats { display: flex; gap: 24px; padding: 13px 2px; border-bottom: 1px solid var(--glass-line); font-size: 14px; }
.focal-stats b { color: var(--ink); font-weight: 800; } .focal-stats span { color: var(--muted); }
.focal .p-actions { margin-top: 6px; justify-content: space-between; padding: 0 4px; }

/* reply composer */
.reply-cmp {
  margin-top: 14px; display: flex; gap: 12px; padding: 15px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px;
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--glass-inset), var(--glass-shadow);
}
.reply-cmp .avatar { width: 42px; height: 42px; }
.reply-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* replies list with thread connector */
.replies { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 40px; }
.reply-card { position: relative; }
.reply-card::before {
  content: ""; position: absolute; left: 39px; top: -14px; width: 2px; height: 14px;
  background: var(--glass-line);
}
.reply-card:first-child::before { display: none; }
.reply-card.in { animation: riseIn .5s var(--ease) both; }
.reply-more { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--orange); transition: gap .2s; }
.reply-card:hover .reply-more { text-decoration: underline; }
.replies-empty {
  text-align: center; color: var(--muted); padding: 44px 20px; font-size: 14.5px;
  background: var(--glass); border: 1px dashed var(--glass-line); border-radius: 20px;
}

/* ════════ RIGHT — pulse rail ════════ */
.pulse-rail { height: 100%; overflow-y: auto; padding: 22px 0 60px; display: flex; flex-direction: column; gap: 16px; }
.rail-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px;
  padding: 11px 16px; box-shadow: var(--glass-inset);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: dropIn .55s var(--ease) .05s both;
}
.rail-search svg { color: var(--muted); flex-shrink: 0; }
.rail-search input { flex: 1; border: none; outline: none; background: none; font: inherit; font-size: 14px; }
.rail-search input::placeholder { color: var(--muted); }

.rail-card {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px;
  -webkit-backdrop-filter: blur(18px) saturate(1.55); backdrop-filter: blur(18px) saturate(1.55);
  box-shadow: var(--glass-inset), var(--glass-shadow); overflow: hidden;
  animation: riseIn .6s var(--ease) both;
}
.rc-head { padding: 15px 17px 10px; font-family: var(--serif); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.trend {
  padding: 9px 17px; transition: background .2s; display: block; width: 100%; text-align: left;
}
.trend:hover { background: var(--glass-2); }
.trend-top { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.trend-name { font-weight: 800; font-size: 14.5px; margin: 1px 0; }
.trend-stat { font-size: 12px; color: var(--muted); font-family: var(--mono); }

.who { display: flex; align-items: center; gap: 11px; padding: 9px 17px; transition: background .2s; }
.who:hover { background: var(--glass-2); }
.who-body { flex: 1; min-width: 0; }
.who-name { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-role { font-size: 12px; color: var(--muted); }
.who-follow {
  padding: 7px 15px; border-radius: 999px; font-weight: 800; font-size: 13px;
  background: var(--ink); color: #fff; transition: transform .2s var(--spring), background .2s;
}
.who-follow:hover { transform: scale(1.05); }
.who-follow.on { background: var(--glass-2); color: var(--ink); border: 1px solid var(--glass-line); }
.who-follow:active { transform: scale(.92); }

.rc-foot { padding: 11px 17px; }
.rc-more { font-size: 13.5px; color: var(--orange); font-weight: 700; }
.rc-more:hover { text-decoration: underline; }

.rail-foot { padding: 4px 17px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.rail-foot a { color: var(--muted); }
.rail-foot a:hover { color: var(--orange); }

/* ════════ KEYFRAMES ════════ */
@keyframes riseIn   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes dropIn   { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes likePop  { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 70% { transform: scale(.88); } 100% { transform: scale(1); } }
@keyframes float1   { 0% { opacity: 0; transform: translate(-50%,4px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-26px) scale(1.1); } }
@keyframes pulseRing { 0%,100% { box-shadow: 0 0 0 0 rgba(94,147,38,.35); } 50% { box-shadow: 0 0 0 5px rgba(94,147,38,0); } }
@keyframes spinOnce { to { transform: rotate(360deg); } }

/* close (✕) button exists only for the mobile channel sheet — hidden on desktop */
.noir-disc .chan-rail-close { display: none; }

/* responsive */
@media (max-width: 1280px) { .noir-disc .app { grid-template-columns: 230px minmax(0,1fr) 300px; } }
@media (max-width: 1120px) { .noir-disc .app { grid-template-columns: 76px minmax(0,1fr) 300px; } .brand-name, .brand-sub, .chan-name, .chan-count, .rail-label, .new-discussion span { display: none; } .chan { justify-content: center; } .new-discussion { padding: 13px 0; } }
@media (max-width: 940px)  { .noir-disc .app { grid-template-columns: 76px minmax(0,1fr); } .pulse-rail { display: none; } }
/* Desktop: the feed-head icon only toggles the mobile channel sheet — useless here (channels live in the always-on rail), so hide it. */
@media (min-width: 681px) { .noir-disc .fh-iconbtn { display: none !important; } }

/* ════════════════════════════════════════════════════════════
   MOBILE (≤680px) — single column. Channel rail becomes a horizontal
   scrolling chip strip at the top so channels stay reachable; pulse
   rail hidden; feed + composer go full-width with tighter spacing.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* The section entrance animation sets transform:matrix(...) on :is(#noir-section-community,#nv3-section-community)
     which creates a new containing block for position:fixed, trapping the drawer.
     Override to none so position:fixed works against the real viewport. */
  /* Remove the section entrance transform — it creates a false containing block for position:fixed.
     overflow:auto on the view containers is fine; fixed elements escape it once transform is none. */
  :is(#noir-section-community,#nv3-section-community) { transform: none !important; }

  .noir-disc .app {
    display: flex; flex-direction: column; gap: 0;
    min-height: 0; max-width: 100%; padding: 0 12px 28px;
  }
  /* No separate scrim element. .app { position:relative; z-index:1 } traps the
     sheet in a low stacking context, so any sibling scrim paints OVER the sheet
     (and its pointer-events block touch/scroll on iOS). The dim is drawn as a huge
     box-shadow on the sheet itself (see .chan-rail) so it always rides behind it. */
  .noir-disc::after { display: none !important; }
  .noir-disc.chans-open::after { opacity: 1; pointer-events: auto; }

  /* ── MOBILE CHANNEL SHEET: short rounded dropdown ──
     Drops from the toggle just below the tabs; scrolls as one unit and
     slides down + fades on toggle. Authoritative copy is the inline
     <style> in member/dashboard.php (kept identical to dodge CSS cache). */
  .noir-disc .chan-rail {
    display: block !important;
    position: fixed !important;
    top: 96px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important; max-width: none !important;
    height: auto !important; max-height: min(60vh, 500px) !important;
    z-index: 200 !important;
    background: #fbfaf8 !important;
    border: 1px solid rgba(15,20,25,.06) !important;
    border-radius: 26px !important;
    /* last layer is the dim scrim — transparent when closed so it can fade in */
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 12px 30px rgba(15,20,25,.14),
      0 40px 80px rgba(15,20,25,.26),
      0 0 0 100vmax rgba(15,20,25,0) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    padding: 0 0 8px !important;
    transform-origin: top center !important;
    /* closed state: nudged up + slightly shrunk + invisible */
    transform: translateY(-18px) scale(.97) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* OUT animation: quick, decisive lift-away */
    transition:
      transform .28s cubic-bezier(.4,0,.2,1),
      opacity .2s ease,
      box-shadow .28s ease !important;
    -webkit-overflow-scrolling: touch;
  }
  /* open: IN animation — springy drop-down + the box-shadow scrim fades to full dim */
  .noir-disc.chans-open .chan-rail {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 12px 30px rgba(15,20,25,.14),
      0 40px 80px rgba(15,20,25,.26),
      0 0 0 100vmax rgba(15,20,25,.48) !important;
    transition:
      transform .44s cubic-bezier(.34,1.4,.5,1),
      opacity .26s ease,
      box-shadow .34s ease !important;
  }

  /* close (✕) pinned to the sheet's top-right (fixed inside the transformed sheet) */
  .noir-disc .chan-rail-close {
    position: fixed !important; top: 12px !important; right: 12px !important; z-index: 6 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 30px !important; height: 30px !important; border-radius: 50% !important;
    border: none !important; background: rgba(15,20,25,.06) !important; color: #5b5249 !important;
    cursor: pointer !important; padding: 0 !important; transition: background .18s !important;
  }
  .noir-disc .chan-rail-close:active { background: rgba(15,20,25,.12) !important; }

  .noir-disc .chan-rail .brand { display: none !important; }
  .noir-disc .chan-rail .rail-spacer { display: none !important; }
  /* old container drag-handle off — the handle is now drawn on the sticky header */
  .noir-disc .chan-rail::before { display: none !important; }

  /* sticky header: drag handle + CHANNELS (top-level label only); right pad clears the ✕ */
  .noir-disc .chan-rail > .rail-label {
    position: sticky !important; top: 0 !important; z-index: 3 !important;
    display: block !important;
    font-size: 11px !important; font-weight: 800 !important; letter-spacing: .1em !important;
    text-transform: uppercase !important; color: #9a9086 !important;
    background: #fbfaf8 !important;
    padding: 18px 52px 11px 20px !important; border-bottom: 1px solid rgba(15,20,25,.05) !important;
    margin: 0 !important;
  }
  .noir-disc .chan-rail > .rail-label::before {
    content: "" !important; position: absolute !important;
    top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
    width: 38px !important; height: 4px !important; border-radius: 99px !important;
    background: rgba(15,20,25,.16) !important;
  }
  /* channel rows — natural height, the sheet itself scrolls */
  .noir-disc .chan-rail .chan-list { display: flex !important; flex-direction: column !important; gap: 2px !important; overflow: visible !important; padding: 8px 10px 2px !important; }
  .noir-disc .chan { width: 100%; justify-content: flex-start; padding: 11px 12px !important; border-radius: 14px !important; }
  .noir-disc .chan-name { display: inline !important; white-space: normal; }
  .noir-disc .chan-count { display: inline !important; }
  .noir-disc .new-discussion { display: flex !important; width: calc(100% - 16px) !important; margin: 10px 8px 8px !important; }
  /* feed full width */
  .noir-disc .feed-col { order: 1; height: auto; overflow: visible; }
  /* feed-head toggle becomes the channel button — make it pop */
  .noir-disc .fh-iconbtn { background: rgba(203,54,15,.1); color: var(--orange); }

  /* pulse-rail hidden on mobile — content lives in the drawer instead */
  .noir-disc .pulse-rail { display: none !important; }

  /* chan-extra: show Trending + Active Now inside the drawer */
  .noir-disc .chan-extra {
    display: block; margin-top: 8px; padding-top: 12px;
    border-top: 1px solid var(--glass-line);
  }
  .noir-disc .chan-extra .rail-label { padding: 2px 4px 10px; }
  /* Trending cards inside drawer */
  .noir-disc .chan-extra .trend {
    width: 100%; text-align: left; padding: 10px 6px;
    border-bottom: 1px solid var(--glass-line);
  }
  /* Active now list inside drawer — vertical stack */
  .noir-disc #drawerActive { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 8px; }
  .noir-disc #drawerActive .who {
    flex-direction: row; gap: 12px; padding: 8px 6px; border-radius: 12px;
    align-items: center; background: none;
  }
  .noir-disc #drawerActive .who-body { flex: 1; min-width: 0; }
  .noir-disc #drawerActive .who-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .noir-disc #drawerActive .who-role { font-size: 12px; color: var(--muted); }
  .noir-disc #drawerActive .who-follow { display: none; }
  /* feed-head: not sticky on mobile — scrolls with content.
     ID selector (#feedCol) wins all class-based specificity fights.
     JS drives margin-top to collapse the space (no gap) when hiding. */
  .noir-disc .feed-head,
  #feedCol .feed-head {
    position: relative !important; top: auto !important;
    border-radius: 16px !important;
    transition: margin-top .34s cubic-bezier(.22,1,.36,1), opacity .28s !important;
  }
  .noir-disc .feed-head.fh-hiding,
  #feedCol .feed-head.fh-hiding {
    opacity: 0 !important;
    pointer-events: none !important;
    /* margin-top set via JS inline to -(offsetHeight+8) — collapses layout space */
  }
  .noir-disc .fh-title { font-size: 18px; }
  .noir-disc .fh-tab { font-size: 13px; padding: 11px 4px 13px; }
  /* compact single-line bar; expands to a box on focus */
  .noir-disc .composer { margin-top: 12px; padding: 7px 12px; border-radius: 999px; }
  .noir-disc .composer.focus { padding: 13px; border-radius: 18px; }
  .noir-disc .feed { padding: 12px 0 40px; gap: 12px; }
  .noir-disc .post { padding: 14px 18px !important; gap: 11px; border-radius: 16px; }
  .noir-disc .avatar { width: 42px; height: 42px; }
  .noir-disc .composer .avatar { width: 40px; height: 40px; }
  .noir-disc .p-text { font-size: 15px; }
  /* action row: shrink so all six fit on a narrow card */
  .noir-disc .p-actions { gap: 0; }
  .noir-disc .act { padding: 6px 6px; gap: 4px; font-size: 12px; }
  .noir-disc .act svg { width: 17px; height: 17px; }
  .noir-disc .post-head { gap: 5px; }
  /* thread detail full-width too */
  .noir-disc .focal { padding: 15px; }
  .noir-disc .reply-cmp { padding: 13px; }
  /* tabs (Discussions / Direct Messages): smaller so both fit one row */
  .noir-comm-tabs,
  .noir-comm-shell:not(.ndm-dark) .noir-comm-tabs { padding: 12px 12px 8px !important; gap: 8px !important; }
  .noir-comm-tab,
  .noir-comm-shell:not(.ndm-dark) .noir-comm-tab { font-size: 13.5px !important; padding: 10px 16px !important; }
}

/* ── guard the discussions composers against the global .noir-v2 textarea reset ── */
.noir-disc textarea {
  background: none !important; border: none !important; border-radius: 0 !important;
  min-height: 0 !important; box-shadow: none !important;
  font-family: var(--sans) !important; color: var(--ink) !important;
  -webkit-appearance: none; appearance: none;
}
.noir-disc .cmp-input { padding: 4px 0 !important; }
.noir-disc .composer.focus .cmp-input { padding: 8px 0 4px !important; }
/* Idle composer is a single-line bar. On mobile the global `.noir-v2 textarea
   {min-height:90px}` + the auto-grow JS can leave the textarea ballooned; this cap
   (beats the global rule AND any leftover inline height) keeps it one line until focus. */
.noir-disc .composer:not(.focus) .cmp-input { max-height: 30px !important; overflow-y: hidden !important; }
.noir-disc #replyInput { padding: 6px 0 !important; }

/* ════════════════════════════════════════════════════════════
   HARDENING — beat the plugin's global .noir-v2 element rules
   (.noir-v2 button{background:none} and .noir-v2 input{…!important}
   out-specify single-class module rules). .noir-disc .X = (0,0,2,0)
   wins over .noir-v2 button = (0,0,1,1); inputs need !important.
   ════════════════════════════════════════════════════════════ */
.noir-disc .new-discussion,
.noir-disc .cmp-post,
.noir-disc .cmp-post:disabled { background: linear-gradient(150deg, var(--orange-2), var(--orange)); color: #fff; }
.noir-disc .who-follow { background: var(--ink); color: #fff; }
.noir-disc .who-follow.on { background: var(--glass-2); color: var(--ink); }
.noir-disc .fh-iconbtn { background: var(--glass-2); }
.noir-disc .thread-back { background: var(--glass-2); }
.noir-disc .brand-mark { background: linear-gradient(150deg, var(--orange-2), var(--orange)); }

/* search input — undo the global .noir-v2 input box (size + focus cream bg).
   That global is .noir-v2 input:not()×6 = (0,0,7,1)!important, so an ID is required to win. */
.noir-disc #discSearch,
.noir-disc #discSearch:focus {
  flex: 1; width: auto !important; display: block !important;
  background: none !important; border: none !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 !important; height: auto !important;
  min-height: 0 !important; font-size: 14px !important; color: var(--ink) !important;
}

/* ════ Strip the top community chrome (per design): remove the "Community"
   header row (title + search icon + new-message "+") and the rail brand block.
   Tabs (Discussions / Direct Messages) rise to the top naturally. ════ */
.noir-comm-header { display: none !important; }
.noir-disc .brand { display: none !important; }
.noir-disc .chan-rail { padding-top: 6px; }

/* ════ Discussions / Direct Messages tabs → bigger pills, seated at the top
   of the white container (flush above the channels). Tabs stay in the shell
   (outside the hiding views) so they remain visible in DM mode too. ════ */
.noir-comm-tabs,
.noir-comm-shell:not(.ndm-dark) .noir-comm-tabs {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(90% 120% at 12% -20%, rgba(203,54,15,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg stroke='rgba(15,20,25,0.045)' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='35' cy='35' r='16'/%3E%3Ccircle cx='35' cy='35' r='8'/%3E%3Cpath d='M105 16 V56 M85 36 H125'/%3E%3Cpath d='M105 26 l9 9 l-9 9 l-9 -9 z'/%3E%3Cpath d='M35 86 l17 17 l-17 17 l-17 -17 z'/%3E%3Cpath d='M88 95 l9 9 l9 -9'/%3E%3Cpath d='M88 110 l9 -9 l9 9'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 100% 100%, 140px 140px !important;
  margin: 0 !important;
  padding: 18px 22px 10px !important;
  border: none !important; box-shadow: none !important;
  gap: 10px !important;
  position: relative; z-index: 3;
}
.noir-comm-tab,
.noir-comm-shell:not(.ndm-dark) .noir-comm-tab {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
}
.noir-comm-tab-badge,
.noir-comm-shell:not(.ndm-dark) .noir-comm-tab-badge {
  font-size: 11px !important; padding: 2px 7px !important; min-width: 18px;
}
/* keep the white module flush under the tabs (Discussions view only —
   DM views keep their cream/dark backgrounds) */
#noir-comm-view-channels { background: #ffffff !important; }

/* ════ Sticky side columns: channel rail (left) + pulse rail (right) pin while
   the center feed scrolls. align-self:start lets them keep natural height so
   sticky has room within the tall feed row. ════ */
.noir-disc .chan-rail,
.noir-disc .pulse-rail {
  position: sticky;
  top: 10px;
  align-self: start;
  height: auto;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
}
.noir-disc .feed-col {
  height: auto;
  overflow: visible;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }