/* ============================================================
   DEFESA EXPRESS - PWA NATIVE LAYER (app-shell / touch / safe-area)
   Camada global aplicada via <link> em todas as páginas.
   Objetivo: eliminar atrasos e comportamentos de navegador móvel,
   dando sensação de aplicativo nativo.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOQUE NATIVO (Touch & Feel)
   ------------------------------------------------------------ */

/* Elimina o tap-delay de ~300ms: navegadores mobile antigos esperavam
   para distinguir tap de double-tap. touch-action: manipulation avisa
   que NÃO haverá duplo-toque/drag naquele elemento → resposta imediata. */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none !important;
  /* Alturas de viewport reais em mobile (evita "salto" com barra de URL) */
  height: 100%;
}

body {
  /* Impede seleção acidental em elementos interativos e texto de UI */
  -webkit-user-select: none;
  user-select: none;
  /* NOTA: NÃO usar overscroll-behavior:none aqui — o body dos editores é um
     container overflow-y:auto que precisa repassar a roda ao scroller raiz.
     O overscroll do root (html) já mata o rubber-band/clarão. */
  width: 100%;
  margin: 0;
  overflow-x: clip !important;
}

/* Trava total da página (sensação de app): aplica APENAS quando a página
   declara a classe .de-app-locked (chat fullscreen, modais, etc.).
   Sem ela, a rolagem normal do site é preservada. */
body.de-app-locked {
  position: fixed;
  inset: 0 auto auto 0;
  overflow: hidden;
}

/* Áreas que DEVEM rolar (chat, formulários, listas): apenas estas
   rolam internamente, sem propagar overscroll para a página. */
.de-scrollable,
[data-native-scroll],
.chat-messages,
.defesa-form-scroll,
.app-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  -webkit-user-select: text;
  user-select: text;
}

/* Reabilita a rolagem da página quando o app-shell for ativado */
.de-app-scroll,
body.de-app-locked.de-app-scroll {
  position: static;
  overflow-y: auto;
}

/* ------------------------------------------------------------
   1.1 SEGURANÇA DE ROLAGEM MOBILE (anti-travamento global)
   No mobile, html/body NUNCA podem ficar com altura travada
   (100vh) ou overflow oculto — isso congela a rolagem vertical
   da página inteira. Regras com mais especificidade continuam
   valendo para modais de tela cheia (body.de-app-locked, etc.).
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  html {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    overflow-x: clip !important;
  }

  body:not(.de-app-locked) {
    height: auto !important;
    min-height: 100vh; min-height: 100dvh;
    overflow: visible !important;
  }
}

/* Texto selecionável onde faz sentido (ex.: códigos, respostas do chat) */
input,
textarea,
[contenteditable="true"],
.de-selectable {
  -webkit-user-select: text;
  user-select: text;
}

/* ------------------------------------------------------------
   2. SAFE AREAS (notch / ilha dinâmica / barra de gestos)
   ------------------------------------------------------------ */

/* Tokens reutilizáveis com fallback seguro (0 em navegadores sem suporte) */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --app-bar-h: 56px;
  --app-nav-h: 64px;
}

/* Barra fixa do topo (navbar): desce abaixo do notch/ilha dinâmica */
body {
  padding-top: var(--sat);
}

.fixed-top,
.navbar,
.topbar,
[data-native-fixed-top] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: var(--sat);
  z-index: 1000;
}

/* Navbars com altura própria: somam a safe area à altura da barra */
.fixed-top,
.navbar {
  height: calc(var(--app-bar-h) + var(--sat));
}

/* Barras de navegação inferior (bottom nav): sobem acima da barra de gestos */
.fixed-bottom,
.bottom-nav,
.bottom-bar,
[data-native-fixed-bottom] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: var(--sab);
  z-index: 1000;
}

/* Botões flutuantes de CTA (FAB): nunca ficam sobre a barra de gestos */
.fab,
.fab-btn,
.floating-cta,
[data-native-fab] {
  bottom: calc(20px + var(--sab));
}

/* Conteúdo com rolagem interna sob barras fixas */
.de-app-shell {
  position: fixed;
  inset: calc(var(--sat)) 0 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Padding lateral em aparelhos com sensores (dobráveis / landscape) */
@media (horizontal-viewport-segments: 2) {
  body {
    padding-left: var(--sal);
    padding-right: var(--sar);
  }
}

/* ------------------------------------------------------------
   3. VIEWPORT / ALTURA DINÂMICA
   ------------------------------------------------------------ */

/* dvh/svh: altura real da área visível (soma/subtrai barra de URL). */
.de-viewport-height,
[data-native-viewport] {
  height: 100dvh;
  min-height: 100svh;
}

/* Fallback para navegadores antigos */
@supports not (height: 100dvh) {
  .de-viewport-height,
  [data-native-viewport] {
    height: 100vh;
  }
}

/* ------------------------------------------------------------
   4. SKELETON SCREEN (App Shell)
   ------------------------------------------------------------ */

.skeleton,
.skeleton-line,
.skeleton-circle,
.skeleton-block {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.skeleton::after,
.skeleton-line::after,
.skeleton-circle::after,
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.12) 50%,
    transparent 100%
  );
  animation: de-shimmer 1.4s ease-in-out infinite;
}

@keyframes de-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-circle {
  border-radius: 50%;
}

/* Variações de tamanho utilitárias */
.skeleton-h-12 { height: 12px; }
.skeleton-h-16 { height: 16px; }
.skeleton-h-20 { height: 20px; }
.skeleton-h-24 { height: 24px; }
.skeleton-h-32 { height: 32px; }
.skeleton-h-48 { height: 48px; }
.skeleton-h-64 { height: 64px; }
.skeleton-w-20 { width: 20%; }
.skeleton-w-40 { width: 40%; }
.skeleton-w-60 { width: 60%; }
.skeleton-w-80 { width: 80%; }
.skeleton-w-100 { width: 100%; }

/* ============================================================
   MEDIA QUERY: REDUZIR ANIMAÇÕES (acessibilidade)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after,
  .skeleton-line::after,
  .skeleton-circle::after,
  .skeleton-block::after {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}