/*
 * Flux CRM 5.3.6 · acabamento final do Inbox no padrão NAVE4.
 * Este arquivo deve ser carregado por último. Ele corrige conflitos entre as
 * camadas globais de cards claros e a barra exclusiva de canais do Inbox.
 */

body[data-route="inbox"].inbox-focus-layout{
  --inbox-rail-width:220px;
  --inbox-list-width:390px;
  height:100dvh!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

body[data-route="inbox"].inbox-focus-layout main.main{
  position:relative!important;
  inset:0!important;
  width:100vw!important;
  max-width:none!important;
  min-width:0!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

body[data-route="inbox"].inbox-focus-layout .content{
  position:relative!important;
  inset:0!important;
  width:100vw!important;
  max-width:none!important;
  min-width:0!important;
  height:calc(100dvh - var(--n4-topbar,60px))!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-layout{
  position:relative!important;
  inset:0!important;
  display:grid!important;
  grid-template-columns:var(--inbox-rail-width) minmax(0,1fr)!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#ffffff!important;
  box-shadow:none!important;
}

/* Barra de canais: exatamente como a referência NAVE4. */
body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail{
  position:relative!important;
  display:block!important;
  align-self:stretch!important;
  width:var(--inbox-rail-width)!important;
  min-width:var(--inbox-rail-width)!important;
  max-width:var(--inbox-rail-width)!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:25px 12px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  border:0!important;
  border-right:0!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#07203f 0%,#0a3159 100%)!important;
  background-color:#07203f!important;
  color:#ffffff!important;
  box-shadow:none!important;
  isolation:isolate!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail::before,
body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail::after{
  content:none!important;
  display:none!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail>header{
  display:grid!important;
  gap:2px!important;
  width:100%!important;
  margin:0!important;
  padding:0 12px 16px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail>header strong{
  display:block!important;
  margin:0!important;
  color:#ffffff!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail>header small{
  display:block!important;
  margin:0!important;
  color:#8eadd0!important;
  font-size:9px!important;
  line-height:1.4!important;
  font-weight:600!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:4px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs::before,
body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs::after{
  content:none!important;
  display:none!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a{
  position:relative!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) max-content!important;
  align-items:center!important;
  gap:11px!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 12px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  color:#f5f9ff!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:650!important;
  text-decoration:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
  transition:background-color .16s ease,color .16s ease!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a:hover,
body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a:focus-visible{
  border:0!important;
  outline:none!important;
  background:rgba(255,255,255,.075)!important;
  color:#ffffff!important;
  box-shadow:none!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a.is-active,
body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a.active{
  border:0!important;
  background:rgba(255,255,255,.11)!important;
  color:#ffffff!important;
  box-shadow:inset 3px 0 #28a8e9!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a>span:nth-child(2){
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  color:inherit!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a>b{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:end!important;
  box-sizing:border-box!important;
  width:auto!important;
  min-width:24px!important;
  max-width:54px!important;
  height:24px!important;
  margin:0!important;
  padding:0 7px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.13)!important;
  color:#ffffff!important;
  font-size:11px!important;
  line-height:24px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  text-align:center!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a.is-active>b,
body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a.active>b{
  background:rgba(255,255,255,.18)!important;
  color:#ffffff!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-icon{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  justify-self:start!important;
  flex:0 0 auto!important;
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:50%!important;
  color:#ffffff!important;
  box-shadow:none!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-channel-icon svg{
  display:block!important;
  width:15px!important;
  height:15px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

body[data-route="inbox"].inbox-focus-layout .network-all .inbox-channel-icon{background:#4d74ff!important}
body[data-route="inbox"].inbox-focus-layout .network-whatsapp .inbox-channel-icon{background:#17c763!important}
body[data-route="inbox"].inbox-focus-layout .network-instagram .inbox-channel-icon{background:linear-gradient(135deg,#ff7a00,#ff0069,#7a29ff)!important}
body[data-route="inbox"].inbox-focus-layout .network-messenger .inbox-channel-icon{background:#3977f6!important}
body[data-route="inbox"].inbox-focus-layout .network-telegram .inbox-channel-icon{background:#28a8e9!important}
body[data-route="inbox"].inbox-focus-layout .network-web .inbox-channel-icon{background:#4d74ff!important}
body[data-route="inbox"].inbox-focus-layout .network-voice .inbox-channel-icon{background:#1bbc65!important}

/* Workspace ocupa integralmente o restante da tela. */
body[data-route="inbox"].inbox-focus-layout .inbox-workspace{
  --flux-pane-size:var(--inbox-list-width)!important;
  display:grid!important;
  grid-template-columns:var(--flux-pane-size) 8px minmax(0,1fr)!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#ffffff!important;
}

body[data-route="inbox"].inbox-focus-layout .inbox-workspace:not(.flux-split-ready){
  grid-template-columns:minmax(330px,var(--inbox-list-width)) minmax(0,1fr)!important;
}

body[data-route="inbox"].inbox-focus-layout .conversation-list,
body[data-route="inbox"].inbox-focus-layout .chat-panel{
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}

body[data-route="inbox"].inbox-focus-layout .conversation-list{
  border-right:1px solid #e4eaf1!important;
  background:#ffffff!important;
}

body[data-route="inbox"].inbox-focus-layout .chat-panel{
  background:#fbfaf8!important;
}

body[data-route="inbox"].inbox-focus-layout .flux-split-handle{
  position:relative!important;
  z-index:20!important;
  width:8px!important;
  min-width:8px!important;
  max-width:8px!important;
  height:100%!important;
  cursor:col-resize!important;
  touch-action:none!important;
  background:linear-gradient(90deg,transparent 0 3px,#d9e2ec 3px 5px,transparent 5px 8px)!important;
}

body[data-route="inbox"].inbox-focus-layout .flux-split-handle::after{
  content:"⋮"!important;
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:68px!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid #ccd8e5!important;
  border-radius:999px!important;
  background:#ffffff!important;
  color:#607b97!important;
  box-shadow:0 6px 18px rgba(24,50,80,.13)!important;
}

/* Tablet: reproduz a barra compacta da referência sem cortar contadores. */
@media (max-width:1100px) and (min-width:851px){
  body[data-route="inbox"].inbox-focus-layout{
    --inbox-rail-width:76px;
    --inbox-list-width:330px;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail{
    padding:16px 8px!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail>header,
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a>span:nth-child(2){
    display:none!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    width:100%!important;
    padding:0!important;
    overflow:visible!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-icon{
    justify-self:center!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a>b{
    position:absolute!important;
    top:2px!important;
    right:2px!important;
    min-width:20px!important;
    max-width:38px!important;
    height:20px!important;
    padding:0 5px!important;
    font-size:9px!important;
    line-height:20px!important;
    overflow:hidden!important;
  }
}

/* Mobile: canais em trilho horizontal e área de conversa sem cortes laterais. */
@media (max-width:850px){
  html:has(body[data-route="inbox"].inbox-focus-layout),
  body[data-route="inbox"].inbox-focus-layout{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  body[data-route="inbox"].inbox-focus-layout{
    --inbox-rail-width:100%;
    --inbox-list-width:100%;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-layout{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:62px minmax(0,1fr)!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:62px!important;
    padding:7px 8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-rail>header{
    display:none!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs{
    display:flex!important;
    gap:6px!important;
    width:max-content!important;
    min-width:max-content!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a{
    flex:0 0 48px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    overflow:visible!important;
    justify-items:center!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a>span:nth-child(2){
    display:none!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-icon{
    justify-self:center!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-channel-tabs a>b{
    position:absolute!important;
    top:1px!important;
    right:1px!important;
    min-width:18px!important;
    max-width:34px!important;
    height:18px!important;
    padding:0 4px!important;
    font-size:9px!important;
    line-height:18px!important;
  }
  body[data-route="inbox"].inbox-focus-layout .inbox-workspace,
  body[data-route="inbox"].inbox-focus-layout .inbox-workspace:not(.flux-split-ready){
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
  body[data-route="inbox"].inbox-focus-layout .flux-split-handle{
    display:none!important;
  }
}