/* 0.54.2-alpha — Contacto 360: interaction-safe, isolated responsive layout */

/*
 * Keep this release intentionally scoped to the Contacto 360 modal.
 * :has() is only used on modal ancestors so no other Vchat modal inherits
 * the wider/scrolling layout. Descendant rules remain fully namespaced.
 */
.vchat-frontend-app #vchat-modal.is-wide .vchat-modal-dialog:has(> .vchat-modal-body > .vchat-contact-360){
  width:min(1020px,calc(100vw - 48px))!important;
  max-width:1020px!important;
  max-height:min(90dvh,900px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:#fff!important;
}
.vchat-frontend-app #vchat-modal.is-wide .vchat-modal-dialog:has(> .vchat-modal-body > .vchat-contact-360) > .vchat-modal-head{
  flex:0 0 auto!important;
  min-height:66px!important;
  padding:16px 20px!important;
  background:#fff!important;
  border-bottom:1px solid #ebe8f2!important;
}
.vchat-frontend-app #vchat-modal.is-wide .vchat-modal-dialog:has(> .vchat-modal-body > .vchat-contact-360) > .vchat-modal-head strong{
  color:#292540!important;
  font-size:20px!important;
  line-height:1.2!important;
  letter-spacing:-.35px!important;
}
.vchat-frontend-app #vchat-modal.is-wide #vchat-modal-body:has(> .vchat-contact-360){
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:18px 20px 0!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain!important;
  background:#fff!important;
}

.vchat-frontend-app #vchat-modal .vchat-contact-360{
  display:grid!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  color:#292540!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360,
.vchat-frontend-app #vchat-modal .vchat-contact-360 *{
  box-sizing:border-box!important;
}

/* Header / identity */
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero{
  display:grid!important;
  grid-template-columns:76px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;
  min-width:0!important;
  min-height:136px!important;
  padding:20px 24px!important;
  border:0!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#211e3b 0%,#55469d 100%)!important;
  box-shadow:0 14px 34px rgba(40,31,86,.13)!important;
  overflow:hidden!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero > span{
  width:76px!important;
  height:76px!important;
  min-width:76px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
  font-size:23px!important;
  font-weight:900!important;
  overflow:hidden!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero > span img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero > div{
  min-width:0!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero small{
  display:block!important;
  margin:0!important;
  color:#dcd7f4!important;
  font-size:10px!important;
  line-height:1.3!important;
  font-weight:850!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero h2{
  margin:5px 0 0!important;
  color:#fff!important;
  font-size:27px!important;
  line-height:1.05!important;
  letter-spacing:-.65px!important;
  overflow-wrap:anywhere!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero p{
  margin:7px 0 0!important;
  color:#dedaf1!important;
  font-size:11px!important;
  line-height:1.45!important;
  overflow-wrap:anywhere!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-category-chips{
  margin-top:8px!important;
  gap:5px!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-category-chips i{
  padding:5px 8px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  font-size:8.5px!important;
  line-height:1!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero-edit{
  appearance:none!important;
  -webkit-appearance:none!important;
  align-self:center!important;
  min-width:142px!important;
  min-height:42px!important;
  padding:0 16px!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#58479f!important;
  box-shadow:0 8px 20px rgba(24,18,55,.12)!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:850!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero-edit:hover{
  transform:translateY(-1px)!important;
}

/* KPI row */
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  min-width:0!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats article{
  display:grid!important;
  align-content:start!important;
  min-width:0!important;
  min-height:88px!important;
  padding:13px 15px!important;
  border:1px solid #e2dfec!important;
  border-radius:15px!important;
  background:#faf9fd!important;
  box-shadow:none!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats small{
  color:#8a859a!important;
  font-size:9.5px!important;
  line-height:1.3!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats strong{
  display:block!important;
  margin:7px 0 4px!important;
  color:#292540!important;
  font-size:21px!important;
  line-height:1!important;
  letter-spacing:-.45px!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats span{
  color:#9a95a6!important;
  font-size:8.5px!important;
  line-height:1.3!important;
}

/* Two-column information area */
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start!important;
  gap:12px!important;
  min-width:0!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card{
  min-width:0!important;
  padding:16px!important;
  border:1px solid #e2dfec!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(43,35,76,.025)!important;
  overflow:hidden!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card > header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:32px!important;
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card > header strong{
  color:#373249!important;
  font-size:11.5px!important;
  line-height:1.3!important;
  font-weight:850!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card > header button{
  min-height:31px!important;
  padding:0 10px!important;
  border:1px solid #ddd8ec!important;
  border-radius:10px!important;
  background:#f7f5fc!important;
  color:#5b4aa4!important;
  font-size:9px!important;
  font-weight:850!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card dl{
  margin:0!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card dl > div{
  display:grid!important;
  grid-template-columns:minmax(78px,.38fr) minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  min-height:34px!important;
  padding:8px 0!important;
  border-top:1px solid #efedf4!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card dl > div:first-child{
  border-top:0!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card dt,
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card dd{
  margin:0!important;
  min-width:0!important;
  font-size:9.5px!important;
  line-height:1.45!important;
  overflow-wrap:anywhere!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card dt{
  color:#918c9f!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card dd{
  color:#383349!important;
  text-align:right!important;
  font-weight:750!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card > p{
  margin:10px 0 0!important;
  padding:10px 0 0!important;
  border-top:1px solid #efedf4!important;
  color:#8c8799!important;
  font-size:9.5px!important;
  line-height:1.5!important;
}

/* Conversation, pipeline, catalog and task rows */
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list{
  display:grid!important;
  gap:7px!important;
  min-width:0!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list button,
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list article{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 11px!important;
  border:1px solid #ece9f2!important;
  border-radius:12px!important;
  background:#faf9fd!important;
  color:#332e46!important;
  text-align:left!important;
  pointer-events:auto!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list button{
  cursor:pointer!important;
  touch-action:manipulation!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list button:hover{
  border-color:#d6cff0!important;
  background:#f5f2ff!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list b{
  color:#373249!important;
  font-size:9.5px!important;
  line-height:1.35!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list small{
  margin-top:3px!important;
  color:#8d879a!important;
  font-size:8.5px!important;
  line-height:1.35!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list em,
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-list > article > strong{
  color:#6f697d!important;
  font-size:8.5px!important;
  line-height:1!important;
  font-style:normal!important;
  white-space:nowrap!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-catalog-list article{
  grid-template-columns:10px minmax(0,1fr) auto!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-empty{
  padding:18px!important;
  border:1px dashed #ddd9e8!important;
  border-radius:12px!important;
  color:#918c9f!important;
  background:#fcfbfd!important;
  font-size:9.5px!important;
  line-height:1.45!important;
}

/* Persistent action bar: stays accessible while the profile body scrolls. */
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-actions{
  position:sticky!important;
  z-index:20!important;
  bottom:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:9px!important;
  margin:2px -20px 0!important;
  padding:14px 20px 16px!important;
  border-top:1px solid #e8e5ef!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 -12px 28px rgba(38,31,67,.055)!important;
  backdrop-filter:blur(12px)!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-action-spacer{
  display:block!important;
  flex:1 1 auto!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-actions button{
  position:relative!important;
  z-index:22!important;
  min-height:40px!important;
  padding:0 14px!important;
  border:1px solid #ddd8eb!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#5b49a3!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-actions button.primary{
  border-color:#6552c4!important;
  background:#6552c4!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(86,68,176,.16)!important;
}
.vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-actions button.danger-outline{
  margin-right:0!important;
  border-color:#efc9d2!important;
  background:#fff8fa!important;
  color:#b33a54!important;
}

/* Laptop / tablet */
@media(max-width:900px){
  .vchat-frontend-app #vchat-modal.is-wide .vchat-modal-dialog:has(> .vchat-modal-body > .vchat-contact-360){
    width:min(96vw,820px)!important;
    max-height:92dvh!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero{
    grid-template-columns:68px minmax(0,1fr) auto!important;
    padding:18px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero > span{
    width:68px!important;
    height:68px!important;
    min-width:68px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero h2{
    font-size:24px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-grid{
    grid-template-columns:1fr!important;
  }
}

/* Mobile bottom sheet */
@media(max-width:560px){
  .vchat-frontend-app #vchat-modal.is-wide{
    align-items:end!important;
    padding:0!important;
  }
  .vchat-frontend-app #vchat-modal.is-wide .vchat-modal-dialog:has(> .vchat-modal-body > .vchat-contact-360){
    width:100%!important;
    max-width:none!important;
    max-height:94dvh!important;
    border-radius:24px 24px 0 0!important;
    border-bottom:0!important;
  }
  .vchat-frontend-app #vchat-modal.is-wide .vchat-modal-dialog:has(> .vchat-modal-body > .vchat-contact-360) > .vchat-modal-head{
    min-height:58px!important;
    padding:13px 15px!important;
  }
  .vchat-frontend-app #vchat-modal.is-wide .vchat-modal-dialog:has(> .vchat-modal-body > .vchat-contact-360) > .vchat-modal-head strong{
    font-size:16px!important;
  }
  .vchat-frontend-app #vchat-modal.is-wide #vchat-modal-body:has(> .vchat-contact-360){
    padding:13px 13px 0!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360{
    gap:10px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero{
    grid-template-columns:56px minmax(0,1fr)!important;
    gap:12px!important;
    min-height:0!important;
    padding:15px!important;
    border-radius:17px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero > span{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    border-radius:17px!important;
    font-size:18px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero h2{
    font-size:20px!important;
    letter-spacing:-.35px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero p{
    font-size:9.5px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-hero-edit{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats article{
    min-height:80px!important;
    padding:11px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-stats strong{
    font-size:18px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-card{
    padding:13px!important;
    border-radius:15px!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin:2px -13px 0!important;
    padding:11px 13px max(12px,env(safe-area-inset-bottom))!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-action-spacer{
    display:none!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:0 9px!important;
    font-size:9.5px!important;
    white-space:normal!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-actions button.primary{
    grid-column:1 / -1!important;
  }
  .vchat-frontend-app #vchat-modal .vchat-contact-360 .vchat-profile-actions button.danger-outline{
    grid-column:1 / -1!important;
    order:10!important;
  }
}