/* InstaPrank OS — estilos que o Tailwind (CDN) não cobre. */

[x-cloak] { display: none !important; }

html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Instagram */
.ig-gradient { background: linear-gradient(45deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4); }
.cf-ring { background: linear-gradient(135deg, #1cd14f 0%, #16b543 100%); padding: 2.5px; }
.story-ring { background: linear-gradient(45deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4); padding: 2.5px; }
.cf-pill { background: #1cd14f; color: #fff; }
.bubble-me { background: linear-gradient(135deg, #8a3ffc 0%, #5b51f5 50%, #3797f0 100%); color: #fff; }

.note-bubble {
  position: absolute;
  bottom: calc(100% - 10px);
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  width: max-content;
  max-width: 96px;
  padding: 6px 10px;
  border-radius: 16px;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
}
.note-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #262626;
}

.typing-text { animation: blink-soft 1.1s ease-in-out infinite; }
@keyframes blink-soft { 50% { opacity: .35; } }

.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: #a8a8a8; animation: dot 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Áudio */
.wave i { flex: 1; min-width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .75); transform-origin: center; }
.is-playing .wave i { animation: wave .7s ease-in-out infinite alternate; }
@keyframes wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

.lock-pulse { animation: lock-pulse 1.6s ease-in-out infinite; }
@keyframes lock-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255,255,255,0); } }

/* ---------- Terminal */
.scanlines::before {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  z-index: 0;
}
.scanlines > * { position: relative; z-index: 1; }

.caret { display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.animate-alert { animation: alert 1.2s ease-in-out infinite; }
@keyframes alert { 50% { border-color: rgba(255, 59, 59, .15); background-color: rgba(255, 59, 59, .04); } }

/* ---------- Radar */
.radar { --c: 34, 255, 136; position: relative; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgba(var(--c), .10) 0%, rgba(var(--c), .02) 60%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(var(--c), .45), 0 0 60px -10px rgba(var(--c), .5); }
.radar--alert { --c: 255, 59, 59; }
.radar__grid { position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 24%, rgba(var(--c), .25) 24.5%, transparent 25.5%),
    radial-gradient(circle, transparent 49%, rgba(var(--c), .25) 49.5%, transparent 50.5%),
    radial-gradient(circle, transparent 74%, rgba(var(--c), .25) 74.5%, transparent 75.5%),
    linear-gradient(transparent calc(50% - .5px), rgba(var(--c), .25) calc(50% - .5px), rgba(var(--c), .25) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(var(--c), .25) calc(50% - .5px), rgba(var(--c), .25) calc(50% + .5px), transparent calc(50% + .5px)); }
.radar__sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--c), .55), rgba(var(--c), 0) 70deg, transparent 360deg);
  animation: sweep 2.6s linear infinite; }
.radar--alert .radar__sweep { animation-duration: 1.4s; }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar__blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 12px rgb(var(--c)); animation: blip 2.6s ease-out infinite; }
@keyframes blip { 0%, 100% { opacity: 0; } 10% { opacity: 1; } 60% { opacity: .2; } }
.radar__ring { position: absolute; left: 50%; top: 50%; width: 7rem; height: 7rem; margin: -3.5rem 0 0 -3.5rem; border-radius: 50%;
  border: 2px solid rgba(var(--c), .8); animation: ring 1.6s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .radar__sweep, .radar__ring, .radar__blip, .lock-pulse, .animate-alert, .typing-text { animation: none; }
}