/* =============================================================
   SECRET MEDIA VAULT — style.css
   Custom styles layered on top of Tailwind CDN.
   Covers: glassmorphism, calculator UI, gallery grid,
           lightbox, animations, spinner, and dark scrollbars.
   ============================================================= */

/* ── Base & Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0f;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* Custom dark scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Screen Transitions ───────────────────────────────────── */
/* !important overrides Tailwind's flex/block utilities on hidden screens */
.screen { display: none !important; }
.screen-active { display: flex !important; }

/* Fade-in animation used when screens switch */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen-active {
  animation: fadeIn 0.35s ease forwards;
}

/* ── Glassmorphism Panel ──────────────────────────────────── */
.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Calculator Shell ─────────────────────────────────────── */
.calc-shell {
  background: linear-gradient(160deg, rgba(30,30,46,0.95) 0%, rgba(15,15,25,0.98) 100%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* Calc display */
#calc-display {
  font-size: clamp(2rem, 12vw, 3.5rem);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Calculator buttons — common base */
.calc-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 400;
  cursor: pointer;
  border: none;
  transition: transform 0.08s ease, filter 0.08s ease, background 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* col-span-2 button (the "0") should be pill shaped */
.calc-btn.col-span-2 {
  aspect-ratio: unset;
  border-radius: 99px;
  justify-content: flex-start;
  padding-left: 1.4rem;
}

.calc-btn:active {
  transform: scale(0.93);
  filter: brightness(0.85);
}

/* Function buttons (AC, +/-) */
.calc-btn-fn {
  background: rgba(165, 165, 180, 0.22);
  color: #1a1a2e;
  color: #fff;
}
.calc-btn-fn:hover { background: rgba(165, 165, 180, 0.32); }

/* Number buttons */
.calc-btn-num {
  background: rgba(80, 80, 100, 0.3);
  color: #fff;
}
.calc-btn-num:hover { background: rgba(80, 80, 100, 0.45); }

/* Operator buttons */
.calc-btn-op {
  background: #6c63ff;
  color: #fff;
}
.calc-btn-op:hover { background: #7b72ff; }
.calc-btn-op.active-op {
  background: #fff;
  color: #6c63ff;
}

/* Equals button */
.calc-btn-eq {
  background: linear-gradient(135deg, #6c63ff, #9d97ff);
  color: #fff;
  box-shadow: 0 4px 15px rgba(108,99,255,0.45);
}
.calc-btn-eq:hover { filter: brightness(1.1); }

/* ── PIN Setup Screen ─────────────────────────────────────── */
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.2);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  display: inline-block;
}
.pin-dot.filled {
  background: #6c63ff;
  border-color: #9d97ff;
  transform: scale(1.15);
}

.setup-pin-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0.75rem;
  font-size: 1.1rem;
  color: #fff;
  cursor: pointer;
  transition: background 0.1s, transform 0.08s;
}
.setup-pin-btn:hover { background: rgba(255,255,255,0.12); }
.setup-pin-btn:active { transform: scale(0.92); }
.setup-pin-del {
  background: rgba(255,77,109,0.1);
  border-color: rgba(255,77,109,0.2);
  color: #ff4d6d;
}

/* ── Vault Nav ────────────────────────────────────────────── */
.vault-nav {
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.nav-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-icon-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ── Warning Banner ───────────────────────────────────────── */
.warning-banner {
  background: rgba(251, 191, 36, 0.07);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

/* ── Tab Bar ──────────────────────────────────────────────── */
.vault-tab {
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s ease;
}
.vault-tab-active {
  background: rgba(108, 99, 255, 0.25);
  color: #c4c0ff;
}

/* ── Gallery Grid ─────────────────────────────────────────── */
#gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  #gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  #gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Individual gallery card */
.gallery-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: fadeIn 0.3s ease;
}
.gallery-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* Thumbnail image inside card */
.gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video card badge */
.gallery-video-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 3px 7px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hover overlay with delete button */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: flex-end;
  padding: 8px;
}
.gallery-card:hover .gallery-overlay { opacity: 1; }

.gallery-delete-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 77, 109, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s;
}
.gallery-delete-btn:hover { background: #ff4d6d; }
.gallery-delete-btn:active { transform: scale(0.88); }

/* Gallery spinner card while decrypting thumbnail */
.gallery-card-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
}

/* ── Upload Drop Zone ─────────────────────────────────────── */
.drop-zone { transition: border-color 0.2s, background 0.2s; }
.drop-zone.drag-active {
  border-color: #6c63ff !important;
  background: rgba(108, 99, 255, 0.08) !important;
}

/* Upload progress item */
.upload-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  font-size: 0.8rem;
}
.upload-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,0.7);
}
.upload-item-status {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.upload-item-status.done { color: #2dd4bf; }
.upload-item-status.error { color: #ff4d6d; }

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox-media {
  max-height: 70vh;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

/* ── Modal Backdrop ───────────────────────────────────────── */
.modal-backdrop {
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Modal sheet slide-up */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-sheet {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Settings Cards ───────────────────────────────────────── */
.settings-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

/* ── Spinner ──────────────────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: #6c63ff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: #6c63ff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ── Toast Notifications ──────────────────────────────────── */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.95); }
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: toastIn 0.25s ease forwards;
  pointer-events: none;
  white-space: nowrap;
}
.toast.success {
  background: rgba(45, 212, 191, 0.15);
  border: 1px solid rgba(45, 212, 191, 0.3);
  color: #2dd4bf;
}
.toast.error {
  background: rgba(255, 77, 109, 0.15);
  border: 1px solid rgba(255, 77, 109, 0.3);
  color: #ff4d6d;
}
.toast.info {
  background: rgba(108, 99, 255, 0.15);
  border: 1px solid rgba(108, 99, 255, 0.3);
  color: #9d97ff;
}
.toast.out { animation: toastOut 0.25s ease forwards; }

/* ── Loading Screen ───────────────────────────────────────── */
@keyframes loadingFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}
.loading-screen-out {
  animation: loadingFadeOut 0.6s ease forwards;
}

/* Animated concentric rings */
.loading-rings { width: 140px; height: 140px; }

.loading-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: ringPulse 2.4s ease-in-out infinite;
}
.loading-ring-1 {
  width: 80px; height: 80px;
  border-color: rgba(108, 99, 255, 0.5);
  animation-delay: 0s;
}
.loading-ring-2 {
  width: 108px; height: 108px;
  border-color: rgba(108, 99, 255, 0.25);
  animation-delay: 0.3s;
}
.loading-ring-3 {
  width: 136px; height: 136px;
  border-color: rgba(108, 99, 255, 0.1);
  animation-delay: 0.6s;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1);    opacity: 0.6; }
  50%       { transform: scale(1.08); opacity: 1;   }
}

.loading-icon {
  position: absolute;
  animation: iconBreathe 2.4s ease-in-out infinite;
}
@keyframes iconBreathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 20px rgba(108,99,255,0.4); }
  50%       { transform: scale(1.06); box-shadow: 0 0 40px rgba(108,99,255,0.7); }
}

/* Progress bar fill animation */
.loading-bar-fill {
  width: 0%;
  transition: width 0.4s ease;
}

/* ── WhatsApp Popup ────────────────────────────────────────── */
.whatsapp-card {
  background: rgba(15, 15, 24, 0.95);
  border: 1px solid rgba(37, 211, 102, 0.2);
}

/* Pulsing green aura behind WhatsApp icon */
.wa-icon-wrap { background: rgba(37, 211, 102, 0.08); }

@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.wa-pulse {
  background: rgba(37, 211, 102, 0.25);
  animation: waPulse 2s ease-out infinite;
}

/* Green gradient join button */
.wa-join-btn {
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}
.wa-join-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.45);
}

/* ── Utility ──────────────────────────────────────────────── */
.hidden { display: none !important; }