/* TikFollow CRM — App Styles */

/* ── Scrollbar ── */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255,255,255,0.22); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.5); }

/* ── Animations ── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; }                            to { opacity:1; } }
@keyframes shimmer { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes pulse   { 0%,100%{ box-shadow:0 0 0 0 rgba(255,45,85,0); } 50%{ box-shadow:0 0 18px 4px rgba(255,45,85,0.2); } }
@keyframes cyanGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,242,234,0); } 50%{ box-shadow:0 0 14px 3px rgba(0,242,234,0.18); } }

#tikfollow-root > div { animation: fadeIn 0.35s ease; }

/* ── Global transition helpers ── */
button {
    transition: opacity 0.15s, transform 0.12s, background 0.15s,
                box-shadow 0.18s, border-color 0.15s !important;
}
button:hover:not(:disabled)  { opacity: 0.85; transform: translateY(-1px); }
button:active:not(:disabled) { transform: scale(0.96) !important; opacity: 1 !important; }

input, textarea {
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus, textarea:focus {
    box-shadow:   0 0 0 2px rgba(0,242,234,0.14) !important;
    border-color: rgba(0,242,234,0.38) !important;
    outline:      none !important;
}

/* ── Logo shimmer ── */
.shimmer-logo {
    background: linear-gradient(90deg,#FF2D55,#FF9F0A,#00F2EA,#BF5AF2,#FF2D55);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 5s linear infinite;
}

/* ── Card hover ── */
.card-hover {
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s !important;
}
.card-hover:hover {
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow:   0 4px 24px rgba(0,0,0,0.4) !important;
    transform:    translateY(-2px);
}

/* ── Contact row ── */
.contact-row { transition: background 0.12s, border-color 0.12s !important; }
.contact-row:hover { background: rgba(255,255,255,0.04) !important; }

/* ── Buttons ── */
.copy-all-btn { animation: cyanGlow 3s ease-in-out infinite; }
.add-btn-pulse:hover { animation: pulse 1.5s ease-in-out infinite; }

/* ── Full-screen override: hide all WP theme chrome ── */
body.tikfollow-fullscreen .wp-site-blocks,
body.tikfollow-fullscreen #page,
body.tikfollow-fullscreen #masthead,
body.tikfollow-fullscreen #colophon,
body.tikfollow-fullscreen .site-header,
body.tikfollow-fullscreen .site-footer,
body.tikfollow-fullscreen nav.main-navigation,
body.tikfollow-fullscreen .nav-links,
body.tikfollow-fullscreen .entry-header,
body.tikfollow-fullscreen .entry-footer {
    display: none !important;
}

body.tikfollow-fullscreen {
    background: #080808 !important;
    overflow: hidden;
}

body.tikfollow-fullscreen #tikfollow-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    height: 100vh;
    overflow: auto;
}

/* ── Suppress WordPress emoji-to-img conversion inside app ── */
#tikfollow-root img.emoji {
    display: none !important;
}
/* Ensure SVG icons inside buttons stay inline and don't get oversized */
#tikfollow-root button svg,
#tikfollow-root span svg,
#tikfollow-root div svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    max-width: 20px;
    max-height: 20px;
}

/* ── Mobile / touch improvements ── */
@media (max-width: 639px) {
  /* Prevent double-tap zoom on buttons/inputs */
  button, input, textarea, select {
    touch-action: manipulation;
  }

  /* Tap highlight */
  * { -webkit-tap-highlight-color: rgba(255, 45, 85, 0.1); }

  /* Bigger tap targets */
  .contact-row { min-height: 60px; }

  /* Prevent body scroll-bounce from conflicting with app scroll */
  body.tikfollow-fullscreen {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }

  /* Safe area insets for notched phones */
  body.tikfollow-fullscreen #tikfollow-root {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Make date inputs readable on mobile */
  input[type="date"] {
    min-height: 42px;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Prevent iOS input zoom (font-size must be >= 16px) */
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ── Dynamic viewport height fix ── */
#tikfollow-root {
  height: 100dvh;
}