/* Vchat Core 0.66.17-alpha — Inbox visual system, phase 1.
 * Scoped to Portal Inbox and collapsed sidebar. Pure presentation: no DOM, ids,
 * event handlers, permissions, status, messages or API changes.
 * Loaded AFTER visual-refresh-nav-inbox.css to resolve historical !important rules.
 */

/* Stable sizing tokens across the Inbox, separate from WP/Elementor widgets. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section {
  --vc-inbox-line:#e5e8f3;
  --vc-inbox-muted:#77819b;
  --vc-inbox-ink:#222643;
  --vc-inbox-focus:#6558e8;
  --vc-inbox-corner:14px;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section *,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section *::before,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section *::after {
  box-sizing:border-box!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-shell,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-panel {
  min-width:0!important;
  max-width:100%!important;
}

/* Sidebar compact: keep navigation centered and clean, preserve all underlying counts. */
@media (min-width:861px){
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo.is-sidebar-collapsed .vchat-primary-nav button em,
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo.is-sidebar-collapsed .vchat-nav-admin button em,
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo.is-sidebar-collapsed #vchat-inbox-badge,
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo.is-sidebar-collapsed #vchat-task-badge,
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo.is-sidebar-collapsed #vchat-nav-ai-credits{
    display:none!important;
    visibility:hidden!important;
  }
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo.is-sidebar-collapsed .vchat-primary-nav button,
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo.is-sidebar-collapsed .vchat-nav-admin-toggle {
    justify-content:center!important;
    gap:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* List surfaces: make the Inbox feel like a product, not a collection of WP buttons. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list {
  background:#f8f9fd!important;
  border-right:1px solid var(--vc-inbox-line)!important;
  border-radius:0!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-panel {
  background:#fff!important;
  border-radius:0!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list-head {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-width:0!important;
  padding:18px 16px 15px!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list-head > div:first-child {
  min-width:0!important;
  flex:1 1 auto!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list-head h1 {
  margin:0!important;
  font-size:25px!important;
  line-height:1.12!important;
  letter-spacing:-.055em!important;
  font-weight:800!important;
  color:var(--vc-inbox-ink)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list-head p {
  margin:5px 0 0!important;
  font-size:11px!important;
  line-height:1.4!important;
  color:var(--vc-inbox-muted)!important;
  white-space:normal!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-head-actions {
  display:flex!important;
  flex:0 0 auto!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-bulk-toggle,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-new-conversation {
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  margin:0!important;
  border-radius:12px!important;
  line-height:1!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-new-conversation svg {
  display:block!important;
  width:19px!important;
  height:19px!important;
  margin:auto!important;
}

/* Folder row — icon and counter are ONE group, not independently positioned. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-folders {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:6px!important;
  width:calc(100% - 28px)!important;
  min-width:0!important;
  max-width:calc(100% - 28px)!important;
  margin:0 14px 12px!important;
  padding:6px!important;
  border:1px solid #e5e5f0!important;
  border-radius:17px!important;
  background:#f0eff7!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-folders > button {
  position:relative!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 5px!important;
  border-radius:13px!important;
  overflow:hidden!important;
  line-height:1!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-folders > button > .vchat-folder-icon {
  position:static!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 23px!important;
  display:inline-grid!important;
  place-items:center!important;
  width:23px!important;
  min-width:23px!important;
  height:23px!important;
  min-height:23px!important;
  margin:0!important;
  background:transparent!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-folders > button > .vchat-folder-icon svg {
  width:19px!important;
  height:19px!important;
  stroke-width:1.85!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-folders > button > em {
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 1 auto!important;
  min-width:24px!important;
  max-width:calc(100% - 30px)!important;
  height:23px!important;
  margin:0!important;
  padding:0 6px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-folders > button.is-active {
  border:1px solid #deddf1!important;
  box-shadow:0 2px 8px rgba(23,25,65,.045)!important;
}

/* Search: width:100% + horizontal margins used to overflow the list column. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section label.vchat-search.vchat-inbox-search {
  position:relative!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 35px!important;
  align-items:center!important;
  column-gap:0!important;
  width:calc(100% - 28px)!important;
  min-width:0!important;
  max-width:calc(100% - 28px)!important;
  height:46px!important;
  min-height:46px!important;
  margin:0 14px 10px!important;
  padding:0 5px!important;
  border:1px solid #dfe3f1!important;
  border-radius:13px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 2px 7px rgba(19,23,63,.025)!important;
  color:var(--vc-inbox-muted)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section label.vchat-search.vchat-inbox-search:focus-within {
  border-color:#8277f2!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.10)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section label.vchat-search.vchat-inbox-search > .vchat-search-icon {
  display:inline-grid!important;
  place-items:center!important;
  justify-self:center!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  margin:0!important;
  color:#6657e2!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section label.vchat-search.vchat-inbox-search > .vchat-search-icon svg {
  width:19px!important;
  height:19px!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section input#vchat-conversation-search {
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0 3px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.3!important;
  color:var(--vc-inbox-ink)!important;
  text-overflow:ellipsis!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section input#vchat-conversation-search::placeholder {
  color:#9097ac!important;
  opacity:1!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-clear-conversation-search {
  display:inline-grid!important;
  place-items:center!important;
  justify-self:center!important;
  flex:none!important;
  width:29px!important;
  min-width:29px!important;
  height:29px!important;
  min-height:29px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:9px!important;
  font-size:19px!important;
  line-height:1!important;
  color:#8590a7!important;
  background:transparent!important;
}

/* Quick filters: naturally compress without clipping the unread count. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-quickbar {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 14px 12px!important;
  border-bottom:1px solid var(--vc-inbox-line)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-quick-filters {
  display:grid!important;
  grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.2fr)!important;
  align-items:center!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-quick-filters > button {
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:4px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0 5px!important;
  border-radius:10px!important;
  border:1px solid transparent!important;
  font-size:10px!important;
  font-weight:750!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-quick-filters > button em {
  display:inline-grid!important;
  place-items:center!important;
  min-width:0!important;
  flex:0 0 auto!important;
  padding:0!important;
  font-size:9px!important;
  font-style:normal!important;
  line-height:1!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-advanced-filter-toggle {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:86px!important;
  max-width:105px!important;
  height:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0 10px!important;
  border:1px solid #dfe3f1!important;
  border-radius:10px!important;
  background:#fff!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-advanced-filter-toggle .vchat-ui-icon {
  display:inline-flex!important;
  flex:0 0 17px!important;
  width:17px!important;
  min-width:17px!important;
  height:17px!important;
  justify-content:center!important;
  align-items:center!important;
  margin:0!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-advanced-filter-toggle .vchat-ui-icon svg{
  width:17px!important;
  height:17px!important;
}

/* Conversation previews: predictable padding, centered avatar, readable metadata. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-list {
  min-width:0!important;
  max-width:100%!important;
  padding:10px 9px 14px!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-item {
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  margin:0 0 6px!important;
  padding:12px 10px!important;
  border-radius:15px!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transition:background-color .15s,border-color .15s,box-shadow .15s!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-item.is-active {
  background:#fff!important;
  border-color:#cfcaf5!important;
  box-shadow:0 3px 13px rgba(65,59,123,.065)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-item:hover:not(.is-active) {
  background:#fff!important;
  border-color:#e5e5f2!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-item .vchat-avatar {
  flex:0 0 auto!important;
  align-self:center!important;
  display:grid!important;
  place-items:center!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-copy,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-copy > span {
  min-width:0!important;
  max-width:100%!important;
}

/* A readable typography scale within the conversation list. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-copy strong {
  font-size:12.5px!important;
  font-weight:760!important;
  line-height:1.32!important;
  color:var(--vc-inbox-ink)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-copy small {
  font-size:10.5px!important;
  line-height:1.4!important;
  color:var(--vc-inbox-muted)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-copy time {
  font-size:10px!important;
  line-height:1.3!important;
  color:#8a91a6!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-copy em {
  font-size:9px!important;
  line-height:1.15!important;
}
/* Active conversation: consistent control alignment without changing click targets. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-head {
  min-width:0!important;
  border-bottom:1px solid var(--vc-inbox-line)!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-actions button {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  vertical-align:middle!important;
  border-radius:12px!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-chat-toolbar,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-sla-bar {
  min-width:0!important;
  max-width:100%!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-reply-mode > button {
  display:inline-flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-width:0!important;
  line-height:1.1!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-composer-tools button {
  align-items:center!important;
  justify-content:center!important;
  line-height:1.1!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list-footer {
  min-width:0!important;
  padding:7px 12px 12px!important;
  border-top:1px solid var(--vc-inbox-line)!important;
  background:#f8f9fd!important;
}
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-export-button {
  display:inline-flex!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:37px!important;
  justify-content:center!important;
  align-items:center!important;
  gap:9px!important;
  margin:0!important;
  border-radius:11px!important;
}

/* Keyboard accessibility retained even with strongly scoped visual rules. */
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section button:focus-visible,
#vchat-frontend-app.vchat-frontend-app .vchat-inbox-section input:focus-visible {
  outline:2px solid #766af0!important;
  outline-offset:2px!important;
}

/* Compact widths: prioritize controls without reworking established mobile navigation. */
@media (max-width:1150px) and (min-width:861px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list-head{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-quickbar{
    gap:5px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
}
@media (max-width:860px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-list-head{
    padding:12px 13px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-quickbar{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section label.vchat-search.vchat-inbox-search{
    margin-left:12px!important;
    margin-right:12px!important;
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
  }
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-folders{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
    margin-left:12px!important;
    margin-right:12px!important;
  }
}
@media (max-width:390px){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-inbox-quickbar{gap:4px!important;}
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-quick-filters>button{font-size:9px!important;padding:0 3px!important;}
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section #vchat-advanced-filter-toggle{min-width:75px!important;padding:0 7px!important;}
}
@media(prefers-reduced-motion:reduce){
  #vchat-frontend-app.vchat-frontend-app .vchat-inbox-section .vchat-conversation-item{
    transition:none!important;
  }
}