/* Vidalys Flow — sidebar recolhível global.
   Desktop: 252px expandida / 76px recolhida. Mobile mantém o drawer existente. */

:root {
  --vf-sidebar-expanded-width: 252px;
  --vf-sidebar-collapsed-width: 76px;
}

/* O menu só deve rolar verticalmente. `overflow-y:auto` sozinho pode fazer o
   eixo X virar `auto` no navegador e criar uma barra horizontal sem utilidade. */
#sidebar.sidebar nav {
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

#sidebar.sidebar nav > *,
#sidebar.sidebar .nav-link {
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  #sidebar.sidebar {
    width: var(--vf-sidebar-expanded-width) !important;
    transition: width .22s ease, box-shadow .22s ease !important;
    overflow: visible;
  }

  .main-content {
    margin-left: var(--vf-sidebar-expanded-width) !important;
    transition: margin-left .22s ease !important;
  }

  html.vf-sidebar-collapsed #sidebar.sidebar {
    width: var(--vf-sidebar-collapsed-width) !important;
  }

  html.vf-sidebar-collapsed .main-content {
    margin-left: var(--vf-sidebar-collapsed-width) !important;
  }

  /* Conversas must obey the same global geometry as every other workspace.
     These selectors intentionally outrank legacy Inbox overrides. */
  html:not(.vf-sidebar-collapsed) .inbox-page-container > #sidebar.sidebar {
    width: var(--vf-sidebar-expanded-width) !important;
  }

  html:not(.vf-sidebar-collapsed) .inbox-page-container > .main-content.inbox-main-content {
    margin-left: var(--vf-sidebar-expanded-width) !important;
    width: calc(100% - var(--vf-sidebar-expanded-width)) !important;
    max-width: none !important;
  }

  html.vf-sidebar-collapsed .inbox-page-container > #sidebar.sidebar {
    width: var(--vf-sidebar-collapsed-width) !important;
  }

  html.vf-sidebar-collapsed .inbox-page-container > .main-content.inbox-main-content {
    margin-left: var(--vf-sidebar-collapsed-width) !important;
    width: calc(100% - var(--vf-sidebar-collapsed-width)) !important;
    max-width: none !important;
  }

  .vf-sidebar-brand-wrap {
    position: relative;
    min-height: 88px;
    transition: padding .22s ease;
  }

  .vf-sidebar-collapse-button {
    position: absolute;
    top: 25px;
    right: -13px;
    z-index: 70;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 999px;
    background: #fff;
    color: #52637b;
    box-shadow: 0 6px 18px rgba(15,23,42,.16);
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  }

  .vf-sidebar-collapse-button:hover {
    background: #f8fafc;
    color: #2459b9;
    border-color: #cbd8ea;
    transform: scale(1.04);
  }

  .vf-sidebar-collapse-button svg {
    width: 15px;
    height: 15px;
  }

  html.vf-sidebar-collapsed .vf-sidebar-brand-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html.vf-sidebar-collapsed .vf-sidebar-brand {
    justify-content: center;
  }

  html.vf-sidebar-collapsed .vf-sidebar-mark {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
  }

  html.vf-sidebar-collapsed .vf-sidebar-brand-copy,
  html.vf-sidebar-collapsed .nav-link > span,
  html.vf-sidebar-collapsed .nav-section,
  html.vf-sidebar-collapsed .vf-sidebar-account .flex-1,
  html.vf-sidebar-collapsed .vf-sidebar-logout {
    display: none !important;
  }

  html.vf-sidebar-collapsed #sidebar nav > div:not(.nav-section) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html.vf-sidebar-collapsed .nav-link {
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 4px auto !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }

  html.vf-sidebar-collapsed .nav-link > svg,
  html.vf-sidebar-collapsed .nav-link > i {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px;
  }

  html.vf-sidebar-collapsed .vf-sidebar-account-wrap {
    padding: 10px !important;
  }

  html.vf-sidebar-collapsed .vf-sidebar-account {
    justify-content: center;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  html.vf-sidebar-collapsed .vf-sidebar-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  /* Quando recolhido, o próprio `title` dos links continua oferecendo a dica.
     O pseudo-tooltip anterior saía para fora do nav e forçava overflow horizontal. */
  html.vf-sidebar-collapsed .nav-link {
    position: relative;
  }
}

@media (max-width: 1024px) {
  .vf-sidebar-collapse-button {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar.sidebar,
  .main-content,
  .vf-sidebar-collapse-button {
    transition: none !important;
  }
}


/* Atendimento rail final: icon-first, intentionally smaller than the global collapsed menu. */
@media (min-width: 1025px) {
  html.vf-atendimento-workspace {
    --vf-sidebar-collapsed-width: 64px;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar {
    width: 64px !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar .vf-sidebar-brand-wrap {
    min-height: 64px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar .vf-sidebar-mark {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar .nav-link {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 4px auto !important;
    border-radius: 11px !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar .nav-link > svg,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar .nav-link > i {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar .vf-sidebar-account-wrap {
    padding: 8px !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar .vf-sidebar-avatar {
    width: 34px !important;
    height: 34px !important;
  }
}


/* Atendimento sidebar parity — keep click-collapse behavior identical to the rest of Flow */
@media (min-width: 1025px) {
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within {
    width: var(--vf-sidebar-collapsed-width) !important;
    z-index: 50 !important;
    box-shadow: none !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover .vf-sidebar-brand-copy,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within .vf-sidebar-brand-copy,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover .nav-link > span,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within .nav-link > span,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover .nav-section,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within .nav-section,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover .vf-sidebar-account .flex-1,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within .vf-sidebar-account .flex-1,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover .vf-sidebar-logout,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within .vf-sidebar-logout {
    display: none !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover .vf-sidebar-brand,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within .vf-sidebar-brand {
    justify-content: center !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover nav > div:not(.nav-section),
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within nav > div:not(.nav-section) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover .nav-link,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within .nav-link {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 4px auto !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 11px !important;
  }

  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:hover .vf-sidebar-account,
  html.vf-atendimento-workspace.vf-sidebar-collapsed #sidebar.sidebar:focus-within .vf-sidebar-account {
    justify-content: center !important;
    gap: 0 !important;
  }
}