/* Vchat 0.57.5-alpha — composer icon optical centering + saved replies modal polish
   CSS-only: does not alter DOM IDs, listeners, click handlers, API calls or button state. */

/* --------------------------------------------------------------------------
   Composer: exact optical center for emoji icon.
   -------------------------------------------------------------------------- */
#vchat-frontend-app.vchat-frontend-app #vchat-emoji{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  margin:0!important;
  line-height:0!important;
  font-size:0!important;
  text-align:center!important;
  vertical-align:middle!important;
  box-sizing:border-box!important;
  pointer-events:auto!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-emoji::before{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  margin:0!important;
  padding:0!important;
  transform:translate(-50%,-50%)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236752cc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='9' cy='9.5' r='.8' fill='%236752cc' stroke='none'/%3E%3Ccircle cx='15' cy='9.5' r='.8' fill='%236752cc' stroke='none'/%3E%3Cpath d='M8.4 14.1c.9 1.45 2.08 2.15 3.6 2.15s2.7-.7 3.6-2.15'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:18px 18px!important;
  border:0!important;
  border-radius:0!important;
  pointer-events:none!important;
  box-sizing:border-box!important;
}

/* Keep the two icon-only controls mechanically identical. */
#vchat-frontend-app.vchat-frontend-app #vchat-record-audio,
#vchat-frontend-app.vchat-frontend-app #vchat-emoji{
  flex:0 0 36px!important;
  align-self:center!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-record-audio svg{
  width:18px!important;
  height:18px!important;
  display:block!important;
  margin:auto!important;
  transform:none!important;
  pointer-events:none!important;
}

/* --------------------------------------------------------------------------
   Saved replies modal — scoped only when the generic modal contains the list.
   -------------------------------------------------------------------------- */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-dialog{
  width:min(560px,calc(100vw - 40px))!important;
  max-width:560px!important;
  max-height:min(78dvh,720px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid #e4def2!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(30,24,62,.22)!important;
  pointer-events:auto!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-head{
  flex:0 0 auto!important;
  min-height:70px!important;
  padding:18px 20px!important;
  gap:16px!important;
  background:#fff!important;
  border-bottom:1px solid #eee9f7!important;
  box-sizing:border-box!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:850!important;
  letter-spacing:-.25px!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-head [data-vchat-modal-close]{
  flex:0 0 36px!important;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:#f4f1fb!important;
  color:#6752cc!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:600!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}

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

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-head [data-vchat-modal-close]:active{
  transform:scale(.96)!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  padding:18px 20px 20px!important;
  background:#fff!important;
  box-sizing:border-box!important;
  pointer-events:auto!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:104px!important;
  margin:0!important;
  padding:15px 16px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  text-align:left!important;
  border:1px solid #e3def0!important;
  border-radius:16px!important;
  background:#fff!important;
  color:#211d3d!important;
  box-shadow:none!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list > button:hover{
  border-color:#cfc4ed!important;
  background:#fbfaff!important;
  box-shadow:0 9px 24px rgba(78,61,145,.08)!important;
  transform:translateY(-1px)!important;
}

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

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list strong{
  display:block!important;
  margin:0!important;
  overflow:hidden!important;
  color:#d64266!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:850!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-saved-reply-list small{
  display:block!important;
  margin:5px 0 0!important;
  color:#7c70ac!important;
  font-size:10px!important;
  line-height:1.3!important;
  font-weight:700!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 p{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  margin:10px 0 0!important;
  max-width:100%!important;
  overflow:hidden!important;
  color:#6f697e!important;
  font-size:11.5px!important;
  line-height:1.55!important;
  overflow-wrap:anywhere!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-secondary-action{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:142px!important;
  min-height:40px!important;
  margin:14px 0 0!important;
  padding:0 15px!important;
  border:1px solid #d8cff0!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#5f49bd!important;
  box-shadow:none!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}

#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(.vchat-saved-reply-list) .vchat-secondary-action:hover{
  background:#f7f4fd!important;
  border-color:#cbbfec!important;
  box-shadow:0 6px 18px rgba(75,57,139,.08)!important;
}

/* Empty saved-reply state uses the same polished modal shell. */
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(#vchat-create-reply) .vchat-empty-state,
#vchat-frontend-app.vchat-frontend-app #vchat-modal:has(#vchat-hotfix-create-reply) .vchat-empty-state{
  width:100%!important;
  padding:30px 22px!important;
  margin:0!important;
  border:1px dashed #d7cfee!important;
  border-radius:16px!important;
  background:#fbfaff!important;
  text-align:center!important;
  box-sizing:border-box!important;
}

/* No decorative child may swallow the actual click target. */
#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;
}

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