/* === BOTÃO VOLTAR DINÂMICO ===
   Mesmo chrome da área de navegação (.nav-icon):
   --mobile-button-size · radius 12 · ícone --chrome-icon-fs */

back-button:not(:defined) {
  display: none;
}

/* O host não entra no flex do header — o <button> é inserido à parte. */
back-button {
  display: contents;
}

.back-button {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mobile-button-size, 40px);
  height: var(--mobile-button-size, 40px);
  min-width: var(--mobile-button-size, 40px);
  min-height: var(--mobile-button-size, 40px);
  padding: 0;
  background: var(--surface-nested);
  border: none;
  border-radius: var(--chrome-button-radius, 12px);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.back-button > i {
  color: var(--text-primary);
  font-size: var(--chrome-icon-fs, 1.2rem);
  line-height: 1;
}

@media (hover: hover) {
  .back-button:hover:not(:disabled) {
  background: var(--surface-nested);
  color: var(--primary);
  box-shadow: none;
  transform: translateY(-50%);
}
}

@media (hover: hover) {
  .back-button:hover:not(:disabled) > i {
  color: var(--primary);
}
}

.back-button:active:not(:disabled) {
  transform: translateY(-50%);
}

.back-button:disabled,
.back-button.navigating {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.back-button.navigating i {
  animation: spin 1s linear infinite;
}

.back-button i[style*="animation: none"],
.back-button[style*="animation: none"] i {
  animation: none !important;
  transform: none !important;
}

.back-button:not(.navigating) i {
  animation: none !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.back-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Mesmo chrome do Voltar das páginas, sem o position absolute do header. */
.back-button.back-button--inline {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex-shrink: 0;
  border: 1px solid var(--toolbar-btn-border, var(--border, #2a3645));
  background: var(--toolbar-btn-bg, var(--subcard, #1b2128));
  border-radius: var(--toolbar-btn-radius, 8px);
}


.back-button.back-button--inline:active:not(:disabled) {
  transform: none !important;
}
@media (hover: hover) {
  .back-button.back-button--inline:hover:not(:disabled) {
  transform: none !important;
}
}

.back-button.back-button--inline.hidden,
.back-button.back-button--inline[hidden] {
  display: none !important;
}

@media screen and (max-width: 480px) {
  .back-button {
    left: 10px;
  }
}

@media screen and (max-width: 360px) {
  .back-button {
    left: 5px;
  }
}