/* VibeGram — top loading bar + live notification pop-ups. (Own file: app.css is Tailwind-generated and gets overwritten on rebuild.) */

/* ---------- top loading bar ---------- */
#vg-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
#vg-progress.on { opacity: 1; }
#vg-progress > div { height: 100%; transform-origin: 0 50%; transform: scaleX(0); transition: transform .22s ease-out; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); box-shadow: 0 0 10px rgba(214, 41, 118, .55); }

/* ---------- pop-up banners ---------- */
#vg-alerts { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 12px; right: 12px; z-index: 2147482000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
@media (min-width: 768px) { #vg-alerts { left: auto; right: 16px; top: 16px; width: 380px; } }
.vg-alert, #vg-ask { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: #fff; color: #262626; border: 1px solid #dbdbdb; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.vg-alert { cursor: pointer; animation: vgIn .32s cubic-bezier(.2, .9, .3, 1.15) both; }
.vg-alert.out { animation: vgOut .26s ease-in forwards; }
html.dark .vg-alert, html.dark #vg-ask { background: #1c1c1e; color: #f5f5f5; border-color: #2e2e30; }
.vg-a-av { position: relative; flex: none; width: 44px; height: 44px; }
.vg-a-av img { width: 44px; height: 44px; border-radius: 9999px; object-fit: cover; }
.vg-a-ico { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; border: 2px solid #fff; }
html.dark .vg-a-ico { border-color: #1c1c1e; }
.vg-a-ico svg { width: 11px; height: 11px; }
.vg-a-ico.big { position: static; flex: none; width: 40px; height: 40px; border: 0; }
.vg-a-ico.big svg { width: 20px; height: 20px; }
.vg-a-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.vg-a-body b { font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-a-body p { margin: 0; color: #737373; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
html.dark .vg-a-body p { color: #a8a8a8; }
.vg-a-thumb { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.vg-a-x { flex: none; background: none; border: 0; padding: 4px; color: #8e8e8e; cursor: pointer; border-radius: 9999px; }
.vg-a-x:hover { background: rgba(128, 128, 128, .15); }
.vg-a-x svg, .vg-ask-no svg { width: 16px; height: 16px; }
@keyframes vgIn { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vgOut { to { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* ---------- "turn on notifications" ask ---------- */
#vg-ask { position: fixed; z-index: 2147481000; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); animation: vgIn .32s ease both; }
@media (min-width: 768px) { #vg-ask { left: 280px; right: auto; bottom: 20px; width: 400px; } }
.vg-ask-ok { flex: none; background: #0095f6; color: #fff; border: 0; border-radius: 12px; padding: 7px 14px; font-weight: 700; font-size: 12px; cursor: pointer; }
.vg-ask-ok:hover { background: #1877f2; }
.vg-ask-no { flex: none; background: none; border: 0; padding: 4px; color: #8e8e8e; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .vg-alert, #vg-ask { animation: none; } #vg-progress > div { transition: none; } }

/* ---------- reel cover / thumbnail picker ---------- */
.vg-cv[hidden], .vg-cv [hidden] { display: none !important; }
.vg-cv { border: 1px solid #e5e5e5; border-radius: 16px; padding: 12px; background: #fafafa; }
html.dark .vg-cv { border-color: #2e2e30; background: #171717; }
.vg-cv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vg-cv-top span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8e8e8e; }
.vg-cv-top label { font-size: 12px; font-weight: 700; color: #0095f6; cursor: pointer; }
.vg-cv-top label:hover { color: #1877f2; }
.vg-cv-main { display: flex; gap: 12px; align-items: flex-start; }
.vg-cv-prev { position: relative; flex: none; width: 92px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #000; }
.vg-cv-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-cv-prev img:not([src]), .vg-cv-prev img[src=""] { visibility: hidden; }
.vg-cv-prev em { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .6); padding: 2px 7px; border-radius: 9999px; }
.vg-cv-pick { flex: 1; min-width: 0; }
.vg-cv-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; min-height: 40px; }
.vg-cv-strip button { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; line-height: 0; }
.vg-cv-strip button:hover, .vg-cv-strip button:focus-visible { border-color: #d62976; outline: none; }
.vg-cv-strip img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.vg-cv-range { width: 100%; margin: 10px 0 4px; accent-color: #d62976; }
.vg-cv-pick p { margin: 0; font-size: 11px; color: #8e8e8e; }

/* ---------- instant click feedback on every button ---------- */
button, [role="button"], input[type="submit"] { transition: scale .08s ease-out; -webkit-tap-highlight-color: transparent; }
button:not(:disabled):active, [role="button"]:active, input[type="submit"]:not(:disabled):active { scale: .96; filter: brightness(.94); }

/* busy = a request started by this button is still running */
.vg-busy { pointer-events: none; cursor: progress; opacity: .8; }
.vg-busy:not(.vg-busy-icon)::after { content: ""; display: inline-block; flex: none; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 9999px; animation: vgSpin .6s linear infinite; }
.vg-busy-icon { animation: vgPulse .7s ease-in-out infinite alternate; }
@keyframes vgSpin { to { transform: rotate(360deg); } }
@keyframes vgPulse { from { opacity: .35; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .vg-busy-icon { animation: none; opacity: .5; } button, [role="button"] { transition: none; } }

/* ---------- first-run permissions screen ---------- */
.vg-perm { padding: 26px 22px 20px; text-align: center; }
.vg-perm-hero { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(45deg, #feda75, #d62976, #4f5bd5); }
.vg-perm-hero svg { width: 26px; height: 26px; }
.vg-perm h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.vg-perm > p { margin: 0 0 14px; font-size: 12.5px; color: #737373; line-height: 1.45; }
.vg-perm ul { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.vg-perm li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #f5f5f5; }
html.dark .vg-perm li { background: #262626; }
.vg-perm-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; color: #d62976; }
html.dark .vg-perm-ic { background: #171717; }
.vg-perm-ic svg { width: 18px; height: 18px; }
.vg-perm-tx { flex: 1; min-width: 0; }
.vg-perm-tx b { display: block; font-size: 13px; }
.vg-perm-tx small { display: block; font-size: 11px; color: #8e8e8e; line-height: 1.3; }
.vg-perm-st { flex: none; font-size: 10.5px; font-weight: 700; color: #8e8e8e; }
.vg-perm-st.granted { color: #10b981; } .vg-perm-st.denied { color: #ed4956; }
.vg-perm-go { width: 100%; padding: 11px; border: 0; border-radius: 14px; color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.vg-perm-go:disabled { opacity: .7; }
.vg-perm-skip { width: 100%; margin-top: 6px; padding: 9px; border: 0; background: none; color: #8e8e8e; font-size: 12px; font-weight: 600; cursor: pointer; }