/*
 * VELVET ROOM - CHANNEL ACTION BLACK / OPEN ROOM RIGHT R4
 *
 * APPROVED VISUAL CHANGES:
 *
 * 1. Extend the black Channel action surface through:
 *    - Posts / Media / Library / About nav
 *    - owner composer row
 *
 * 2. Rebalance Open Room:
 *    - copy and Coming Soon stay on the left
 *    - TV icon moves to the right
 *
 * R3 remains the authority for the black identity/Open Room/owner-management region.
 * R4 extends and balances that authority.
 */

:root{
  --vr-middle-black:#050507;
  --vr-middle-line:rgba(255,255,255,.085);
}


/* =========================================================
   EXTEND BLACK ACTION SURFACE THROUGH CONTENT NAV + COMPOSER
   ========================================================= */

body.vr-surface-channel .vrSocialContentNav,
body[data-vr-unified-surface="channel"] .vrSocialContentNav,
body.vr-surface-channel #vrSocialContentNav,
body[data-vr-unified-surface="channel"] #vrSocialContentNav{
  background:#050507 !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;

  border-top:1px solid var(--vr-middle-line) !important;
  border-bottom:1px solid var(--vr-middle-line) !important;
}


/* =========================================================
   OPEN ROOM BALANCE - ICON RIGHT
   ========================================================= */

#vrOpenRoomComingSoon .vrOpenRoomEntry{
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "copy icon"
    "badge icon" !important;

  column-gap:18px !important;
  row-gap:10px !important;

  align-items:center !important;
}


#vrOpenRoomComingSoon .vrOpenRoomCopy{
  grid-area:copy !important;
  align-self:end !important;
}


#vrOpenRoomComingSoon .vrOpenRoomBadge{
  grid-area:badge !important;
  justify-self:start !important;
  align-self:start !important;
  margin:0 !important;
}


#vrOpenRoomComingSoon .vrOpenRoomIcon{
  grid-area:icon !important;
  justify-self:end !important;
  align-self:center !important;

  width:58px !important;
  height:58px !important;

  margin:0 !important;
}


/* Tablet / wider Channel: give the icon a little breathing room. */
@media(min-width:600px){

  #vrOpenRoomComingSoon .vrOpenRoomEntry{
    padding-left:28px !important;
    padding-right:28px !important;
  }

  #vrOpenRoomComingSoon .vrOpenRoomIcon{
    width:64px !important;
    height:64px !important;
  }
}


/*
 * Mobile remains two-column:
 * text left / icon right.
 * Do NOT drop the icon below the text.
 */
@media(max-width:430px){

  #vrOpenRoomComingSoon .vrOpenRoomEntry{
    grid-template-columns:minmax(0,1fr) 54px !important;
    grid-template-areas:
      "copy icon"
      "badge icon" !important;

    padding:18px 18px !important;
    column-gap:14px !important;
    row-gap:10px !important;
  }

  #vrOpenRoomComingSoon .vrOpenRoomIcon{
    width:54px !important;
    height:54px !important;
    border-radius:16px !important;
  }

  #vrOpenRoomComingSoon .vrOpenRoomBadge{
    grid-column:auto !important;
  }
}


/* =========================================================
   COLOR DOCTRINE
   ========================================================= */

/*
 * Social / Friends / Work may tint:
 * - active tab underline
 * - icon/badge border
 * - small accent text
 *
 * They may NOT wallpaper:
 * - content nav
 * - composer
 * - middle action region
 */