/* 0.54.1-alpha — Contacts isolated responsive action polish */

/* Scope all fixes to Contacts only so Inbox/Agenda CSS is not affected. */
.vchat-frontend-app [data-vchat-panel="contacts"]{
  --contacts-action-border:#ded7f0;
  --contacts-action-purple:#6250bb;
  --contacts-danger:#bd3d5e;
}

/* Main list: flexible columns that do not push the action buttons out of the card. */
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-item{
  display:grid!important;
  grid-template-columns:minmax(210px,1.15fr) minmax(210px,.95fr) minmax(92px,.42fr) minmax(118px,auto)!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-item > *{
  min-width:0!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-primary,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-primary > div,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-categories{
  min-width:0!important;
  overflow:hidden!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-primary strong,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-primary small{
  display:block!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context span{
  min-width:0!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context small,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context b{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-actions{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-width:118px!important;
  max-width:126px!important;
  width:126px!important;
  flex:0 0 auto!important;
  justify-self:end!important;
  overflow:visible!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-icon-action{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:1px solid var(--contacts-action-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:var(--contacts-action-purple)!important;
  box-shadow:0 8px 20px rgba(39,30,84,.045)!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:850!important;
  cursor:pointer!important;
  overflow:hidden!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-icon-action span{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  line-height:1!important;
  transform:translateY(-.25px)!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-icon-action.is-profile span{
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.015em!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-icon-action.is-danger{
  color:var(--contacts-danger)!important;
  border-color:#f0ced8!important;
  background:#fff!important;
}

/* Right 360 preview: icon compact actions, no long text buttons. */
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions-compact{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:0 0 2px!important;
  margin:0!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions::-webkit-scrollbar{display:none!important;}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions button,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions a{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  padding:0!important;
  border:1px solid var(--contacts-action-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:var(--contacts-action-purple)!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1!important;
  box-shadow:0 8px 20px rgba(39,30,84,.045)!important;
  overflow:hidden!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions button span,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions a span{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  line-height:1!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions .is-primary{
  width:42px!important;
  min-width:42px!important;
  background:#6651c8!important;
  border-color:#6651c8!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions .is-danger{
  color:var(--contacts-danger)!important;
  border-color:#f0ced8!important;
  background:#fff!important;
}

/* Keep the preview card from becoming wider than its column. */
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-card,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-card *{
  min-width:0!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-card header{
  grid-template-columns:auto minmax(0,1fr) auto!important;
}
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-card header h2,
.vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-card header p{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Medium desktop / laptop with side preview open: hide categories first, preserve actions. */
@media(max-width:1280px){
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-item{
    grid-template-columns:minmax(200px,1.15fr) minmax(185px,.9fr) minmax(118px,auto)!important;
  }
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-categories{
    display:none!important;
  }
}

/* Narrow layout: cards, actions remain visible and compact. */
@media(max-width:860px){
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-item{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:13px!important;
  }
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context,
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-categories{
    grid-column:1 / -1!important;
  }
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-actions{
    grid-column:2!important;
    grid-row:1!important;
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
    gap:5px!important;
  }
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-icon-action{
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    border-radius:12px!important;
  }
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context{
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context::-webkit-scrollbar{display:none!important;}
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-list-context span{
    flex:0 0 auto!important;
    max-width:150px!important;
  }
}

/* Mobile: preview actions become a compact icon rail. */
@media(max-width:640px){
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions{
    gap:6px!important;
    padding-bottom:4px!important;
  }
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions button,
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions a{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    border-radius:12px!important;
  }
  .vchat-frontend-app [data-vchat-panel="contacts"] .vchat-contact-preview-actions .is-primary{
    width:40px!important;
    min-width:40px!important;
  }
}