/* IYES CHAT v3.5.1-r2 — precise UI hotfix over verified v3.5.0
   NÃO redefine sidebar inteira. NÃO redefine shell inteira. NÃO interfere no realtime.
*/

/* 1) Composer: v350 usava var(--card,#fff), mas --card não existe na base.
      Resultado: bloco branco no dark mode. */
body:not(.theme-light).inbox-mode .inbox.inbox-pro .composer-pro,
body:not(.theme-light).inbox-mode .inbox.inbox-pro .composer{
  background:var(--panel,#08162e)!important;
  color:var(--text,#f5f8ff)!important;
}
body.theme-light.inbox-mode .inbox.inbox-pro .composer-pro,
body.theme-light.inbox-mode .inbox.inbox-pro .composer{
  background:#fff!important;
  color:#172238!important;
}

/* 2) Desktop recolhido: corta APENAS o conteúdo do nav/profile.
      A sidebar continua overflow:visible para a alça original permanecer visível. */
@media(min-width:821px){
  .shell.sidebar-collapsed .sidebar nav{
    overflow-x:hidden!important;
    max-width:100%!important;
  }
  .shell.sidebar-collapsed .sidebar nav [data-page]{
    width:100%!important;
    max-width:54px!important;
    min-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .shell.sidebar-collapsed .sidebar nav [data-page] > span,
  .shell.sidebar-collapsed .sidebar nav .nav-group-title,
  .shell.sidebar-collapsed .sidebar nav .nav-group-chevron,
  .shell.sidebar-collapsed .sidebar nav .iyes-v345-profile-card{
    display:none!important;
  }
  .shell.sidebar-collapsed .sidebar .profile{
    overflow:hidden!important;
    max-width:100%!important;
  }
}

/* 3) Mobile real da base é <=820px. Mantemos exatamente esse breakpoint. */
@media(max-width:820px){
  /* Safari: header mobile ocupa 64px. A conversa não pode ocupar 100dvh POR BAIXO dele. */
  body.mobile-inbox-chat:not(.operator-body) .content{
    height:calc(var(--iyes-vv-height,100dvh) - 64px)!important;
    max-height:calc(var(--iyes-vv-height,100dvh) - 64px)!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.mobile-inbox-chat:not(.operator-body) .inbox.inbox-pro{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.mobile-inbox-chat:not(.operator-body) .inbox.inbox-pro.mobile-chat-open .chat{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow:hidden!important;
  }

  /* Menu: usa a altura REAL do visualViewport em vez de bottom:0 do layout viewport. */
  .shell.mobile-nav-open .sidebar nav{
    top:64px!important;
    bottom:auto!important;
    height:calc(var(--iyes-vv-height,100dvh) - 64px)!important;
    max-height:calc(var(--iyes-vv-height,100dvh) - 64px)!important;
    padding:12px 12px max(14px,var(--iyes-safe-bottom,0px))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  /* O JS r2 move o .profile para dentro do nav no mobile.
     Assim tema/sair deixam de ser fixed e passam a fazer parte da rolagem normal. */
  .shell.mobile-nav-open .sidebar nav > .profile.iyes-v351r2-profile-mobile{
    display:block!important;
    position:static!important;
    inset:auto!important;
    width:auto!important;
    max-width:none!important;
    margin:12px 0 max(8px,var(--iyes-safe-bottom,0px))!important;
    padding:12px!important;
    flex:0 0 auto!important;
    z-index:auto!important;
  }
  body:not(.theme-light) .shell.mobile-nav-open .sidebar nav > .profile.iyes-v351r2-profile-mobile{
    background:#0e1d39!important;
  }
  body.theme-light .shell.mobile-nav-open .sidebar nav > .profile.iyes-v351r2-profile-mobile{
    background:#fff!important;
  }

  /* Mantém os botões tema/sair visíveis e inteiros. */
  .shell.mobile-nav-open .sidebar nav > .profile.iyes-v351r2-profile-mobile .sidebar-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
    margin-top:8px!important;
  }
  .shell.mobile-nav-open .sidebar nav > .profile.iyes-v351r2-profile-mobile .sidebar-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
  }
  .shell.mobile-nav-open .sidebar nav > .profile.iyes-v351r2-profile-mobile .logout-label{
    display:inline!important;
  }

  /* Composer fica dentro do grid existente; só corrigimos dimensões que afetam Safari. */
  body.mobile-inbox-chat .inbox.inbox-pro.mobile-chat-open .composer-pro{
    min-height:0!important;
    max-height:none!important;
    flex:0 0 auto!important;
    padding-bottom:max(8px,var(--iyes-safe-bottom,0px))!important;
  }
  body.mobile-inbox-chat .inbox.inbox-pro.mobile-chat-open .composer-tools{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.mobile-inbox-chat .inbox.inbox-pro.mobile-chat-open #msg-text{
    font-size:16px!important;
  }
}

/* iPhone estreito: não reestrutura; apenas reduz densidade do cabeçalho. */
@media(max-width:520px){
  body.mobile-inbox-chat .inbox.inbox-pro.mobile-chat-open .chat-head{
    padding:8px 10px!important;
  }
  body.mobile-inbox-chat .inbox.inbox-pro.mobile-chat-open .chat-head-actions{
    gap:5px!important;
  }
  body.mobile-inbox-chat .inbox.inbox-pro.mobile-chat-open .chat-head-actions .small,
  body.mobile-inbox-chat .inbox.inbox-pro.mobile-chat-open .chat-head-actions .sync-chip{
    font-size:11px!important;
    padding:6px 8px!important;
  }
  body.mobile-inbox-chat .inbox.inbox-pro.mobile-chat-open .bubble{
    max-width:88%!important;
  }
}