/* Vchat Core 0.66.26-alpha | Inbox: balanced optical spacing.
 * LAST scoped visual layer. No JS, REST, assignment, audio, emoji or template logic.
 * Fixes contradictory 40px controls inside 30/32px clipped toolbar and
 * 38px SLA chips inside a 46px rail. All sizes include border-box.
 */

/* 1. Responder / Nota interna — the segmented background follows its contents,
   with exactly the same 4px inset on every edge. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-toolbar,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-toolbar-0518{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:12px!important;
  min-height:54px!important;
  height:auto!important;
  max-height:none!important;
  padding:7px 16px!important;
  margin:0!important;
  overflow:visible!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-reply-mode{
  box-sizing:border-box!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:3px!important;
  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:4px!important;
  border-radius:12px!important;
  overflow:visible!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-reply-mode>button{
  box-sizing:border-box!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:0 13px!important;
  border-radius:9px!important;
  font-size:11px!important;
  line-height:1!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-quick-actions{
  box-sizing:border-box!important;
  min-width:0!important;
  align-self:center!important;
}

/* 2. Owner / Assign / SLA — real breathing room above and below each pill.
   Previously fixed-height rail + mismatched pill heights clipped the button. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-bar,
#vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="archived"] .vchat-sla-bar,
#vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="trashed"] .vchat-sla-bar{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(210px,1.55fr) minmax(130px,.82fr) minmax(145px,.78fr)!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  height:56px!important;
  min-height:56px!important;
  max-height:none!important;
  margin:0!important;
  padding:8px 16px!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  border-bottom:1px solid #ebe8f3!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-item,
#vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="archived"] .vchat-sla-item,
#vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="trashed"] .vchat-sla-item{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr)!important;
  align-items:center!important;
  align-self:center!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  height:39px!important;
  min-height:39px!important;
  max-height:39px!important;
  margin:0!important;
  padding:4px 9px!important;
  gap:7px!important;
  border-radius:999px!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-owner-item,
#vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="archived"] .vchat-sla-owner-item,
#vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="trashed"] .vchat-sla-owner-item{
  grid-template-columns:22px minmax(0,1fr) auto!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-owner-item:has(.vchat-sla-owner-action[hidden]){
  grid-template-columns:22px minmax(0,1fr)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-owner-action:not([hidden]){
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-self:center!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:66px!important;
  width:auto!important;
  max-width:90px!important;
  height:29px!important;
  min-height:29px!important;
  max-height:29px!important;
  margin:0!important;
  padding:0 12px!important;
  line-height:1!important;
  white-space:nowrap!important;
  transform:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-item>span{
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  width:22px!important;
  min-width:22px!important;
  height:22px!important;
  min-height:22px!important;
  margin:0!important;
  line-height:1!important;
}

/* 3. Attach / microphone / emoji / Schedule / Saved replies.
   The scroll rail has a 44px content box. A 32px button gets 6px air on
   both sides, unlike the old 32px rail + 40px control mismatch. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools{
  box-sizing:border-box!important;
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0 0 4px!important;
  padding:6px 2px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-padding-inline:2px!important;
  scrollbar-width:none!important;
  white-space:nowrap!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools::-webkit-scrollbar{display:none!important;}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools>button{
  box-sizing:border-box!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-self:center!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:32px!important;
  max-width:none!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:10px!important;
  line-height:1!important;
  vertical-align:middle!important;
  transform:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-record-audio,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-emoji{
  box-sizing:border-box!important;
  display:inline-flex!important;
  flex:0 0 32px!important;
  align-self:center!important;
  align-items:center!important;
  justify-content:center!important;
  width:32px!important;
  min-width:32px!important;
  max-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #e5e0f5!important;
  border-radius:10px!important;
  background:#faf9ff!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-record-audio .vchat-mic-icon{
  display:block!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  position:static!important;
  transform:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-emoji::before{
  display:grid!important;
  place-items:center!important;
  width:19px!important;
  height:19px!important;
  min-width:19px!important;
  min-height:19px!important;
  margin:0!important;
  line-height:1!important;
  position:static!important;
  transform:none!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools #vchat-saved-reply{
  align-self:center!important;
  margin-left:auto!important;
}
/* If a conversation is marked archived/trashed, the disabled controls retain
   these same dimensions. No disabled state or click functionality is changed. */

@media(max-width:880px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-toolbar{
    column-gap:8px!important;
    padding:7px 10px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-bar,
  #vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="archived"] .vchat-sla-bar,
  #vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="trashed"] .vchat-sla-bar{
    grid-template-columns:minmax(165px,1.5fr) minmax(118px,1fr)!important;
    gap:7px!important;
    padding-inline:10px!important;
    height:56px!important;
    min-height:56px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-state{display:none!important;}
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools{gap:5px!important;}
}
@media(max-width:560px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-toolbar{
    grid-template-columns:max-content minmax(0,1fr)!important;
    min-height:52px!important;
    padding:6px 9px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-reply-mode{
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:3px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-reply-mode>button{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    padding-inline:9px!important;
    font-size:10px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-bar,
  #vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="archived"] .vchat-sla-bar,
  #vchat-frontend-app.vchat-frontend-app[data-conversation-lifecycle="trashed"] .vchat-sla-bar{
    grid-template-columns:minmax(0,1.6fr) minmax(90px,.8fr)!important;
    gap:6px!important;
    height:54px!important;
    min-height:54px!important;
    padding:7px 9px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-item{
    height:39px!important;min-height:39px!important;max-height:39px!important;
    gap:5px!important;padding-inline:7px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-owner-action:not([hidden]){
    height:28px!important;min-height:28px!important;max-height:28px!important;
    min-width:54px!important;padding-inline:8px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools{
    height:44px!important;min-height:44px!important;max-height:44px!important;
    padding-block:6px!important;
    margin-bottom:4px!important;
  }
}
@media(max-width:360px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-toolbar{
    column-gap:5px!important;
    padding-inline:7px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-reply-mode>button{
    padding-inline:7px!important;
    font-size:9px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-bar{
    padding-inline:7px!important;gap:5px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-owner-action:not([hidden]){
    min-width:50px!important;padding-inline:7px!important;font-size:9px!important;
  }
}