/* Vchat Core 0.65.14-alpha — routing engine + Inbox operational rail QA.
 * Final visual layer for the automatic assignment release. No colors are hard-coded
 * outside the established Nexo palette and no layout rule changes data behavior.
 */

#vchat-frontend-app.vchat-frontend-app .vchat-sla-bar{
  grid-template-columns:minmax(300px,1.78fr) minmax(175px,.70fr) minmax(185px,.78fr)!important;
  align-items:center!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  padding:8px 16px!important;
  gap:9px!important;
  overflow:hidden!important;
}

/* Keep the first-response KPI out of the compact operational rail. Resolution + SLA
 * remain visible because they are more useful to the decision maker than a duplicate
 * first-response metric already represented in analytics. */
#vchat-frontend-app.vchat-frontend-app #vchat-sla-first-response-item,
#vchat-frontend-app.vchat-frontend-app .vchat-sla-first-response-item{
  display:none!important;
}

#vchat-frontend-app.vchat-frontend-app .vchat-sla-item{
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  padding:5px 11px!important;
  border-radius:999px!important;
  align-items:center!important;
}

#vchat-frontend-app.vchat-frontend-app .vchat-sla-owner-item{
  grid-template-columns:auto minmax(0,1fr) auto!important;
}

#vchat-frontend-app.vchat-frontend-app .vchat-sla-item>span{
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
}

#vchat-frontend-app.vchat-frontend-app .vchat-sla-owner-action:not([hidden]){
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:850!important;
}

#vchat-frontend-app.vchat-frontend-app .vchat-sla-owner-item>div,
#vchat-frontend-app.vchat-frontend-app .vchat-sla-resolution>div,
#vchat-frontend-app.vchat-frontend-app .vchat-sla-state>div{
  min-width:0!important;
}

#vchat-frontend-app.vchat-frontend-app .vchat-sla-owner-item strong{
  max-width:none!important;
}

#vchat-frontend-app.vchat-frontend-app .vchat-sla-resolution strong,
#vchat-frontend-app.vchat-frontend-app .vchat-sla-state strong{
  max-width:150px!important;
}

/* Executive/administrator department routing modal: the same compact Nexo language
 * used by transfer candidates, with no dependency on desktop-only widths. */
#vchat-modal.is-inbox-command-modal .vchat-department-switch-note{
  margin:12px 0 16px!important;
  padding:12px 14px!important;
  border:1px solid #e5e0f4!important;
  border-radius:13px!important;
  background:#faf9ff!important;
}
#vchat-modal.is-inbox-command-modal .vchat-department-switch-note strong{
  display:block!important;
  color:#40386b!important;
  font-size:11px!important;
  font-weight:850!important;
}
#vchat-modal.is-inbox-command-modal .vchat-department-switch-note p{
  margin:4px 0 0!important;
  color:#7d7890!important;
  font-size:10px!important;
  line-height:1.5!important;
}

@media(max-width:1180px){
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-bar{
    grid-template-columns:minmax(260px,1.68fr) minmax(160px,.72fr) minmax(165px,.75fr)!important;
    padding-inline:12px!important;
    gap:7px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-owner-action:not([hidden]){
    width:80px!important;min-width:80px!important;max-width:80px!important;
  }
}

@media(max-width:820px),(max-width:1024px) and (orientation:portrait){
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-bar{
    grid-template-columns:minmax(0,1.55fr) minmax(140px,.78fr)!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:7px 10px!important;
    gap:6px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-resolution{display:none!important;}
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-item{
    height:40px!important;min-height:40px!important;max-height:40px!important;
    padding:5px 9px!important;border-radius:13px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-owner-action:not([hidden]){
    width:76px!important;min-width:76px!important;max-width:76px!important;
    height:30px!important;min-height:30px!important;max-height:30px!important;
    padding-inline:9px!important;font-size:10.5px!important;
  }
}

@media(max-width:520px){
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-bar{
    grid-template-columns:minmax(0,1.48fr) minmax(120px,.72fr)!important;
    height:50px!important;min-height:50px!important;max-height:50px!important;
    padding:6px 8px!important;gap:5px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-item{
    height:38px!important;min-height:38px!important;max-height:38px!important;
    padding:5px 7px!important;border-radius:11px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-item>span{
    width:20px!important;min-width:20px!important;height:20px!important;font-size:9px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-item small{display:none!important;}
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-item strong{font-size:10px!important;}
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-owner-action:not([hidden]){
    width:68px!important;min-width:68px!important;max-width:68px!important;
    height:28px!important;min-height:28px!important;max-height:28px!important;
    padding-inline:7px!important;font-size:10px!important;
  }
}

@media(max-width:380px){
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-bar{
    grid-template-columns:minmax(0,1.4fr) minmax(108px,.68fr)!important;
    padding-inline:6px!important;gap:4px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-sla-owner-action:not([hidden]){
    width:62px!important;min-width:62px!important;max-width:62px!important;
    padding-inline:5px!important;font-size:9.5px!important;
  }
}

/* Preferences: keep routing controls readable on desktop and compact on mobile. */
#vchat-frontend-app.vchat-frontend-app .vchat-routing-toggle-field{
  align-items:flex-start!important;
  justify-content:flex-start!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-routing-toggle-field>span{
  display:block!important;
  color:#37334c!important;
  font-size:11px!important;
  font-weight:800!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-routing-toggle-field>input[type="checkbox"]{
  align-self:flex-start!important;
  width:42px!important;
  height:24px!important;
  margin:1px 0 0!important;
}