/* PTR: «потянуть вниз, чтобы обновить» — индикатор и статус соединения (ptr.js) */
.ptr-ind {
  position: fixed; left: 50%; top: calc(var(--vv-top, 0px) + env(safe-area-inset-top, 0px));
  width: 44px; height: 44px; margin-left: -22px; border-radius: 50%;
  background: #17201c; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 0 0 rgba(var(--accent-rgb), .0);
  display: grid; place-items: center; z-index: 2147483000; pointer-events: none;
  transform: translate3d(0, -64px, 0) scale(.6); opacity: 0;
  will-change: transform, opacity;
}
.ptr-ind.anim { transition: transform .38s cubic-bezier(.2, 1.4, .4, 1), opacity .25s ease; }
.ptr-ind svg { width: 26px; height: 26px; display: block; overflow: visible; }
.ptr-ind .ptr-track { stroke: rgba(255,255,255,.08); }
.ptr-ind .ptr-arc { stroke: var(--accent); stroke-linecap: round; transform-origin: 50% 50%; transition: stroke .2s; }
.ptr-ind .ptr-arrow { fill: var(--accent); transform-origin: 50% 50%; transition: transform .22s ease; }
.ptr-ind.armed { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 0 6px rgba(var(--accent-rgb), .14); }
.ptr-ind.armed .ptr-arrow { transform: rotate(180deg); }
.ptr-ind.loading svg { animation: ptr-spin .8s linear infinite; }
.ptr-ind.loading .ptr-arc { animation: ptr-dash 1.4s ease-in-out infinite; }
.ptr-ind.loading .ptr-arrow { opacity: 0; transform: scale(.2); }
.ptr-ind.ok { background: var(--accent); border-color: transparent; }
.ptr-ind.ok .ptr-arc, .ptr-ind.ok .ptr-track, .ptr-ind.ok .ptr-arrow { display: none; }
.ptr-ind.fail { background: #3a1416; border-color: rgba(239,68,68,.4); animation: ptr-shake .42s ease; }
.ptr-ind.fail .ptr-arc, .ptr-ind.fail .ptr-track, .ptr-ind.fail .ptr-arrow { display: none; }
.ptr-ind .ptr-done { display: none; }
.ptr-ind.ok .ptr-done.ok-i, .ptr-ind.fail .ptr-done.fail-i { display: block; }
.ptr-ind.ok .ptr-done path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: ptr-draw .35s .05s ease forwards; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@keyframes ptr-dash {
  0% { stroke-dasharray: 1, 60; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 40, 60; stroke-dashoffset: -12; }
  100% { stroke-dasharray: 40, 60; stroke-dashoffset: -55; }
}
@keyframes ptr-draw { to { stroke-dashoffset: 0; } }
@keyframes ptr-shake { 0%,100% { margin-left: -22px; } 20% { margin-left: -30px; } 40% { margin-left: -14px; } 60% { margin-left: -27px; } 80% { margin-left: -18px; } }

.ptr-pill {
  position: fixed; left: 50%; top: calc(var(--vv-top, 0px) + env(safe-area-inset-top, 0px) + 10px);
  transform: translate3d(-50%, -80px, 0); z-index: 2147482999;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 8px 14px 8px 10px; border-radius: 999px; font: 500 13px/1.25 var(--font, system-ui);
  color: #e9efec; background: rgba(20, 28, 25, .97); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.45); pointer-events: none; opacity: 0;
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), opacity .3s ease;
}
.ptr-pill.show { transform: translate3d(-50%, 62px, 0); opacity: 1; }
.ptr-pill.top { transform: translate3d(-50%, 0, 0); }
.ptr-pill.top.show { transform: translate3d(-50%, 6px, 0); }
.ptr-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; position: relative; }
.ptr-pill .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.ptr-pill.on .dot { color: var(--accent); }
.ptr-pill.on .dot::after { animation: ptr-ping 1.4s ease-out 2; }
.ptr-pill.off .dot { background: #ef4444; color: #ef4444; }
.ptr-pill.off .dot::after { animation: ptr-ping 1.4s ease-out infinite; }
.ptr-pill.wait .dot { background: #f59e0b; color: #f59e0b; }
.ptr-pill.wait .dot::after { animation: ptr-ping 1.2s ease-out infinite; }
.ptr-pill small { color: #8a9690; font-size: 12px; white-space: nowrap; }
@keyframes ptr-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ptr-ind.anim, .ptr-pill { transition: none; }
  .ptr-ind.loading svg, .ptr-ind.loading .ptr-arc { animation-duration: 2.4s; }
}