/*
 * Chat Teraleads — navegação lateral inspirada no iOS
 * Compatibilidade validada: Chatwoot Community Edition v4.18.0
 *
 * Esta folha altera somente a apresentação da barra lateral. As regras são
 * ancoradas na estrutura do componente Sidebar para não atingir menus e
 * controles das demais telas.
 */

:root {
  --tera-sidebar-navy: 10 29 74;
  --tera-sidebar-midnight: 4 9 22;
  --tera-sidebar-cyan: 0 196 239;
  --tera-sidebar-grey: 100 116 139;
  --tera-sidebar-white: 244 245 247;
  --tera-sidebar-radius: 14px;
  --tera-sidebar-control-radius: 12px;
  --tera-sidebar-motion: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Material translúcido da barra. */
#app aside.bg-n-background.fixed.top-0.z-40 {
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 94%) 0%,
      rgb(var(--tera-sidebar-white) / 89%) 100%
    ) !important;
  border-color: rgb(var(--tera-sidebar-navy) / 9%) !important;
  box-shadow: 10px 0 36px rgb(var(--tera-sidebar-midnight) / 7%);
  -webkit-backdrop-filter: blur(26px) saturate(175%);
  backdrop-filter: blur(26px) saturate(175%);
}

/* Cabeçalho: marca, conta, pesquisa e composição. */
#app aside.bg-n-background.fixed.top-0.z-40 > section:first-of-type {
  gap: 10px !important;
  margin-top: 8px !important;
  margin-bottom: 14px !important;
}

#app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:first-child
  > div.grid.flex-shrink-0 {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 9px;
  background: rgb(var(--tera-sidebar-midnight));
  box-shadow:
    0 1px 2px rgb(var(--tera-sidebar-midnight) / 18%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
}

#app aside.bg-n-background.fixed.top-0.z-40 #sidebar-account-switcher {
  min-height: 34px;
  padding-inline: 10px;
  border-radius: var(--tera-sidebar-control-radius);
  transition:
    background-color var(--tera-sidebar-motion),
    box-shadow var(--tera-sidebar-motion);
}

#app aside.bg-n-background.fixed.top-0.z-40 #sidebar-account-switcher:hover,
#app aside.bg-n-background.fixed.top-0.z-40 #sidebar-account-switcher:focus-visible {
  background: rgb(255 255 255 / 70%) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--tera-sidebar-navy) / 7%);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:nth-child(2)
  > a {
  height: 36px !important;
  border-radius: var(--tera-sidebar-control-radius) !important;
  outline: none !important;
  border: 1px solid rgb(var(--tera-sidebar-navy) / 10%);
  background: rgb(255 255 255 / 68%) !important;
  box-shadow:
    0 1px 2px rgb(var(--tera-sidebar-midnight) / 3%),
    inset 0 1px 0 rgb(255 255 255 / 75%);
  transition:
    background-color var(--tera-sidebar-motion),
    border-color var(--tera-sidebar-motion),
    box-shadow var(--tera-sidebar-motion);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:nth-child(2)
  > a:hover {
  border-color: rgb(var(--tera-sidebar-cyan) / 24%);
  background: rgb(255 255 255 / 92%) !important;
  box-shadow: 0 4px 14px rgb(var(--tera-sidebar-midnight) / 6%);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:nth-child(2)
  button {
  min-width: 36px !important;
  height: 36px !important;
  border-radius: var(--tera-sidebar-control-radius) !important;
  border-color: rgb(var(--tera-sidebar-navy) / 10%) !important;
  background: rgb(255 255 255 / 68%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 75%);
  transition:
    transform var(--tera-sidebar-motion),
    background-color var(--tera-sidebar-motion),
    box-shadow var(--tera-sidebar-motion);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:nth-child(2)
  button:hover {
  background: rgb(255 255 255 / 94%) !important;
  box-shadow: 0 4px 14px rgb(var(--tera-sidebar-midnight) / 7%);
  transform: translateY(-1px);
}

/* Lista principal e itens de primeiro nível. */
#app aside.bg-n-background.fixed.top-0.z-40 > nav {
  gap: 8px !important;
  padding-bottom: 18px !important;
}

#app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button'] {
  min-height: 38px !important;
  height: 38px !important;
  padding-inline: 8px !important;
  border-radius: var(--tera-sidebar-control-radius) !important;
  transition:
    color var(--tera-sidebar-motion),
    background-color var(--tera-sidebar-motion),
    box-shadow var(--tera-sidebar-motion),
    transform var(--tera-sidebar-motion);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button']:hover {
  color: rgb(var(--tera-sidebar-navy)) !important;
  background: rgb(255 255 255 / 66%) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--tera-sidebar-navy) / 6%);
  transform: translateX(1px);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button']
  > div.relative:first-child {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  justify-content: center;
  border-radius: 8px;
  color: rgb(var(--tera-sidebar-navy) / 82%);
  background: rgb(var(--tera-sidebar-navy) / 6%);
  transition:
    color var(--tera-sidebar-motion),
    background-color var(--tera-sidebar-motion),
    box-shadow var(--tera-sidebar-motion);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button'].bg-n-alpha-2,
#app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button'].text-n-slate-12.font-medium {
  color: rgb(var(--tera-sidebar-navy)) !important;
  background: rgb(255 255 255 / 78%) !important;
  box-shadow:
    inset 0 0 0 1px rgb(var(--tera-sidebar-navy) / 7%),
    0 4px 12px rgb(var(--tera-sidebar-midnight) / 4%);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button'].bg-n-alpha-2
  > div.relative:first-child,
#app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button'].text-n-slate-12.font-medium
  > div.relative:first-child {
  color: rgb(var(--tera-sidebar-cyan));
  background: rgb(var(--tera-sidebar-cyan) / 12%);
  box-shadow: inset 0 0 0 1px rgb(var(--tera-sidebar-cyan) / 13%);
}

/* Subitens: cápsula de seleção e árvore discreta. */
#app aside.bg-n-background.fixed.top-0.z-40 nav li.child-item {
  padding-block: 2px !important;
}

#app aside.bg-n-background.fixed.top-0.z-40 nav li.child-item > a {
  min-height: 36px !important;
  height: 36px !important;
  padding-inline: 10px !important;
  border-radius: 11px !important;
  background-image: none !important;
  transition:
    color var(--tera-sidebar-motion),
    background-color var(--tera-sidebar-motion),
    box-shadow var(--tera-sidebar-motion),
    transform var(--tera-sidebar-motion);
}

#app aside.bg-n-background.fixed.top-0.z-40 nav li.child-item > a:hover {
  color: rgb(var(--tera-sidebar-navy)) !important;
  background: rgb(255 255 255 / 64%) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--tera-sidebar-navy) / 5%);
  transform: translateX(1px);
}

#app aside.bg-n-background.fixed.top-0.z-40 nav li.child-item > a.active {
  color: rgb(var(--tera-sidebar-navy)) !important;
  background: rgb(var(--tera-sidebar-cyan) / 12%) !important;
  box-shadow:
    inset 3px 0 0 rgb(var(--tera-sidebar-cyan)),
    inset 0 0 0 1px rgb(var(--tera-sidebar-cyan) / 14%);
  font-weight: 600;
}

#app aside.bg-n-background.fixed.top-0.z-40 nav li.child-item::before {
  background: rgb(var(--tera-sidebar-navy) / 11%) !important;
}

#app aside.bg-n-background.fixed.top-0.z-40 nav li.child-item::after {
  border-color: rgb(var(--tera-sidebar-navy) / 11%) !important;
}

/* Área do perfil com acabamento de dock. */
#app aside.bg-n-background.fixed.top-0.z-40
  > section:last-of-type
  > div:last-of-type {
  padding: 8px !important;
  border-color: rgb(var(--tera-sidebar-navy) / 8%) !important;
  background: rgb(255 255 255 / 58%);
  box-shadow: 0 -8px 24px rgb(var(--tera-sidebar-midnight) / 3%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > section:last-of-type
  button {
  min-height: 42px;
  padding: 5px 7px !important;
  border-radius: var(--tera-sidebar-control-radius) !important;
  transition:
    background-color var(--tera-sidebar-motion),
    box-shadow var(--tera-sidebar-motion);
}

#app aside.bg-n-background.fixed.top-0.z-40
  > section:last-of-type
  button:hover {
  background: rgb(255 255 255 / 72%) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--tera-sidebar-navy) / 6%);
}

/* Foco visível e consistente para teclado. */
#app aside.bg-n-background.fixed.top-0.z-40 a:focus-visible,
#app aside.bg-n-background.fixed.top-0.z-40 button:focus-visible,
#app aside.bg-n-background.fixed.top-0.z-40 [role='button']:focus-visible {
  outline: 2px solid rgb(var(--tera-sidebar-cyan) / 85%) !important;
  outline-offset: 2px !important;
}

/* Tema escuro: material Midnight Void com contraste preservado. */
.dark #app aside.bg-n-background.fixed.top-0.z-40 {
  background:
    linear-gradient(
      180deg,
      rgb(var(--tera-sidebar-midnight) / 96%) 0%,
      rgb(var(--tera-sidebar-navy) / 91%) 100%
    ) !important;
  border-color: rgb(255 255 255 / 9%) !important;
  box-shadow: 10px 0 38px rgb(0 0 0 / 24%);
}

.dark #app aside.bg-n-background.fixed.top-0.z-40 #sidebar-account-switcher:hover,
.dark #app aside.bg-n-background.fixed.top-0.z-40 #sidebar-account-switcher:focus-visible,
.dark #app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:nth-child(2)
  > a,
.dark #app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:nth-child(2)
  button {
  background: rgb(255 255 255 / 6%) !important;
  border-color: rgb(255 255 255 / 10%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.dark #app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:nth-child(2)
  > a:hover,
.dark #app aside.bg-n-background.fixed.top-0.z-40
  > section:first-of-type
  > div:nth-child(2)
  button:hover,
.dark #app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button']:hover,
.dark #app aside.bg-n-background.fixed.top-0.z-40 nav li.child-item > a:hover,
.dark #app aside.bg-n-background.fixed.top-0.z-40
  > section:last-of-type
  button:hover {
  color: rgb(var(--tera-sidebar-white)) !important;
  background: rgb(255 255 255 / 9%) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
}

.dark #app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button']
  > div.relative:first-child {
  color: rgb(var(--tera-sidebar-white) / 82%);
  background: rgb(255 255 255 / 8%);
}

.dark #app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button'].bg-n-alpha-2,
.dark #app aside.bg-n-background.fixed.top-0.z-40
  > nav
  > ul
  > li
  > [role='button'].text-n-slate-12.font-medium {
  color: rgb(255 255 255 / 94%) !important;
  background: rgb(255 255 255 / 10%) !important;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 8%),
    0 6px 18px rgb(0 0 0 / 13%);
}

.dark #app aside.bg-n-background.fixed.top-0.z-40 nav li.child-item > a.active {
  color: rgb(255 255 255 / 96%) !important;
  background: rgb(var(--tera-sidebar-cyan) / 15%) !important;
}

.dark #app aside.bg-n-background.fixed.top-0.z-40
  > section:last-of-type
  > div:last-of-type {
  border-color: rgb(255 255 255 / 8%) !important;
  background: rgb(var(--tera-sidebar-midnight) / 54%);
  box-shadow: 0 -8px 26px rgb(0 0 0 / 14%);
}

/* Mantém a navegação confortável em telas compactas. */
@media (max-width: 767px) {
  #app aside.bg-n-background.fixed.top-0.z-40 {
    box-shadow: 18px 0 48px rgb(var(--tera-sidebar-midnight) / 22%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #app aside.bg-n-background.fixed.top-0.z-40 *,
  #app aside.bg-n-background.fixed.top-0.z-40 *::before,
  #app aside.bg-n-background.fixed.top-0.z-40 *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}