/* OT2026 v1.40.11 — PWA UX: feedback, toque e pull-to-refresh */

/* Feedback visual imediato para ações de navegação. */
.ot-nav-progress{
  position:fixed;
  z-index:2600;
  top:0;
  left:0;
  right:0;
  height:3px;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  background:transparent;
  transition:opacity .12s ease;
}
.ot-nav-progress i{
  display:block;
  width:34%;
  height:100%;
  border-radius:999px;
  background:var(--primary);
  transform:translateX(-120%);
}
html.ot-nav-busy .ot-nav-progress{opacity:1}
html.ot-nav-busy .ot-nav-progress i{animation:otNavProgress 1.05s ease-in-out infinite}
@keyframes otNavProgress{
  0%{transform:translateX(-120%)}
  55%{transform:translateX(165%) scaleX(1.4)}
  100%{transform:translateX(330%) scaleX(.8)}
}

.ot-nav-feedback{
  position:fixed;
  z-index:2590;
  left:50%;
  top:calc(var(--safe-top) + 88px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  max-width:min(88vw,320px);
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface-elevated) 94%,transparent);
  color:var(--text);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  pointer-events:none;
  font-size:.78rem;
}
.ot-nav-feedback[hidden]{display:none!important}
.ot-nav-spinner{
  width:17px;height:17px;flex:0 0 17px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--primary) 24%,transparent);
  border-top-color:var(--primary);
  animation:otSpin .68s linear infinite;
}
@keyframes otSpin{to{transform:rotate(360deg)}}

/* Resposta tátil/visual mesmo antes de uma página começar a carregar. */
.btn:active,
.tool-button:active,
.mobile-bottom-nav a:active,
.header-dashboard-dropdown a:active,
.job-card a:active,
.state-chip:active{
  filter:brightness(.96);
  transform:scale(.985);
}

/* Header deve continuar sendo uma área interativa confiável no standalone/PWA. */
.site-header{isolation:isolate}
.site-header .header-inner,
.site-header .header-tools,
.site-header .tool-button,
.site-header .mobile-account-entry{
  pointer-events:auto;
}

/* Pull-to-refresh controlado: somente o JS do modo standalone o exibe. */
.ot-pull-refresh{
  --pull:0px;
  position:fixed;
  z-index:2550;
  left:50%;
  top:calc(var(--safe-top) + 8px);
  transform:translate(-50%,calc(-52px + var(--pull)));
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-elevated);
  color:var(--muted);
  box-shadow:var(--shadow-md);
  pointer-events:none;
  transition:transform .08s linear,opacity .12s ease;
  font-size:.7rem;
  opacity:.96;
}
.ot-pull-refresh[hidden]{display:none!important}
.ot-pull-refresh-icon{
  display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary);
  font-weight:900;font-size:13px;
  transition:transform .16s ease;
}
.ot-pull-refresh.is-armed{color:var(--text)}
.ot-pull-refresh.is-armed .ot-pull-refresh-icon{transform:rotate(180deg)}
.ot-pull-refresh.is-refreshing .ot-pull-refresh-icon{animation:otSpin .68s linear infinite}

html.ot-offline .ot-nav-progress i{background:var(--warning,#b87900)}

@media(max-width:800px){
  .ot-nav-feedback{top:calc(var(--safe-top) + 74px);font-size:.72rem;min-height:38px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
  .ot-nav-progress i,.ot-nav-spinner,.ot-pull-refresh.is-refreshing .ot-pull-refresh-icon{animation:none!important}
  .btn:active,.tool-button:active,.mobile-bottom-nav a:active,.header-dashboard-dropdown a:active,.job-card a:active,.state-chip:active{transform:none}
}