/* Vchat 0.57.9-alpha — Contacts right preview action header precision polish.
   CSS only: no IDs, listeners, navigation or click behavior changed. */

#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview{
  overflow:hidden!important;
  border-radius:20px!important;
}

/* The action strip is the visual header of the right-side Contact 360 card. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions.vchat-contact-preview-actions-compact{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-height:64px!important;
  margin:0!important;
  padding:12px 16px!important;
  border:0!important;
  border-bottom:1px solid #ece8f4!important;
  background:#ffffff!important;
  box-shadow:none!important;
}

/* Every control gets the same box geometry and optical center. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > button,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > a{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 40px!important;
  box-sizing:border-box!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #ded8ef!important;
  border-radius:13px!important;
  background:#ffffff!important;
  background-image:none!important;
  color:#6554b8!important;
  box-shadow:0 2px 8px rgba(45,36,85,.035)!important;
  font-family:inherit!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:800!important;
  text-decoration:none!important;
  text-shadow:none!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  transform:none!important;
  opacity:1!important;
  outline:none!important;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease!important;
}

/* 360 keeps the same height but is a compact labeled pill. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > .is-primary{
  flex-basis:58px!important;
  width:58px!important;
  min-width:58px!important;
  padding:0 10px!important;
  border-color:#6554b8!important;
  background:#6554b8!important;
  color:#ffffff!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}

/* Normalize glyphs/emojis so their own metrics cannot move the button. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > button > span,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > a > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
  padding:0!important;
  line-height:20px!important;
  font-size:16px!important;
  font-style:normal!important;
  font-weight:800!important;
  vertical-align:middle!important;
  transform:none!important;
  pointer-events:none!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > .is-primary > span{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  line-height:1!important;
  font-size:12px!important;
}

/* Destructive action stays visually distinct but balanced. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > .is-danger{
  border-color:#efcbd5!important;
  background:#fffafb!important;
  color:#bf4664!important;
}

/* Professional, restrained interaction states. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > button:hover,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > a:hover{
  border-color:#c9bfe7!important;
  background:#f7f4ff!important;
  color:#5542ad!important;
  box-shadow:0 7px 18px rgba(72,54,137,.09)!important;
  transform:translateY(-1px)!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > .is-primary:hover{
  border-color:#5947ad!important;
  background:#5947ad!important;
  color:#ffffff!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > .is-danger:hover{
  border-color:#df9eb0!important;
  background:#fff2f5!important;
  color:#ad3655!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > button:focus-visible,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > a:focus-visible{
  border-color:#8d78d6!important;
  box-shadow:0 0 0 3px rgba(101,84,184,.14)!important;
}
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > button:active,
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > a:active{
  transform:translateY(0)!important;
  box-shadow:0 2px 7px rgba(72,54,137,.06)!important;
}

/* Prevent the content below from feeling glued to the toolbar. */
#vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions + section{
  padding-top:20px!important;
}

@media (max-width:760px){
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions,
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions.vchat-contact-preview-actions-compact{
    min-height:60px!important;
    padding:10px 12px!important;
    gap:8px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > button,
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > a{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    flex-basis:38px!important;
  }
  #vchat-frontend-app.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions > .is-primary{
    width:56px!important;
    min-width:56px!important;
    flex-basis:56px!important;
  }
}