/* Distribuição do desktop conforme a referência: marca no alto e menu ao centro. */
@media (min-width: 769px) {
  .side-nav {
    padding: 170px 20px;
    gap: 20px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav > .nav-opt,
  .side-nav > .nav-item-group { flex-shrink: 0; }
  .side-nav > .spot-home-nav { margin-top: auto; }
  .side-nav > .nav-opt:has(+ .side-brand),
  .side-nav > .nav-item-group:has(+ .side-brand) { margin-bottom: auto; }
  .side-nav .side-brand,
  .side-nav:hover .side-brand {
    position: fixed;
    left: 28px;
    top: 142px;
    bottom: auto;
    width: 110px;
    height: 22px;
    transform: rotate(-90deg);
    transform-origin: left top;
    opacity: .75;
  }
}

/* Menu compacto: 3 menus reais no máximo (Início + 2 módulos). O botão de 4 quadradinhos é apenas o acesso a "Outros módulos" e não entra na contagem. */
@media (min-width: 769px) {
  .side-nav > .spot-nav-more {
    position: relative;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px;
    min-width: 40px;
    flex-shrink: 0;
    /* O botão "Outros módulos" passa a ser a última entrada visível.
       Ele precisa receber o auto-margin inferior para que o bloco
       Início + 2 módulos + botão Outros permaneça realmente centralizado. */
    margin-bottom: auto;
  }

  .spot-nav-more-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    width: 40px;
    min-width: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
  }

  .spot-nav-more-button .icon-box {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 38px;
    width: 38px;
    min-height: 38px;
    height: 38px;
    background: #EEF0F1;
  }

  /* No estado recolhido, o texto some, mas o ícone de quatro quadradinhos
     continua sempre visível como na referência. */
  .side-nav:not(:hover) .spot-nav-more-button > span:not(.icon-box) {
    opacity: 0 !important;
  }

  .spot-nav-more-empty {
    padding: 10px 8px 8px;
    font-size: 12px;
    line-height: 1.35;
    color: #7b7f83;
  }

  .spot-nav-more-button .spot-more-grid-icon {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }

  .spot-nav-more-button.spot-more-open .icon-box,
  .spot-nav-more-button.current-section .icon-box {
    background: #171717;
    color: #fff;
    border-color: #171717;
  }

  .spot-nav-more-button.spot-more-open .icon-box svg,
  .spot-nav-more-button.current-section .icon-box svg {
    stroke: #fff;
  }

  .spot-nav-more-panel {
    display: none;
    position: fixed;
    z-index: 10050;
    max-height: min(70vh, 620px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(18, 18, 18, .08);
    border-radius: 18px;
    background: rgba(238, 240, 241, .98);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .13);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    scrollbar-width: none;
  }

  .spot-nav-more-panel::-webkit-scrollbar { display: none; }
  .spot-nav-more.open > .spot-nav-more-panel { display: block; }

  .spot-nav-more-panel-title {
    padding: 4px 7px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7b7f83;
  }

  .spot-nav-more-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .spot-nav-more-panel .nav-opt {
    min-height: 46px;
    padding: 4px 7px;
    border-radius: 13px;
    gap: 12px;
    opacity: 1;
  }

  .spot-nav-more-panel .nav-opt:hover {
    background: rgba(255, 255, 255, .55);
  }

  .spot-nav-more-panel .nav-opt .icon-box {
    min-width: 36px;
    min-height: 36px;
    border-radius: 11px;
  }

  .spot-nav-more-panel .nav-opt > span,
  .side-nav:hover .spot-nav-more-panel .nav-opt > span {
    opacity: 1;
    white-space: normal;
    line-height: 1.2;
  }

  .spot-nav-more-panel .chevron,
  .side-nav:hover .spot-nav-more-panel .chevron {
    opacity: .72;
  }

  .spot-nav-more-panel .nav-submenu {
    padding-left: 54px;
    gap: 4px;
  }

  .spot-nav-more-panel .nav-submenu.open {
    max-height: 520px;
    margin-top: 3px;
    margin-bottom: 7px;
  }

  .spot-nav-more-panel .nav-sub-opt {
    min-height: 36px;
    padding: 4px 8px;
    border-radius: 10px;
  }

  .spot-nav-more-panel .nav-sub-opt:hover {
    background: rgba(255, 255, 255, .52);
  }

  .spot-nav-more-panel .nav-sub-opt span,
  .side-nav:hover .spot-nav-more-panel .nav-sub-opt span {
    opacity: 1;
  }

  .spot-nav-more-panel .nav-opt.current-page,
  .spot-nav-more-panel .nav-opt.current-section {
    background: #171717;
  }
}

/* Chat e Manual fazem parte da própria navbar também no desktop.
   Eles permanecem no rodapé e usam exatamente o mesmo trilho horizontal dos
   itens principais: recolhido = só ícone; expandido = ícone + texto. */
@media (min-width: 769px) {
  .side-nav > .side-bottom-tools {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 18px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    z-index: 10001;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Não desloca o bloco quando a navbar cresce. A largura acompanha o próprio
     aside, da mesma forma que os menus centrais. */
  .side-nav:hover > .side-bottom-tools {
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
  }

  .side-nav > .side-bottom-tools .side-tool-nav {
    width: 100% !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text-main) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    box-shadow: none;
  }

  .side-nav > .side-bottom-tools .side-tool-nav:hover {
    opacity: .7 !important;
  }

  .side-nav > .side-bottom-tools .side-tool-icon {
    min-width: 38px !important;
    width: 38px !important;
    min-height: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 12px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .side-nav > .side-bottom-tools .side-tool-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex: 0 0 auto !important;
  }

  /* Estado recolhido: os botões continuam no lugar; apenas o texto fica
     oculto. Isso evita o salto horizontal visto ao expandir. */
  .side-nav > .side-bottom-tools .side-tool-label {
    display: block !important;
    flex: 0 0 auto !important;
    max-width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--text-main) !important;
    transform: none !important;
    transition: opacity .18s ease, max-width .3s cubic-bezier(.4,0,.2,1) !important;
    pointer-events: none !important;
  }

  /* Estado expandido: usa exatamente a mesma posição de texto dos menus
     superiores (38px do ícone + 15px de gap). */
  .side-nav:hover > .side-bottom-tools .side-tool-label {
    max-width: 150px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: .08s !important;
  }

  /* Se Chat ou Manual estiver ativo, o destaque ocupa a mesma faixa dos
     demais itens da navbar. */
  .side-nav > .side-bottom-tools .side-tool-nav.current-page,
  .side-nav > .side-bottom-tools .side-tool-nav.current-section {
    background: #171717 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  .side-nav > .side-bottom-tools .side-tool-nav.current-page .side-tool-icon,
  .side-nav > .side-bottom-tools .side-tool-nav.current-section .side-tool-icon {
    background: transparent !important;
    color: #fff !important;
    border-color: transparent !important;
  }

  .side-nav > .side-bottom-tools .side-tool-nav.current-page .side-tool-label,
  .side-nav > .side-bottom-tools .side-tool-nav.current-section .side-tool-label {
    color: #8B8B8B !important;
  }

  /* Chat e Manual são menus permanentes: não desaparecem quando um módulo ou
     a conta é aberto. */
  body:has(.floating-window.active:not(.is-minimized)) .side-nav > .side-bottom-tools,
  html.spot-account-open .side-nav > .side-bottom-tools {
    display: flex !important;
  }
}

/* Os atalhos usam o mesmo estado de página dos módulos. */
@media (min-width: 769px) {
  .side-nav #spot-chat-open[aria-current="page"],
  .side-nav #nav-manual[aria-current="page"] {
    background: #171717 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  .side-nav #spot-chat-open[aria-current="page"] .side-tool-icon,
  .side-nav #nav-manual[aria-current="page"] .side-tool-icon {
    background: transparent !important;
    color: #fff !important;
    border-color: transparent !important;
  }
  .side-nav #spot-chat-open[aria-current="page"] svg,
  .side-nav #nav-manual[aria-current="page"] svg { stroke: #fff !important; }
  .side-nav #spot-chat-open[aria-current="page"] .side-tool-label,
  .side-nav #nav-manual[aria-current="page"] .side-tool-label { color: #8B8B8B !important; }
}

@media (min-width: 769px) {
  .side-nav > .spot-nav-page-hidden { display: none !important; }
  .spot-nav-more-button:disabled { cursor: default; }
}

@media (min-width: 769px) {
  .spot-module-search-panel { max-height: min(620px, 80vh); }
  .spot-module-search { display:block; width:100%; min-height:42px; padding:10px 12px; margin-bottom:10px; border:1px solid #c9cdcf; border-radius:11px; background:#fff; color:#171717; font:inherit; font-size:13px; }
  .spot-module-results { display:flex; flex-direction:column; gap:5px; }
  .spot-module-result { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:10px; border:0; border-radius:11px; background:transparent; color:#171717; text-align:left; font:inherit; font-size:13px; cursor:pointer; }
  .spot-module-result:hover, .spot-module-result:focus-visible { background:#dce1e3; }
  .spot-module-result[aria-current="page"] { background:#171717; color: #8B8B8B; }
  .spot-module-result > svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; }
  .spot-module-result > svg.spot-catalog-icon { fill:currentColor; stroke:none; }
  .spot-module-result > span { white-space:normal; line-height:1.35; }
  .spot-module-search-panel .spot-nav-more-empty[hidden] { display:none; }
}

/* Outros módulos acompanha a expansão da navbar sem atraso ou blur. */
@media (min-width:769px) {
  .side-nav { transition:width .2s cubic-bezier(.4,0,.2,1), background-color .2s; }
  .spot-module-search-panel {
    box-sizing:border-box;
    width:min(340px, calc(100vw - 24px));
    background:#EEF0F1;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:none;
  }
}


/* v70 — Outros módulos com a mesma largura da navbar e conteúdo em 2 colunas. */
@media (min-width: 769px) {
  .spot-module-search-panel {
    box-sizing: border-box !important;
    padding: 14px !important;
    border-radius: 15px !important;
    overflow-x: hidden !important;
  }

  .spot-module-search-panel .spot-nav-more-panel-title {
    margin: 0 !important;
    padding: 2px 4px 10px !important;
  }

  .spot-module-search-panel .spot-module-search {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px !important;
  }

  .spot-module-search-panel .spot-module-results {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 8px !important;
    width: 100% !important;
  }

  .spot-module-search-panel .spot-module-result {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 9px 10px !important;
  }

  .spot-module-search-panel .spot-module-result > span {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .spot-module-search-panel .spot-nav-more-empty {
    grid-column: 1 / -1 !important;
  }
}