/* Patch mobile — Meu personagem: topo compacto + scroll só no painel (jul/2026) */
@media (max-width: 767px) {
  .vf-avatar-picker {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .vf-avatar-picker__header {
    grid-row: 1;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 8px !important;
  }

  .vf-avatar-picker__subtitle {
    display: none !important;
  }

  .vf-avatar-picker__title-wrap h1 {
    font-size: 16px !important;
  }

  .vf-avatar-picker__title-icon {
    display: none !important;
  }

  .vf-avatar-picker__back {
    padding: 6px 10px 6px 6px !important;
    font-size: 12px !important;
    margin-top: 0 !important;
  }

  .vf-avatar-picker__header-spacer {
    width: 56px !important;
  }

  .vf-avatar-picker__body {
    display: contents !important;
  }

  .vf-avatar-picker__stage {
    grid-row: 2;
    position: static !important;
    flex-shrink: 0 !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    padding: 10px 12px 12px !important;
  }

  .vf-avatar-picker__stage-preview-block {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: auto !important;
  }

  .vf-avatar-picker__stage-tools {
    display: none !important;
  }

  .vf-avatar-picker__preview-ring {
    width: 96px !important;
    height: 96px !important;
  }

  .vf-avatar-picker__stage-actions {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    margin-top: 0 !important;
    gap: 8px !important;
    max-width: none !important;
    width: 100% !important;
    align-self: center !important;
  }

  .vf-avatar-picker__nickname input {
    padding: 10px 12px !important;
    font-size: 15px !important;
  }

  .vf-avatar-picker__nickname small {
    font-size: 10px !important;
  }

  .vf-avatar-picker__panel {
    grid-row: 3 !important;
    flex: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 14px 8px !important;
  }

  .vf-avatar-picker__grid-scroll {
    max-height: none !important;
    overflow: visible !important;
    padding: 8px !important;
  }

  .vf-avatar-picker__footer {
    grid-row: 4 !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 767px) and (max-height: 700px) {
  .vf-avatar-picker__header {
    padding-bottom: 6px !important;
  }

  .vf-avatar-picker__title-wrap h1 {
    font-size: 15px !important;
  }

  .vf-avatar-picker__stage {
    padding: 8px 10px 10px !important;
    column-gap: 10px !important;
  }

  .vf-avatar-picker__preview-ring {
    width: 84px !important;
    height: 84px !important;
  }

  .vf-avatar-picker__section-head p {
    font-size: 13px !important;
  }
}

/* vf-aluno-avatar-picker-contrast-v1 — painel verde: textos brancos (jul/2026) */
.vf-avatar-picker {
  --vf-ap-on-green: #fff !important;
  --vf-ap-on-green-muted: rgba(255, 255, 255, 0.88) !important;
  color: #fff !important;
}

.vf-avatar-picker__panel,
.vf-avatar-picker__panel .vf-avatar-picker__section--customize-colors,
.vf-avatar-picker__panel .vf-avatar-picker__customize-sub,
.vf-avatar-picker__panel .vf-avatar-picker__section-head h2,
.vf-avatar-picker__panel .vf-avatar-picker__customize-sub h3,
.vf-avatar-picker__panel .vf-avatar-picker__section-head p,
.vf-avatar-picker__section-head h2,
.vf-avatar-picker__section-head p,
.vf-avatar-picker__customize-sub h3 {
  color: #fff !important;
}

.vf-avatar-picker__panel .vf-avatar-picker__section-head h2,
.vf-avatar-picker__panel .vf-avatar-picker__customize-sub h3,
.vf-avatar-picker__section-head h2,
.vf-avatar-picker__customize-sub h3 {
  color: rgba(255, 255, 255, 0.88) !important;
}

.vf-avatar-picker__color-label,
.vf-avatar-picker__swatch-label {
  color: rgba(255, 255, 255, 0.85) !important;
}

.vf-avatar-picker__tab:not(.is-active) {
  color: rgba(255, 255, 255, 0.85) !important;
}

.vf-avatar-picker__vibe:not(.is-active) {
  color: #fff !important;
}

.vf-avatar-picker__footer {
  background: rgba(45, 74, 34, 0.96) !important;
  border-top-color: rgba(255, 255, 255, 0.14) !important;
}