/* TALKCHAT_R19C12R9R15R2_RIGHT_DRAWER_FULLHEIGHT_FIX
   Desktop feature drawers use the exact right-column footprint:
   - current desktop topbar is 44px (r11)
   - legacy feature popup still starts at 56px
   That 12px mismatch exposed the underlying right-panel content and made the
   drawer look shorter than the column. This patch aligns non-modal feature
   drawers with the full desktop right column.
*/

@media (min-width:768px){

  /* Full replacement drawer for account/preferences/room-management/password.
     Gift and report are intentionally excluded because they are modal flows. */
  #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup){
    position:fixed!important;
    left:auto!important;
    right:0!important;
    top:44px!important;
    bottom:0!important;

    width:360px!important;
    min-width:360px!important;
    max-width:360px!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    display:flex!important;
    flex-direction:column!important;

    margin:0!important;
    padding:0!important;

    background:#ffffff!important;
    color:#172033!important;

    border:0!important;
    border-left:1px solid #dfe6ee!important;
    border-radius:0!important;

    box-shadow:-10px 0 26px rgba(15,23,42,.08)!important;

    overflow:hidden!important;
    z-index:9905!important;
    opacity:1!important;
  }

  #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) > header{
    flex:0 0 52px!important;
    min-height:52px!important;
    height:52px!important;

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

    padding:0 14px!important;
    margin:0!important;

    background:#ffffff!important;
    color:#172033!important;

    border:0!important;
    border-bottom:1px solid #e5ebf1!important;

    box-sizing:border-box!important;
    z-index:5!important;
  }

  #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) > header strong{
    color:#172033!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:800!important;
    opacity:1!important;
  }

  #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) > header button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    display:grid!important;
    place-items:center!important;

    padding:0!important;
    margin:0!important;

    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:#64748b!important;
    cursor:pointer!important;
  }

  #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) > header button:hover{
    background:#f1f5f9!important;
    color:#334155!important;
  }

  /* Each existing feature host now owns the remaining drawer height and
     scrolls internally. No underlying People/Rooms text can bleed through. */
  #featureLayer .profile-settings-popup #profilePreferences,
  #featureLayer .room-settings-popup #roomSettingsHost,
  #featureLayer .room-management-popup #roomManagementHost,
  #featureLayer .profile-popup #passwordEditor,
  #featureLayer .profile-popup #accountPanel{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    background:#ffffff!important;
    color:#172033!important;
  }

  #featureLayer .profile-settings-popup #profilePreferences{
    flex:1 1 auto!important;
    height:auto!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;
  }

  #featureLayer .profile-settings-popup .profile-settings-tabs{
    position:sticky!important;
    top:0!important;
    z-index:4!important;
    flex:0 0 auto!important;
    background:#ffffff!important;
    border-bottom:1px solid #e5ebf1!important;
  }

  #featureLayer .profile-settings-popup .profile-settings-list{
    box-sizing:border-box!important;
    width:100%!important;
    min-height:0!important;
    padding-bottom:18px!important;
  }

  #featureLayer .room-settings-popup #roomSettingsHost,
  #featureLayer .room-management-popup #roomManagementHost,
  #featureLayer .profile-popup #passwordEditor{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  /* Account editor can have an avatar block before #accountPanel. Keep the
     whole drawer opaque and let its actual form area scroll. */
  #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) #accountPanel{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) .msref-profile-edit-avatar{
    flex:0 0 auto!important;
    background:#ffffff!important;
  }
}

/* Explicit dark-mode surface so the underlying right column can never show
   through because of transparency or inherited backgrounds. */
@media (min-width:768px){
  html[data-theme="dark"] #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup){
    background:#151f2b!important;
    color:#e8eef5!important;
    border-left-color:#2b3745!important;
    box-shadow:-10px 0 28px rgba(0,0,0,.28)!important;
  }

  html[data-theme="dark"] #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) > header{
    background:#151f2b!important;
    color:#e8eef5!important;
    border-bottom-color:#2b3745!important;
  }

  html[data-theme="dark"] #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) > header strong{
    color:#eef3f8!important;
  }

  html[data-theme="dark"] #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) > header button{
    color:#9ba9b9!important;
  }

  html[data-theme="dark"] #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) > header button:hover{
    background:#22303e!important;
    color:#dbe6f1!important;
  }

  html[data-theme="dark"] #featureLayer .profile-settings-popup #profilePreferences,
  html[data-theme="dark"] #featureLayer .room-settings-popup #roomSettingsHost,
  html[data-theme="dark"] #featureLayer .room-management-popup #roomManagementHost,
  html[data-theme="dark"] #featureLayer .profile-popup #passwordEditor,
  html[data-theme="dark"] #featureLayer .profile-popup #accountPanel,
  html[data-theme="dark"] #featureLayer > .social-popup.profile-popup:not(.profile-gift-popup):not(.profile-report-popup) .msref-profile-edit-avatar{
    background:#151f2b!important;
    color:#e8eef5!important;
  }

  html[data-theme="dark"] #featureLayer .profile-settings-popup .profile-settings-tabs{
    background:#151f2b!important;
    border-bottom-color:#2b3745!important;
  }
}

/* Mobile remains exactly on the existing full-screen feature behavior. */