/*
 * Dock inferior — barra gradiente lime→ciano (referência Figma); tab ativa 56×64 em pill por cima da barra.
 */
html[data-theme="lobby"] main.lobby-with-fixed-dock,
html[data-theme="lobby"] .main-with-fixed-dock {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 8px);
}

#cacheta-lobby-dock.dock.dock--fixed {
  position: fixed;
  inset-inline: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 60;
  width: 100%;
  max-width: none;
  min-height: 68px;
  height: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 6px max(10px, env(safe-area-inset-right, 0px)) 3px
    max(10px, env(safe-area-inset-left, 0px));
  padding-bottom: 0px;
  opacity: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  overflow: visible;
  background: var(
    --cx-dock-footer-grad,
    linear-gradient(360deg, #1cafaa 0%, #8db80f 100%)
  );
  border: none;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Previews / variantes sem --fixed */
.dock:not(.dock--fixed) {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  background: var(
    --cx-dock-footer-grad,
    linear-gradient(360deg, #1cafaa 0%, #8db80f 100%)
  );
  border: none;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 6px 12px 6px;
}

#cacheta-lobby-dock.dock > turbo-frame {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

#cacheta-lobby-dock.dock > turbo-frame#lobby_dock_button_frame {
  background: linear-gradient(180deg, #a6d90f 0%, #03f3eb 100%);
  margin-bottom: 0;
  border-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: 78px;
  margin-top: -20px;
}

#cacheta-lobby-dock.dock
  > turbo-frame#lobby_dock_button_frame
  span.dock-label
  > span {
  font-weight: 700;
}

/* Inativos: texto escuro sobre gradiente claro da barra */
#cacheta-lobby-dock.dock .dock-label {
  color: #031207;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 11px;
  text-align: center;
  line-height: 13px;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cacheta-lobby-dock.dock .dock-tab.tab--active .dock-label,
#cacheta-lobby-dock.dock a.dock-tab.tab--active .dock-label {
  color: #031207;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0;
}

#cacheta-lobby-dock.dock a.dock-tab {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

#cacheta-lobby-dock.dock .dock-tab,
#cacheta-lobby-dock.dock a.dock-tab {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  box-sizing: border-box;
  min-width: 0;
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.22s ease;
}

#cacheta-lobby-dock.dock .dock-tab.tab--active,
#cacheta-lobby-dock.dock a.dock-tab.tab--active {
  position: relative;
  z-index: 5;
  box-sizing: border-box;
  width: 56px;
  height: 64px;
  min-width: 56px;
  min-height: 64px;
  max-width: 56px;
  flex-shrink: 0;
  padding: 4px 3px 5px;
  overflow: visible;
  justify-content: space-between;
  gap: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* Pill claro: ciano → limão (destaque único na barra escura) */
  background: linear-gradient(
    105deg,
    var(--cx-accent-cyan, #03f3eb) 0%,
    var(--cx-accent-lime, #a6d90f) 100%
  );
  /* Sobe bem acima da barra — como no print */
  transform: translateY(-10px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 -2px 10px rgba(0, 40, 18, 0.12),
    0 10px 24px rgba(0, 40, 18, 0.35);
}

#cacheta-lobby-dock.dock .dock-tab__icon {
  display: block;
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  transition:
    opacity 0.18s ease,
    width 0.2s ease,
    height 0.2s ease,
    max-width 0.2s ease,
    max-height 0.2s ease;
}

#cacheta-lobby-dock.dock .dock-tab.tab--active .dock-tab__icon,
#cacheta-lobby-dock.dock a.dock-tab.tab--active .dock-tab__icon {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  margin-top: -1px;
  flex-shrink: 0;
}

/*
 * Hover dos ícones: NÃO usar só @media (hover: hover) — em PWA/WebView/tablet com
 * ponteiro “coarse” como primário esse media é falso e o efeito some por completo.
 * turbo-frame:hover: com pointer sobre o botão/link (descendente), o frame também
 * está em hover no CSS, alargando a zona útil.
 */
#cacheta-lobby-dock.dock
  > turbo-frame:hover
  .dock-tab:not(.tab--active)
  .dock-tab__icon,
#cacheta-lobby-dock.dock
  > turbo-frame:hover
  a.dock-tab:not(.tab--active)
  .dock-tab__icon,
#cacheta-lobby-dock.dock .dock-tab:hover:not(.tab--active) .dock-tab__icon,
#cacheta-lobby-dock.dock a.dock-tab:hover:not(.tab--active) .dock-tab__icon {
  opacity: 0.92;
  width: 46px;
  height: 46px;
  max-width: 46px;
  max-height: 46px;
}

#cacheta-lobby-dock.dock
  > turbo-frame:hover
  .dock-tab.tab--active
  .dock-tab__icon,
#cacheta-lobby-dock.dock
  > turbo-frame:hover
  a.dock-tab.tab--active
  .dock-tab__icon,
#cacheta-lobby-dock.dock .dock-tab.tab--active:hover .dock-tab__icon,
#cacheta-lobby-dock.dock a.dock-tab.tab--active:hover .dock-tab__icon {
  width: 38px;
  height: 38px;
  max-width: 38px;
  max-height: 38px;
}

#cacheta-lobby-dock.dock .dock-tab:active:not(.tab--active) .dock-tab__icon,
#cacheta-lobby-dock.dock a.dock-tab:active:not(.tab--active) .dock-tab__icon {
  opacity: 0.88;
}

/*
 * Classe no <img> (dock-tab__icon--nudge) — não depende só do pai; !important evita
 * utilitários Tailwind/Daisy e garante que o ajuste apareça após rebuild do CSS.
 * 1px: alinhamento óptico leve (CARTAS + headset); subir/descer: editar só este valor.
 */
#cacheta-lobby-dock.dock img.dock-tab__icon--nudge {
  transform: translateY(1px) !important;
}

/* Ativo: sem nudge extra no ícone — alinhamento do pill */
#cacheta-lobby-dock.dock .dock-tab.tab--active img.dock-tab__icon--nudge,
#cacheta-lobby-dock.dock a.dock-tab.tab--active img.dock-tab__icon--nudge {
  transform: none !important;
}