/**
 * Manic Pixels Web OS — touch.css
 * Estilos para dispositivos touch / mobile.
 * Sprint 9 — Touch/Mobile
 */

/* ── Botão de teclado virtual ─────────────────────────────────────────────── */

#mp-vkb-btn {
  position: fixed;
  bottom: calc(var(--mp-taskbar-height, 44px) + 14px);
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mp-window-bg, rgba(30, 32, 48, 0.95));
  border: 1px solid var(--mp-window-border, rgba(255,255,255,0.12));
  color: var(--mp-surface-fg, #e8e8f0);
  display: none;            /* oculto por padrão; CSS touch o exibe */
  align-items: center;
  justify-content: center;
  z-index: 10001;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

#mp-vkb-btn:active {
  transform: scale(0.92);
  background: rgba(var(--mp-accent-rgb, 61,174,233), 0.18);
}

#mp-vkb-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Input oculto para o teclado nativo */
#mp-vkb-hidden {
  position: fixed;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ── Media query: pointer grosseiro (touch) ───────────────────────────────── */

@media (pointer: coarse) {
  /* Exibe o botão de teclado virtual */
  #mp-vkb-btn {
    display: flex;
  }

  /* Botões de controle de janela — maior área de toque */
  .mp-btn-minimize,
  .mp-btn-maximize,
  .mp-btn-close {
    width: 28px !important;
    height: 28px !important;
  }

  /* Itens do Quick Access — maior área de toque */
  .mp-qa-item {
    min-height: 40px;
    padding: 8px 12px;
  }

  /* Itens do Explorer em modo lista/details — mais altura */
  .mp-view-list .mp-item {
    min-height: 38px;
    padding: 5px 10px;
  }

  .mp-view-details .mp-item {
    height: 38px;
  }

  /* Barra de pesquisa do Explorer — mais alta */
  .mp-explorer-search {
    height: 34px !important;
  }

  /* Taskbar items */
  .mp-taskbar-item {
    min-height: 40px;
  }

  /* Desktop icons — maior área de toque */
  .mp-desktop-icon {
    min-width: 84px;
    min-height: 84px;
  }
}

/* ── Classe html.mp-touch (adicionada pelo TouchManager.init) ─────────────── */

html.mp-touch {
  /* Evita double-tap zoom em elementos interativos */
  touch-action: manipulation;
}

html.mp-touch button,
html.mp-touch [role="button"],
html.mp-touch .mp-item,
html.mp-touch .mp-desktop-icon {
  -webkit-tap-highlight-color: transparent;
}

/* Impede seleção de texto acidental durante swipe */
html.mp-touch #mp-workspace,
html.mp-touch #mp-taskbar {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Skip Navigation (acessibilidade geral) ───────────────────────────────── */

.mp-skip-nav {
  position: fixed;
  top: -100px;
  left: 8px;
  z-index: 99999;
  padding: 8px 18px;
  background: var(--mp-accent, #3daee9);
  color: #ffffff;
  border-radius: 0 0 6px 6px;
  font-family: var(--mp-font-ui, 'Noto Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.mp-skip-nav:focus {
  top: 0;
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: -2px;
}