/*
 * VELVET ROOM - CHANNEL COMPOSER BLACK / STRETCH R5B
 *
 * APPROVED UI:
 * - composer strip is solid black
 * - remove visible Open Clips/camera quick action
 * - stretch inline composer into recovered width
 * - retain avatar on left
 * - retain Create Post pen action on right
 *
 * R5B corrects only the failed R5 installer validation.
 * The approved visual contract is unchanged.
 */

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


/* =========================================================
   FINAL BLACK COMPOSER STRIP AUTHORITY
   ========================================================= */

#vrChannelSocialComposer{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) 42px !important;
  align-items:center !important;
  gap:10px !important;

  width:100% !important;
  margin:0 !important;
  padding:14px 18px !important;

  background:#050507 !important;
  background-color:#050507 !important;
  background-image:none !important;
  background-attachment:initial !important;
  background-position:initial !important;
  background-size:initial !important;

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

  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  isolation:isolate !important;
}


#vrChannelSocialComposer::before,
#vrChannelSocialComposer::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
}


#vrChannelSocialComposer > *{
  background-image:none !important;
}


/* =========================================================
   AVATAR
   ========================================================= */

#vrChannelSocialComposer .vrSocialComposerAvatar{
  grid-column:1 !important;

  width:44px !important;
  height:44px !important;

  margin:0 !important;
  align-self:center !important;
  justify-self:start !important;
}


/* =========================================================
   STRETCHED INLINE COMPOSER
   ========================================================= */

#vrChannelSocialComposer .vrSocialComposerPrompt{
  grid-column:2 !important;

  width:100% !important;
  min-width:0 !important;
  max-width:none !important;

  min-height:44px !important;
  margin:0 !important;
  padding:0 16px !important;

  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:24px !important;

  background:rgba(255,255,255,.018) !important;
  background-image:none !important;

  color:rgba(255,255,255,.72) !important;
  text-align:left !important;
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

#vrChannelSocialComposer .vrSocialComposerQuick{
  grid-column:3 !important;

  width:42px !important;
  min-width:42px !important;

  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;

  gap:0 !important;
  margin:0 !important;

  background:transparent !important;
  background-image:none !important;
}


/* Remove visible Open Clips / camera-style action. */
#vrChannelSocialComposer .vrSocialComposerQuick a[aria-label="Open Clips"],
#vrChannelSocialComposer .vrSocialComposerQuick a[title="Clips"],
#vrChannelSocialComposer .vrSocialComposerQuick a:nth-child(2){
  display:none !important;
}


/* Retain Create Post pen action. */
#vrChannelSocialComposer .vrSocialComposerQuick a[aria-label="Create post"],
#vrChannelSocialComposer .vrSocialComposerQuick a[title="Create post"],
#vrChannelSocialComposer .vrSocialComposerQuick a:first-child{
  display:grid !important;

  width:42px !important;
  height:42px !important;

  place-items:center !important;
  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:10px !important;

  background:transparent !important;
  background-image:none !important;

  text-decoration:none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:430px){

  #vrChannelSocialComposer{
    grid-template-columns:40px minmax(0,1fr) 40px !important;
    gap:9px !important;

    padding:13px 14px !important;
  }

  #vrChannelSocialComposer .vrSocialComposerAvatar{
    width:40px !important;
    height:40px !important;
  }

  #vrChannelSocialComposer .vrSocialComposerPrompt{
    min-height:42px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  #vrChannelSocialComposer .vrSocialComposerQuick{
    width:40px !important;
    min-width:40px !important;
  }

  #vrChannelSocialComposer .vrSocialComposerQuick a[aria-label="Create post"],
  #vrChannelSocialComposer .vrSocialComposerQuick a[title="Create post"],
  #vrChannelSocialComposer .vrSocialComposerQuick a:first-child{
    width:40px !important;
    height:40px !important;
  }
}


/*
 * Persona modes may tint accents only.
 * They may not wallpaper the composer strip.
 */