/* Vchat 0.57.6-alpha — Saved Replies premium visual correction
   CSS-only. No IDs, DOM, listeners, API calls or button behavior are changed. */

/* Modal shell: cleaner proportion and depth. */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-dialog{
  width:min(600px,calc(100vw - 40px))!important;
  max-width:600px!important;
  border:1px solid #e5e0f1!important;
  border-radius:22px!important;
  background:#ffffff!important;
  box-shadow:0 28px 80px rgba(31,25,60,.20)!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-head{
  min-height:68px!important;
  padding:18px 22px!important;
  border-bottom:1px solid #eeeaf6!important;
  background:#ffffff!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) #vchat-modal-title{
  color:#211d3d!important;
  font-size:20px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:-.25px!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-body{
  padding:18px 22px 22px!important;
  background:#ffffff!important;
}

/* Saved reply cards: neutral by default, brand-accented on hover. */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list{
  gap:12px!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button{
  position:relative!important;
  width:100%!important;
  min-height:112px!important;
  padding:16px 18px!important;
  border:1px solid #e4dff0!important;
  border-radius:16px!important;
  background:#ffffff!important;
  color:#211d3d!important;
  box-shadow:0 1px 0 rgba(33,29,61,.02)!important;
  text-align:left!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  overflow:hidden!important;
  transform:none!important;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease!important;
}

/* Remove any legacy pink/red accent inherited from earlier releases. */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button strong{
  display:block!important;
  margin:0!important;
  color:#2a2544!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:800!important;
  letter-spacing:-.05px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  transition:color .16s ease!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button small{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:100%!important;
  min-height:24px!important;
  margin:7px 0 0!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:#f3f0fb!important;
  color:#6752cc!important;
  font-size:10px!important;
  line-height:24px!important;
  font-weight:750!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button p{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  margin:10px 0 0!important;
  color:#716b80!important;
  font-size:12px!important;
  line-height:1.5!important;
  font-weight:450!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
}

/* Premium, obvious hover state. */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button:hover{
  border-color:#bdb0e8!important;
  background:#faf8ff!important;
  box-shadow:0 10px 26px rgba(88,68,167,.10)!important;
  transform:translateY(-2px)!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button:hover strong{
  color:#6752cc!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button:active{
  transform:translateY(0)!important;
  box-shadow:0 4px 12px rgba(88,68,167,.07)!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button:focus-visible{
  outline:3px solid rgba(103,82,204,.18)!important;
  outline-offset:2px!important;
  border-color:#a995e4!important;
}

/* Create button: consistent brand secondary action. */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-secondary-action,
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) #vchat-create-reply,
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) #vchat-hotfix-create-reply{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  margin-top:16px!important;
  padding:0 15px!important;
  border:1px solid #d5ccee!important;
  border-radius:12px!important;
  background:#ffffff!important;
  color:#5f49bd!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:800!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-secondary-action:hover,
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) #vchat-create-reply:hover,
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) #vchat-hotfix-create-reply:hover{
  background:#f5f1fd!important;
  border-color:#bfaee8!important;
  box-shadow:0 7px 18px rgba(88,68,167,.09)!important;
  transform:translateY(-1px)!important;
}

/* Close button: same brand language and reliable click target. */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-head [data-vchat-modal-close]{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  background:#f4f1fb!important;
  color:#6752cc!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-head [data-vchat-modal-close]:hover{
  background:#ebe5fa!important;
  border-color:#d9cff3!important;
}

/* Decorative content can never steal the click from its button. */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) button > *{
  pointer-events:none!important;
}
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) button{
  pointer-events:auto!important;
}

/* Preserve the corrected optical center of the emoji button. */
#vchat-frontend-app.vchat-frontend-app #vchat-emoji{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:0!important;
}
#vchat-frontend-app.vchat-frontend-app #vchat-emoji::before{
  left:50%!important;
  top:50%!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
}

@media (max-width:680px){
  #vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-dialog{
    width:100%!important;
    max-width:none!important;
    border-radius:22px 22px 0 0!important;
  }
  #vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-head{
    padding:16px!important;
  }
  #vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-body{
    padding:14px 16px calc(18px + env(safe-area-inset-bottom))!important;
  }
}