/* ============================================================
   WINR v28 — INSIDE COMMUNITY: audit-driven FIXES
   Companion to _v27_community_button_polish.css. Where v27 was
   pure visual polish, v28 is FIX-shaped audit work pulled from
   AUDIT.md (2026-05-24 logged-out v26 audit).

   CSS-only items here; JS overrides in _v28_community_fixes.js.

   Fixes:
     C-01  Hide notifications bell (placeholder, "coming soon")
     C-02  Hide all "coming soon" More-menu items
     C-03  Hide Edit-role stub button + Expiring-links button
     D-04  Always-visible message timestamps (was hover-only)
     D-05  Read-only composer label brighter (0.6 → 0.85)
     D-10  Choose theme button contrast bump
     D-12  Hide "More" (…) button in message hover-actions cluster
     D-13  Hide color wheel button (concept escalated to Tony)
   Plus styles for v28.js to use:
     B-05  Reply-to banner above composer
     B-03  Emoji picker popover
     D-03  Logged-out user-strip "Log in" CTA
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   HIDE-LAYER — placeholder buttons + concepts escalated to Tony
   ───────────────────────────────────────────────────────────── */



/* C-01 — Notifications bell (placeholder toast) */
body.in-community .cv2-icon-btn[title="Notifications"]{
  display: none !important;
}

/* D-12 — "More" (…) button in message hover-actions cluster */
body.in-community .cv2-msg-hover button[onclick*="_cv2MoreMsg"]{
  display: none !important;
}

/* C-02 — All "coming soon" More-menu items (matched by their _cv2MenuAct key) */
body.in-community .cv2-menu-item[onclick*="'notifPrefs'"],
body.in-community .cv2-menu-item[onclick*="'moderation'"],
body.in-community .cv2-menu-item[onclick*="'roles'"],
body.in-community .cv2-menu-item[onclick*="'analytics'"],
body.in-community .cv2-menu-item[onclick*="'help'"],
body.in-community .cv2-menu-item[onclick*="'blocklist'"]{
  display: none !important;
}

/* C-03 — Edit-role stub button + Expiring-links button */
body.in-community .cv2-btn[onclick*="_cv2EditRole"],
body.in-community .cv2-btn[onclick*="Expiring links"]{
  display: none !important;
}

/* Hide menu-section dividers that become orphans when above items disappear.
   Cheap heuristic: if a section-head is followed by no visible siblings before
   the next section-head, the head looks weird. Hard to express in pure CSS
   without :has() everywhere, so we accept slight orphan-heads for now. */

/* ─────────────────────────────────────────────────────────────
   STATE-DRIVEN VISIBILITY — body class hides for not-logged-in
   and not-joined states. JS toggles `is-logged-out` and
   `is-not-joined` on body.
   ───────────────────────────────────────────────────────────── */

/* A-03 — Hide invite + share menu items when logged-out or not joined */
body.is-logged-out .cv2-menu-item[onclick*="'invite'"],
body.is-logged-out .cv2-menu-item[onclick*="'share'"],
body.is-not-joined .cv2-menu-item[onclick*="'invite'"],
body.is-not-joined .cv2-menu-item[onclick*="'share'"]{
  display: none !important;
}

/* A-02 — Hide channel section "+" (add channel) button for logged-out users.
   For logged-in non-owners the button isn't rendered (Tony gates with
   _isOwner). For logged-out, the button COULD be rendered if Tony's
   _isOwner check returns true (test flag) — hide it explicitly. */
body.is-logged-out .cv2-section-add{
  display: none !important;
}

/* A-01 — Restored topbar invite button for logged-out users */

/* ─────────────────────────────────────────────────────────────
   D-04 — Always-visible message timestamps
   Tony's CSS hides `.cv2-msg-time-hover` until message-row hover.
   Force-visible — small light-grey, doesn't fight density.
   ───────────────────────────────────────────────────────────── */

body.in-community .cv2-msg-time-hover{
  display: block !important;
  opacity: 0.55;
}

/* ─────────────────────────────────────────────────────────────
   D-05 — Read-only composer label brighter
   Tony's inline style uses opacity:.6 on the whole composer when
   readOnly. The lock-emoji label inside becomes hard to read.
   Bump the inner label opacity specifically.
   ───────────────────────────────────────────────────────────── */

body.in-community .cv2-composer[style*="opacity:.6"] .cv2-composer-input,
body.in-community .cv2-composer[style*="opacity: .6"] .cv2-composer-input,
body.in-community .cv2-composer[style*="opacity:0.6"] .cv2-composer-input{
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────
   D-10 — Choose theme button — SVG/thumbnail more visible
   v27 already bumped the button to 44×44. The inner thumbnail
   was the visibility issue.
   ───────────────────────────────────────────────────────────── */

body.in-community .cv2-theme-btn{
  border: none !important;
  box-shadow: none !important;
}
body.in-community .cv2-theme-btn:hover{
  border: none !important;
  box-shadow: none !important;
}
body.in-community .cv2-theme-btn > *{
  width: 28px;
  height: 28px;
  border-radius: 50% !important; /* Perfect circular thumb preview */
}

/* Style back button as a beautiful dark circle with a centered arrow */
body.in-community .cv2-back {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--txt-hi) !important;
}
body.in-community .cv2-back svg {
  width: 16px !important;
  height: 16px !important;
}

/* Hide color customizer wheel button specifically for logged-out/guest users */
body.is-logged-out #cv2ColorBtn,
body.is-logged-out .cv2-color-btn {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   B-05 — Reply-to banner (above composer)
   JS sets `.cv2-reply-banner` element with replyTo state.
   ───────────────────────────────────────────────────────────── */

.v28-reply-banner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 12px 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(124, 92, 252, 0.10);
  border-left: 3px solid var(--cv2-accent, #7C5CFC);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  animation: v28ReplyIn .18s ease;
}
.v28-reply-banner-label{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.v28-reply-banner-label svg{
  width: 14px;
  height: 14px;
  opacity: 0.7;
  flex: 0 0 auto;
}
.v28-reply-banner-name{
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v28-reply-banner-close{
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  flex: 0 0 auto;
}
.v28-reply-banner-close:hover{
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 1);
}
@keyframes v28ReplyIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   B-03 / B-04 — Emoji picker popover (replaces random emoji)
   JS positions it near the click target.
   ───────────────────────────────────────────────────────────── */

.v28-emoji-picker{
  position: fixed;
  z-index: 9999;
  background: rgba(20, 20, 26, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px) saturate(140%);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 280px;
  animation: v28PickerIn .14s ease;
}
.v28-emoji-pick{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s ease, transform .12s ease;
}
.v28-emoji-pick:hover{
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.15);
}
@keyframes v28PickerIn{
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────
   D-03 — Logged-out user strip → "Log in" CTA
   JS swaps the user-strip content when !currentUser.
   ───────────────────────────────────────────────────────────── */

.v28-loggedout-strip{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.v28-loggedout-btn{
  flex: 1;
  height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease, background .15s ease, border-color .15s ease;
}
.v28-loggedout-btn.primary{
  background: #fafafa;
  color: #0a0a0e;
}
.v28-loggedout-btn.primary:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.v28-loggedout-btn.ghost{
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
}
.v28-loggedout-btn.ghost:hover{
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Hide the user identity strip for logged-out users completely so the channel list fills to the bottom */
body.is-logged-out .cv2-user-strip {
  display: none !important;
}

/* Hide the bottom navigation bar completely inside community view, so the layout fills fully to the bottom */
body.in-community .bottom-nav {
  display: none !important;
}