/* LEAL3D_V63_REV15_CORRECAO_EDITOR_JANELA_SCROLLBAR */

/* ============================================================
   SCROLLBARS FIXAS E DISCRETAS
   ============================================================ */

html,
html body,
html body * {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(113, 113, 122, .66) transparent !important;
}

html::-webkit-scrollbar,
html body::-webkit-scrollbar,
html body *::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

/* A scrollbar da janela das etapas possui largura própria e editável. */
.l3d-workflow-scroll-body::-webkit-scrollbar {
  width: var(--l3d-scrollbar-width, 4px) !important;
}

html::-webkit-scrollbar-button,
html body::-webkit-scrollbar-button,
html body *::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html::-webkit-scrollbar-track,
html body::-webkit-scrollbar-track,
html body *::-webkit-scrollbar-track {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
}

html::-webkit-scrollbar-thumb,
html body::-webkit-scrollbar-thumb,
html body *::-webkit-scrollbar-thumb {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(113, 113, 122, .66) !important;
  background-clip: padding-box !important;
}

.l3d-workflow-scroll-body::-webkit-scrollbar-thumb {
  border-radius: var(--l3d-scrollbar-radius, 999px) !important;
}

html::-webkit-scrollbar-thumb:hover,
html body::-webkit-scrollbar-thumb:hover,
html body *::-webkit-scrollbar-thumb:hover {
  background: rgba(82, 82, 91, .90) !important;
}

/* ============================================================
   JANELA FIXA DAS ETAPAS
   ============================================================ */

@media (min-width: 1280px) {
  .workspace > .workflow,
  #chaveirosWorkspace > .kc-workflow {
    position: relative !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .workflow > .workflow-section-title,
  .kc-workflow > .workflow-section-title {
    position: absolute !important;
    z-index: 4 !important;
    top: var(--l3d-title-top, 20px) !important;
    left: var(--l3d-title-left, 20px) !important;
    right: var(--l3d-title-right, 20px) !important;
    width: auto !important;
    height: var(--l3d-title-height, 39px) !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /*
    Quando o alinhamento do editor estiver à esquerda, o texto começa
    exatamente na borda esquerda desta faixa, sem recuo adicional.
  */
  .workflow > .workflow-section-title,
  .kc-workflow > .workflow-section-title {
    text-indent: 0 !important;
  }

  /*
    Esta é a janela fixa indicada no rascunho. Sua geometria nunca depende
    da quantidade de conteúdo: ela copia o palco do preview ao lado.
  */
  .l3d-workflow-window {
    position: absolute !important;
    z-index: 2 !important;
    top: var(--l3d-window-top, 71px) !important;
    right: var(--l3d-window-right, 20px) !important;
    bottom: var(--l3d-window-bottom, 20px) !important;
    left: var(--l3d-window-left, 20px) !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: var(--radius-lg) !important;
  }

  /*
    O viewport de rolagem tem a altura exata da janela, mas se estende
    horizontalmente só até o centro do corredor direito para posicionar
    ali a scrollbar nativa de 4px.
  */
  .l3d-workflow-window > .l3d-workflow-scroll-body {
    position: absolute !important;
    inset-block: 0 !important;
    left: 0 !important;
    right: calc(-1 * var(--l3d-scroll-extension, 12px)) !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /*
    O conteúdo fica dentro da janela fixa e recebe exatamente o mesmo
    afastamento do grupo Topo/Costas/Lado em relação ao palco do preview.
  */
  .l3d-workflow-sessions {
    box-sizing: border-box !important;

    /*
      O scroll viewport se estende até a scrollbar, mas este container visual
      mantém exatamente a largura da janela. Assim, não existe uma segunda
      margem escondida somada ao padding direito.
    */
    width: calc(100% - var(--l3d-scroll-extension, 12px)) !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding:
      var(--l3d-window-padding-top, 12px)
      var(--l3d-window-padding-right, 12px)
      var(--l3d-window-padding-bottom, 12px)
      var(--l3d-window-padding-left, 12px) !important;
    background: transparent;
  }

  .l3d-workflow-window[data-l3d-ve-container-key="workflow-steps-container"] {
    padding: 0 !important;
    margin: 0 !important;
  }

  .l3d-workflow-sessions > .session:first-child,
  .l3d-workflow-sessions > .kc-session:first-child {
    margin-top: 0 !important;
  }

  .l3d-workflow-sessions > .session:last-child,
  .l3d-workflow-sessions > .kc-session:last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 1279.98px) {
  .workspace > .workflow,
  #chaveirosWorkspace > .kc-workflow {
    position: static !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .workflow > .workflow-section-title,
  .kc-workflow > .workflow-section-title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 12px !important;
  }

  .l3d-workflow-window,
  .l3d-workflow-window > .l3d-workflow-scroll-body {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .l3d-workflow-sessions {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}