/* ==============================================================================
	AmourSelect Community – community.css
   Source-of-truth: 2025-09-22, v1.3 (user canonical)
=============================================================================  */



/* =========================================================
   AmourSelect — /community/  (drop-in CSS)
   ========================================================= */

/* ---------- Theme variables ---------- */
:root{
  --as-radius: 12px;           /* corner rounding for photos/cards */
  --as-gap: 16px;              /* grid gap */
  --as-chat-min: 360px;        /* chat height: minimum */
  --as-chat-ideal: 66vh;       /* chat height: ideal */
  --as-chat-max: 720px;        /* chat height: maximum */
}

/* ---------- Page layout (two-column shell) ---------- */
.as-app { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; }
@media (max-width: 1024px){ .as-app { grid-template-columns: 1fr; } }

/* =========================================================
   Featured panel
   - transparent until selected
   - white frame by default; border color follows tier
   ========================================================= */
   
   /* =========================================================
   Featured image — ACTIVE SELECTION (single source of truth)
   ========================================================= */
.as-featured.as-has-image .as-featured-main img{
  border: 6px solid #df087e;          /* AmourSelect pink */
  box-shadow: 0 0 26px rgba(223,8,126,0.55);
}
   
/* .as-featured .as-featured-main{
  position: relative;
  min-height: 260px;
  border: 6px solid #fff;              /* default placeholder frame 
  border-radius: var(--as-radius);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
} */
.as-featured .as-featured-main::before{
  content: "Select a member";
  color: rgba(255,255,255,.55);
  font-size: 1rem;
  font-style: italic;
  pointer-events: none;
  position: absolute;
}
.as-featured .as-featured-main img{
  display: none;                       /* hidden until JS activates */
  width: 100%; height: auto;
  border-radius: var(--as-radius);
  box-sizing: border-box;
  transition: border-color .18s ease;
}
.as-featured .as-featured-main img.as-active{
  display: block;
  animation: asFadeIn .25s ease forwards;
  position: relative; z-index: 1;
}

/* Featured border color by tier (JS adds .as-l1/.as-l2/.as-l3 to .as-featured) */
/* ============ALL FEATURED IMAGE BORDERS WILL BE PINK===================== 
.as-featured.as-l1 .as-featured-main img{ border: 6px solid #df087e; } /* L1 white 
.as-featured.as-l2 .as-featured-main img{ border: 6px solid #df087e; } /* L2 gold 
.as-featured.as-l3 .as-featured-main img{ border: 6px solid #df087e; } /* L3 select */

/* Optional featured thumbs (if used) */
.as-featured-thumbs{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px; }
.as-featured-thumbs img{ width:100%; height:auto; border-radius: calc(var(--as-radius) - 2px); display:block; }




/* =========================================================
   Member grid
   - 3 across desktop (bigger cards), responsive to 2 / 1
   - transparent cards; tier border on wrapper
   ========================================================= */
.as-member-grid{
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  gap: var(--as-gap);
  margin-top: 20px;
}
@media (max-width: 1024px){ .as-member-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 640px){  .as-member-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Card shell */
.as-card{
  position: relative;
  border-radius: calc(var(--as-radius) + 4px);
  background: transparent;             /* no gray panels */
  box-shadow: none;
  padding: 8px;
  cursor: pointer;
  transition: transform .15s ease;
  overflow: visible;                   /* allow halo to spill */
}
.as-card:hover{ transform: translateY(-2px); }

/* Tier variable per card (single source of truth) */
.as-card       { --tier: #df087e; }
.as-card.as-l1 { --tier: df087e; }    /* Level 1 */
.as-card.as-l2 { --tier: #df087e; }    /* Level 2 */
.as-card.as-l3 { --tier: #df087e; }    /* Level 3 */

/* Photo wrapper (gets the tier border) */
.as-card .as-card-photo{
  position: relative;
  border-radius: var(--as-radius);
  overflow: hidden;                    /* clip image corners */
  box-shadow: 0 0 0 4px var(--tier);   /* tier border */
}

/* Uniform square thumbnails (padding-top hack) */
.as-card .as-card-photo::after{
  content:""; display:block; padding-top:100%;
}

/* Image fills the square */
.as-card .as-card-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  border-radius: var(--as-radius);     /* match wrapper */
  box-shadow: none !important;         /* neutralize legacy shadows */
}

/* Selected state: keep tier border + add tier-colored halo (shadow stack) */
.as-card.as-selected .as-card-photo{
  box-shadow:
    0 0 0 4px var(--tier),
    0 0 22px 6px var(--tier),
    0 0 40px 12px var(--tier);
}
.as-card.as-selected{ transform: translateY(-1px) scale(1.02); }

/* Name strip */
.as-card-meta{
  margin-top: 8px;
  display:flex; justify-content: space-between; align-items:center;
  font-weight:600; color:#fff;
}
.as-card-meta .as-name{ color:#fff; }
.as-card-meta .as-age{ opacity:.75; }

/* =========================================================
   Chat area — flexible, device-friendly
   ========================================================= */
.bp-messages-wrap,
.bp-messages-threads-wrapper,
.bp-messages-column{
  height: auto !important;
  min-height: clamp(var(--as-chat-min), var(--as-chat-ideal), var(--as-chat-max)) !important;
  overflow: hidden;
}
.bp-messages-wrap [data-overlayscrollbars-viewport],
.bp-messages-wrap .threads-list-wrapper,
.bp-messages-wrap .bm-side-content,
.bp-messages-wrap .bp-messages-column,
.bp-messages-wrap .threads-list{
  overflow-y: auto;
}

/* =========================================================
   Utilities / animations
   ========================================================= */
@keyframes asFadeIn{ from{opacity:0} to{opacity:1} }




/*  ============================================================
	REMOVING THE GAP BETWEEN BORDERS IN FEATURED IMAGE 
	============================================================ */
	/* When a featured image is active, hide the outer placeholder frame */
.as-featured .as-featured-main:has(img.as-active) {
  border-color: transparent;   /* keeps layout size the same */
  /* or: border: none; */
}
/********************************************************************************/

/*	==================================================================
	ADJUSTMENT FOR CHAT HEIGHT ON TABLETS ONLY
	================================================================== /*
	/* ---- Tablet-only chat sizing (uses vh) ---- */
/* iPad-ish widths: 768–1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  /* tweak these to taste */
  :root {
    --as-chat-min: 40vh;
    --as-chat-ideal: 50vh;  /* main control */
    --as-chat-max: 60vh;
  }

  /* enforce with !important to beat plugin inline heights */
  .bp-messages-wrap,
  .bp-messages-threads-wrapper,
  .bp-messages-column {
    height: auto !important;
    min-height: var(--as-chat-ideal) !important;
    max-height: var(--as-chat-max) !important;
  }
}

/* (Optional) Different values for portrait vs landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  :root { --as-chat-ideal: 52vh; --as-chat-max: 56vh; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  :root { --as-chat-ideal: 64vh; --as-chat-max: 68vh; }
}
/********************************************************************************/

/*	=============================================================================
	KILL SWITCH FOR THE BETTER MESSAGES POP-UP ON TABLETS
	=========================================================================== */
	/* Prevent Better Messages fullscreen/popup UI on tablet/phone */
@media (max-width: 1024px) {
  /* Known fullscreen containers across versions */
  .bp-messages-full-screen,
  .bm-full-screen,
  .bpbm-full-screen,
  .bm-modal,
  .bpbm-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/*	==============================================================================
	Prevents the plugin’s mobile/fullscreen UI from showing on /community/:
	========================================================================== */
	/* Kill Better Messages fullscreen/popup UI on tablets/phones for /community/ */
@media (max-width: 1024px){
  .bp-messages-full-screen,
  .bm-full-screen,
  .bpbm-full-screen,
  .bm-modal,
  .bpbm-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/*******************************************************************************/
.as-featured.as-has-image .as-featured-main { border-color: transparent; }

/*	============================================================================
	PINK OVERLAY BUTTON FOR SELECTED MEMBERSHIP PROFILE
	========================================================================= /*
/* ---- Featured "Visit profile" floating button ---- */
.as-featured {
  position: relative; /* ensure the button positions relative to featured container */
}

.as-visit-btn{
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 10px 14px;
  background: #df087e;          /* brand pink */
  color: #fff;
  border-radius: 9999px;         /* pill */
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(223,8,126,0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Show it only when a member is selected (image active) */
.as-featured.as-has-image .as-visit-btn{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.as-visit-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(223,8,126,0.45);
}

@media (max-width: 640px){
  .as-visit-btn{
    right: 10px;
    bottom: 10px;
    padding: 9px 12px;
    font-size: 13px;
  }
}
/*******************************************************************************/


/**  ===================================================================  
		Show Photos Button 
	 =======================================================================   */
	 
/* Place buttons side-by-side on the featured panel */
.as-featured .as-visit-btn,
.as-featured .as-photos-btn{
  position: absolute;
  bottom: -14px;
  left: 14px;
  display: inline-block;
  margin-right: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  z-index: 3;
}

/* Visit = solid pink (you already had this) */
.as-featured .as-visit-btn{
  background: #ff1493;
  color: #000;                /* goes black on hover per your request earlier */
  border: 2px solid #ff1493;
}
.as-featured .as-visit-btn:hover{ color:#000; }

/* Photos = outlined gold for contrast */
.as-featured .as-photos-btn{
  background: transparent;
  color: #fff;
  border: 2px solid #cfa75b;  /* gold outline */
}
.as-featured .as-photos-btn:hover{
  background: #cfa75b;
  color: #000;                /* legible on hover */
}

/* Nudge the second button next to the first */
.as-featured .as-photos-btn{ left: auto; right: 14px; }
@media (max-width: 640px){
  /* stack on small screens */
  .as-featured .as-photos-btn{ right: 14px; bottom: -56px; }
}
/*****************************************************************************/
/* ============================================================
   AS — Compatibility Halo Framework (Step 1: CSS only)
   Prepares halo to be controlled by match-score instead of tier
   ============================================================ */

/* Default (no compatibility yet): halo = tier (no visual change) */
.as-card { --tier: #fff; --halo: var(--tier); }
.as-card.as-l1 { --tier:#ffffff; }
.as-card.as-l2 { --tier:#cfa75b; }
.as-card.as-l3 { --tier:#7C8288; }

/* Halo now uses --halo instead of --tier */
.as-card .as-card-photo{
  box-shadow:0 0 0 4px var(--halo);
}

/* Selected glow also uses --halo */
.as-card.as-selected .as-card-photo{
  box-shadow:
    0 0 0 4px var(--halo),
    0 0 22px 6px var(--halo),
    0 0 40px 12px var(--halo);
}

/* Compatibility buckets — colors temporary, adjustable later */
.as-compat-90 { --halo:#2ee889; }   /* 90–100% bright green */
.as-compat-80 { --halo:#1e9a5b; }   /* 80–89% deep green */
.as-compat-70 { --halo:#e6c229; }   /* 70–79% yellow */
.as-compat-60 { --halo:#f08a24; }   /* 60–69% orange */
.as-compat-00 { --halo:#d64545; }   /* below 60 red */
.as-compat-na { --halo:#666; }      /* no score */

/* ============================================================
	12/01/2025
   AS – Compatibility-based halos (override membership colors)
   ============================================================ */

/* Default halo color (if no compat class yet) */
.as-card {
  --as-compat-halo: #1a1a1a; /* fallback pink */
}

/* Gold 90–100 */
.as-card.compat-gold {
  --as-compat-halo: #cfa75b; /* gold */
}

/* Bright Green 75–89 */
.as-card.compat-green {
  --as-compat-halo: #48ff00; /* strong-match green */
}

/* Light Green 60–74 – white halo, premium-neutral */
.as-card.compat-neutral {
  --as-compat-halo: #dcffcd; /* green-white */
}

/* Dark Gray for <60 – low compatibility */
.as-card.compat-red {
  --as-compat-halo: #1a1a1a; /* black */
}

/* Unknown / no score */
.as-card.compat-none {
  --as-compat-halo: #666666; /* soft gray */
}

/* Apply halo color to the photo wrapper */
.as-card .as-card-photo{
  position: relative;
  border-radius: var(--as-radius);
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--as-compat-halo);
}

/* Selected card: stronger halo */
.as-card.as-selected .as-card-photo{
  box-shadow:
    0 0 0 4px var(--as-compat-halo),
    0 0 22px 6px var(--as-compat-halo),
    0 0 40px 12px var(--as-compat-halo);
}

/* ============================================================
   AS – Compatibility-based halos (Prince Palette Edition)
   20251201_1304
   Palette:
   - 90–100 : #cfa75b (gold)
   - 75–89  : #48ff00 (strong green)
   - 60–74  : #dcffcd (soft green)
   - <60    : #1a1a1a (charcoal)
   ============================================================ */

/* Base variable */
.as-card {
  --as-compat-halo: #df087e; /* fallback / unused */
}

/* Gold 90–100 */
.as-card.compat-gold {
  --as-compat-halo: #cfa75b;
}

/* Strong 75–89 */
.as-card.compat-strong {
  --as-compat-halo: #48ff00;
}

/* Soft 60–74 */
.as-card.compat-soft {
  --as-compat-halo: #dcffcd;
}

/* Low <60 – charcoal */
.as-card.compat-low {
  --as-compat-halo: #1a1a1a;
}

/* Unknown / no score */
.as-card.compat-none {
  --as-compat-halo: #555555;
}

/* Apply halo color to the photo wrapper */
.as-card .as-card-photo{
  position: relative;
  border-radius: var(--as-radius);
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--as-compat-halo);
}

/* Selected card: stronger halo */
.as-card.as-selected .as-card-photo{
  box-shadow:
    0 0 0 4px var(--as-compat-halo),
    0 0 22px 6px var(--as-compat-halo),
    0 0 40px 12px var(--as-compat-halo);
}

/* ---------- Legend & sort UI ---------- */

.as-compat-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  margin-bottom:1rem;
}

.as-sort-toggle{
  background:#df087e;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:0.5rem 1.25rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 0.25rem 0.75rem rgba(0,0,0,.4);
  transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.as-sort-toggle:hover{
  background:#cfa75b;
  transform:translateY(-1px);
  box-shadow:0 0.5rem 1rem rgba(0,0,0,.45);
}
.as-sort-toggle[data-mode="sorted"]{
  background:#48ff00;
  color:#000;
}

/* Legend row */
.as-compat-legend{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  font-size:0.8rem;
}
.as-compat-legend .legend-item{
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  color:#f5f5f5;
  opacity:0.9;
}
.as-compat-legend .legend-swatch{
  width:14px;
  height:14px;
  border-radius:999px;
  box-shadow:0 0 0 2px rgba(0,0,0,.6);
}

/* Swatch colors */
.legend-gold  .legend-swatch{ background:#cfa75b; }
.legend-strong .legend-swatch{ background:#48ff00; }
.legend-soft .legend-swatch{ background:#dcffcd; }
.legend-low  .legend-swatch{ background:#1a1a1a; }

/* 
	===========================================
	UPGRADE TO CONNECT BUTTON
	===========================================
*/

.as-visit-btn.as-locked {
  background: #cfa75b;
  color: #000;
  border-color: #cfa75b;
  font-weight: 700;
}

/* ===== Featured image: ALWAYS pink when selected ===== */
.as-featured.as-has-image .as-featured-main img.as-active{
  border: 6px solid #df087e !important;
  box-shadow: 0 0 26px rgba(223,8,126,.55) !important;
  border-radius: var(--as-radius);
  box-sizing: border-box;
}

/* If the white “frame” is still visible, kill it when active */
.as-featured.as-has-image .as-featured-main{
  border-color: transparent !important;
}

.as-featured-main img.as-active{
  border: 6px solid #df087e !important;
}

/* =========================================================
   FORCE Featured image border to ALWAYS be AmourSelect Pink
   (Overrides tier-based L1/L2/L3 featured borders)
   ========================================================= */

.as-featured.as-l1 .as-featured-main img,
.as-featured.as-l2 .as-featured-main img,
.as-featured.as-l3 .as-featured-main img,
.as-featured.as-has-image .as-featured-main img.as-active,
.as-featured-main img.as-active{
  border: 6px solid #df087e !important;
  box-shadow: 0 0 26px rgba(223,8,126,.55) !important;
  border-radius: var(--as-radius) !important;
  box-sizing: border-box !important;
}

/* If the white outer frame is still showing, kill it when selected */
.as-featured.as-has-image .as-featured-main{
  border-color: transparent !important;
}



/* ======================================
	NEW CSS CODE TO HIDE HIGHER LEVELS
   ====================================== /*	
/* Hide cards that fail the interactable filter */
.as-card.as-filtered-out{
  display: none !important;
}

/* Toggle styling */
.as-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:600;
  font-size:14px;
}

.as-toggle input{
  display:none;
}

.as-toggle-ui{
  width:46px;
  height:26px;
  border-radius:999px;
  background:#333;
  position:relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
  transition: background .15s ease;
}

.as-toggle-ui::after{
  content:"";
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  position:absolute;
  top:3px;
  left:3px;
  transition: transform .15s ease;
}

.as-toggle input:checked + .as-toggle-ui{
  background:#df087e; /* brand pink */
}

.as-toggle input:checked + .as-toggle-ui::after{
  transform: translateX(20px);
}

.as-toggle-text{
  opacity:.9;
}

/* Remove Followers tab from PeepSo profile header */
.ps-focus__menu-item[aria-label="Followers"]{
  display:none !important;
}

/* =========================================================
   AS — Elevate "Connections" primary action on PeepSo profile
   ========================================================= */

/* Make the "Add Friend / Connect" button feel primary */
.ps-focus__cover-action.ps-js-friend-add,
.ps-focus__cover-action.ps-js-friend-request,
.ps-focus__cover-action.ps-js-friend-accept {
  background: #df087e !important;     /* brand pink */
  border-color: #df087e !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(223,8,126,.35) !important;
}

/* Hover */
.ps-focus__cover-action.ps-js-friend-add:hover,
.ps-focus__cover-action.ps-js-friend-request:hover,
.ps-focus__cover-action.ps-js-friend-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(223,8,126,.45) !important;
}

/* De-emphasize Follow/Following button */
.ps-focus__cover-action.ps-js-friend-follow,
.ps-focus__cover-action.ps-js-friend-unfollow {
  opacity: .55;
  filter: saturate(.6);
}

/* OPTIONAL: Hide Followers tab in the profile menu (UI-only) */
.ps-focus__menu a[href*="/followers"]{
  display: none !important;
}

/*  ===================
	'Close' Button
	===================
/* Only style the CLOSE button that is inside standalone profile page */
body:not(.as-in-modal) .as-profile-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: #df087e;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(223,8,126,.45);
  z-index: 99999;
}

body:not(.as-in-modal) .as-profile-close:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(223,8,126,.55);
}
	
/*	===================================
	DISABLE VIDEO ICON FOR GOLD MEMBERS
	=================================== 
.as-disabled-video {
  filter: grayscale(100%);
}
.as-disabled-video:hover {
  opacity: 0.35 !important;
}  */

.as-video-disabled {
  filter: grayscale(100%);
}
.as-video-disabled:hover {
  opacity: 0.35 !important;
}
/*	=======================================
	END DISABLE VIDEO ICON FOR GOLD MEMBERS
	======================================= */
	
/*	=======================================
	GREY OUT VIDEO ICON FOR GOLD MEMBERS
	======================================= */	
/* AS: override BetterMessages video icon color (nuclear option) */
.bp-messages-wrap .video-call.as-video-locked,
.bp-messages-wrap .video-call.as-video-locked svg,
.bp-messages-wrap .video-call.as-video-locked svg path,
.bp-messages-wrap .video-call.as-video-locked svg * {
  color: rgba(255,255,255,.55) !important;
  fill: rgba(255,255,255,.55) !important;
  stroke: rgba(255,255,255,.55) !important;
}

/* Optional: make it obvious it's disabled */
.bp-messages-wrap .video-call.as-video-locked {
  opacity: 0.45 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
}
/* AS: force locked video-call icon to NOT be blue */
.bp-messages-wrap .video-call[data-as-locked-video="1"],
.bp-messages-wrap .video-call[data-as-locked-video="1"] svg {
  color: rgba(255,255,255,.55) !important;
}
.bp-messages-wrap .video-call[data-as-locked-video="1"] svg,
.bp-messages-wrap .video-call[data-as-locked-video="1"] svg * {
  fill: rgba(255,255,255,.55) !important;
  stroke: rgba(255,255,255,.55) !important;
}

/* ==========================================================
   AS — Video Call Gating Visual Lock (overrides BM styles)
   ========================================================== */

.video-call[data-as-locked-video="1"],
.video-call[data-as-locked-video="1"] svg,
.video-call[data-as-locked-video="1"] path {
    color: rgba(255,255,255,.55) !important;
    fill: rgba(255,255,255,.55) !important;
    stroke: rgba(255,255,255,.55) !important;
}

/* Cursor + UX hint */
.video-call[data-as-locked-video="1"] {
    cursor: not-allowed !important;
    opacity: 0.45;
    filter: grayscale(1);
}
/* AS — force BM icon color by overriding BM's CSS variable */
.video-call[data-as-locked-video="1"]{
  --main-bm-color: 255,255,255 !important; /* white-ish */
  opacity: .45 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
}
/* ==========================================================
   AS — Locked Video Call Icon (FINAL OVERRIDE)
   Requires: data-as-locked-video="1" on .video-call
   ========================================================== */

.bp-messages-wrap .video-call[data-as-locked-video="1"]{
  /* win the color war */
  color: rgba(255,255,255,.55) !important;

  /* also cripple BM variable-driven colors (covers most themes) */
  --main-bm-color: 255,255,255 !important;
  --bm-main-color: 255,255,255 !important;
  --bpbm-main-color: 255,255,255 !important;

  opacity: .45 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
}

.bp-messages-wrap .video-call[data-as-locked-video="1"] svg,
.bp-messages-wrap .video-call[data-as-locked-video="1"] svg *{
  color: rgba(255,255,255,.55) !important;
  fill: rgba(255,255,255,.55) !important;
  stroke: rgba(255,255,255,.55) !important;
}