/* ============================================================
   WINR v27 — INSIDE COMMUNITY: button polish on Tony's v26 baseline
   Audit-driven polish layer for the 3-pane (channels / chat / members)
   shell shipped in _v26_community_chat. Tight scope:
     A. Tap-target sweep   (38/30/32/26 → 44/36/40/32; thumb-friendly)
     B. Font-size sweep    (chat body + role pills + badges, more readable)
     C. Opacity sweep      (text on dark; lifts channel/member/topic names)
     D. Disabled state     (cleaner contrast on .cv2-btn.primary:disabled)
     E. Hover delight      (subtle lift + glow on topbar icon buttons,
                            matches the v22 cinematic language)
   Scoped via `body.in-community` for clean specificity over v26 selectors.
   All motion respects prefers-reduced-motion.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   A. TAP-TARGET SWEEP — every clickable ≥ 44×44 (or 36×36 in
   cramped clusters like message-hover actions)
   ───────────────────────────────────────────────────────────── */

/* Topbar icon buttons — 38 → 44 */
body.in-community .cv2-icon-btn,
body.in-community .cv2-theme-btn,
body.in-community .cv2-color-btn,
body.in-community .cv2-more-btn,
body.in-community .cv2-mobile-menu{
  width: 44px;
  height: 44px;
}
body.in-community .cv2-icon-btn svg,
body.in-community .cv2-theme-btn svg,
body.in-community .cv2-color-btn svg,
body.in-community .cv2-more-btn svg{
  width: 20px;
  height: 20px;
}

/* Back button — 38 → 44 (preserves label slot) */
body.in-community .cv2-back{
  height: 44px;
  padding: 0 16px;
}

/* Drawer close (X) — 32 → 40 */
body.in-community .cv2-drawer-close{
  width: 40px;
  height: 40px;
}
body.in-community .cv2-drawer-close svg{
  width: 18px;
  height: 18px;
}

/* Message hover actions — 30 → 36 (44 ideal but cluster is cramped) */
body.in-community .cv2-msg-hover button{
  width: 36px;
  height: 36px;
}
body.in-community .cv2-msg-hover button svg{
  width: 16px;
  height: 16px;
}

/* Color wheel preset dots — 26 → 32 */
body.in-community .cv2-color-dot{
  width: 32px;
  height: 32px;
}

/* Reaction pills (existing + add) — vertical padding bump → ~30px height */
body.in-community .cv2-reaction,
body.in-community .cv2-reaction-add{
  padding: 5px 10px;
}

/* ─────────────────────────────────────────────────────────────
   B. FONT-SIZE SWEEP — readability pass on chat body + signal
   elements (role pills, unread badges, section labels)
   ───────────────────────────────────────────────────────────── */

/* Chat message body — 14.5 → 15, dimmer var(--txt-mid) → explicit 0.85 */
body.in-community .cv2-msg-text{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

/* Role pills (OWNER/ADMIN) — 9.5 → 11, breathe the padding */
body.in-community .cv2-role-pill{
  font-size: 11px;
  padding: 3px 8px;
  letter-spacing: 0.4px;
}

/* Channel unread badge — 10 → 11, slightly larger pill */
body.in-community .cv2-channel-unread{
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
}

/* Section headers (INFORMATION / Online / etc.) — 10.5 → 11.5 */
body.in-community .cv2-section-head{
  font-size: 11.5px;
  letter-spacing: 0.7px;
}

/* Member role + user-strip status — 11 → 11.5, brighter than --txt-lo */
body.in-community .cv2-member-role,
body.in-community .cv2-user-status{
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

/* ─────────────────────────────────────────────────────────────
   C. OPACITY / CONTRAST TIGHTENING — text on dark BGs reads
   washed at 0.72; bump primary content rows
   ───────────────────────────────────────────────────────────── */

/* Channel list item text (inactive) — 0.72 → 0.88 */
body.in-community .cv2-channel{
  color: rgba(255, 255, 255, 0.88);
}

/* Channel header topic line — 0.72 → 0.85 */
body.in-community .cv2-channel-header-topic{
  color: rgba(255, 255, 255, 0.85);
}

/* Member row name (default state — offline row still gets opacity:0.45
   via Tony's existing `.cv2-member-row.offline .cv2-member-name` rule) */
body.in-community .cv2-member-name{
  color: rgba(255, 255, 255, 0.95);
}

/* ─────────────────────────────────────────────────────────────
   D. DISABLED STATE — replace v26's `opacity:.5` half-state with
   explicit disabled styling (cleaner WCAG contrast story)
   ───────────────────────────────────────────────────────────── */

body.in-community .cv2-btn.primary:disabled,
body.in-community .cv2-btn.primary[disabled]{
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  cursor: not-allowed;
  border-color: transparent;
}
body.in-community .cv2-btn.primary:disabled:hover,
body.in-community .cv2-btn.primary[disabled]:hover{
  background: rgba(255, 255, 255, 0.06);
  transform: none;
  filter: none;
}

/* ─────────────────────────────────────────────────────────────
   E. HOVER DELIGHT — micro lift + faint outer glow on topbar
   icon buttons. Matches v22 cinematic language (member-row lift,
   online-dot breath). Skipped if user prefers reduced motion.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference){
  body.in-community .cv2-icon-btn,
  body.in-community .cv2-theme-btn,
  body.in-community .cv2-color-btn,
  body.in-community .cv2-more-btn,
  body.in-community .cv2-back{
    transition:
      transform .18s ease,
      background .15s ease,
      color .15s ease,
      border-color .15s ease,
      box-shadow .18s ease;
  }
  body.in-community .cv2-icon-btn:hover,
  body.in-community .cv2-theme-btn:hover,
  body.in-community .cv2-color-btn:hover,
  body.in-community .cv2-more-btn:hover,
  body.in-community .cv2-back:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
  body.in-community .cv2-icon-btn:active,
  body.in-community .cv2-theme-btn:active,
  body.in-community .cv2-color-btn:active,
  body.in-community .cv2-more-btn:active,
  body.in-community .cv2-back:active{
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
}