@import "material-symbols/outlined.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================
   TRUSTBITE TYPOGRAPHY DESIGN SYSTEM
   Premium-grade, consistent type across the app.
   Font: "Be Vietnam Pro" (loaded in index.html)
   ============================================ */

/* --- Text Color Tokens --- */
:root {
  --color-primary: #F59E0B;
  --color-secondary: #E11D48;  /* Warm coral — trending, likes, hot interactions */
  --bg-app: #ffffff;
  --bg-card: #ffffff;
  --bg-subtle: #f9fafb;
  --text-main: #09090b;
  --text-muted: #71717a;
  --border-main: #e2e8f0;
  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-tertiary: #a1a1aa;
  --text-accent: var(--color-primary);
}

.dark {
  --color-secondary: #FB7185;  /* Lighter coral for dark mode readability */
  --bg-app: #09090b;
  --bg-card: #18181b;
  --bg-subtle: #09090b;
  --text-main: #ffffff;
  --text-muted: #a1a1aa;
  --border-main: #27272a;
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-tertiary: #52525b;
}

.midnight {
  --color-secondary: #FB7185;
  --bg-app: #0f172a;
  --bg-card: #1e293b;
  --bg-subtle: #0f172a;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --border-main: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #475569;
}

.cream {
  --color-secondary: #BE123C;  /* Deeper rose for cream theme contrast */
  --bg-app: #fdfcf0;
  --bg-card: #f7f6e7;
  --bg-subtle: #fdfcf0;
  --text-main: #1c1917;
  --text-muted: #78716c;
  --border-main: #e7e5e4;
  --text-primary: #1c1917;
  --text-secondary: #78716c;
  --text-tertiary: #a8a29e;
}

/* --- Type Scale Utilities --- */
/* 7-level system: display > title > subtitle > body > caption > micro > nano */

.tb-display {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.tb-title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.tb-subtitle {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text-secondary);
}

.tb-body {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-primary);
}

.tb-caption {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text-secondary);
}

.tb-micro {
  font-size: 10px;
  line-height: 1.3;
  font-weight: 900;
  color: var(--text-secondary);
}

.tb-nano {
  font-size: 9px;
  line-height: 1.2;
  font-weight: 900;
  color: var(--text-tertiary);
}

/* --- Semantic Helpers --- */
.tb-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
}

.tb-section-header {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
}

.tb-accent {
  color: var(--text-accent);
}

.tb-link {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-accent);
  cursor: pointer;
}

.tb-btn-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Ensure antialiased rendering everywhere */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.theme-transition {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Suppress default outline for mouse/touch clicks, but show custom focus ring for keyboard */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary, #F59E0B);
  outline-offset: 2px;
  box-shadow: none;
}
/* Inputs and textareas manage their own focus border via onFocus handlers — no outline needed */
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Override @tailwindcss/forms default blue (blue-600) focus ring/border with our primary brand color globally */
[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  --tw-ring-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}



html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  /* Native Web Artifact Resets */
  user-select: none;
  -webkit-user-select: none;
  /* Allow vertical scroll but block horizontal swipe/pinch-zoom */
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Allow selection and callouts ONLY in inputs */
input, textarea {
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-touch-callout: default;
}

#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* Safe area insets for iOS notch, Android status bar.
     --sat/--sab are JS-set fallbacks for Android where env() returns 0 */
  /* NOTE: No padding-bottom here — the fixed bottom nav handles its own safe area via pb-safe */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}

/* Hide Scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-animation {
  animation: pulse 2s infinite ease-in-out;
}

/* safe-area-bottom is defined in the safe area utilities section at end of file */

.safe-area-top {
  padding-top: env(safe-area-inset-top, 40px);
}

/* --- FOOD HAPTIC ANIMATIONS --- */

@keyframes cleaver-slam {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.1) translateY(-4px);
  }

  40% {
    transform: scale(0.9) translateY(4px);
  }

  60% {
    transform: scale(1.05) translateY(-1px);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes crispy-crunch {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1) rotate(2deg);
  }

  50% {
    transform: scale(0.9) rotate(-2deg);
  }

  75% {
    transform: scale(1.05) rotate(1deg);
  }

  100% {
    transform: scale(1);
  }
}

.animate-cleaver {
  animation: cleaver-slam 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.animate-crunch {
  animation: crispy-crunch 0.2s ease-out;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes shimmer-text {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

/* ============================================
   GOOGLE MAPS INFOWINDOW OVERRIDES
   Premium styling for map popup cards
   ============================================ */

/* Remove default white background and padding */
.gm-style-iw-c {
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

.gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
  max-height: none !important;
}

/* Style the close button as a frosted circle */
.gm-style-iw-c button.gm-ui-hover-effect {
  top: 6px !important;
  right: 6px !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

.gm-style-iw-c button.gm-ui-hover-effect>span {
  margin: 0 !important;
  filter: invert(1);
}

/* Hide the default arrow/tail */
.gm-style-iw-tc {
  display: none !important;
}

/* Remove extra wrapper padding */
.gm-style-iw {
  padding: 0 !important;
}

/* ============================================
   MAP PIN PULSE ANIMATION
   Subtle glow for selected map pins
   ============================================ */
@keyframes map-pin-pulse {

  0%,
  100% {
    filter: drop-shadow(0 0 4px currentColor);
  }

  50% {
    filter: drop-shadow(0 0 12px currentColor);
  }
}

/* ============================================
   MAP MARKER BOUNCE (replaces legacy google.maps.Animation.BOUNCE)
   Used on AdvancedMarkerElement content when marker is selected
   ============================================ */
@keyframes tb-marker-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-12px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-6px); }
}

/* ============================================
   QUIZ REVEAL ANIMATION
   Spring-like bounce for answer reveal
   ============================================ */
@keyframes quizReveal {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(4px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================
   CP FLOATING FEEDBACK ANIMATION
   Credibility Points earned indicator
   ============================================ */
@keyframes cp-slide-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   PREMIUM ANIMATION SYSTEM
   Tier 1–3 keyframes & utility classes
   ============================================ */

/* ── HEART BURST (Tier 1) ─────────────────── */
@keyframes heart-pop {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.35);
  }

  30% {
    transform: scale(0.9);
  }

  45% {
    transform: scale(1.15);
  }

  60% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes heart-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.4);
  }
}

.animate-heart-pop {
  animation: heart-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── STAGGER FEED ENTRY (Tier 1) ──────────── */
@keyframes stagger-up {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-stagger-in {
  animation: stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── SCREEN TRANSITIONS (Tier 1) ──────────── */
@keyframes screen-enter {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes screen-enter-back {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes screen-fade-up {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-screen-enter {
  animation: screen-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-screen-back {
  animation: screen-enter-back 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-screen-fade {
  animation: screen-fade-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── SKELETON SHIMMER UPGRADE (Tier 1) ────── */
@keyframes premium-shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

.skeleton-premium {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.08) 40%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.08) 60%,
      rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: premium-shimmer 1.8s ease infinite;
}

/* ── EXPLORER SEARCH BAR GLOW (Tier 1) ────── */
@keyframes search-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--glow-color-rgb, 245, 158, 11), 0);
  }

  50% {
    box-shadow: 0 0 20px 2px rgba(var(--glow-color-rgb, 245, 158, 11), 0.15);
  }
}

.search-focus-glow {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-focus-glow:focus-within {
  box-shadow: 0 0 24px 2px rgba(var(--glow-color-rgb, 245, 158, 11), 0.18);
  border-color: rgba(var(--glow-color-rgb, 245, 158, 11), 0.4) !important;
}

/* ── MAP/LIST CROSSFADE (Tier 1) ──────────── */
@keyframes crossfade-in {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-crossfade {
  animation: crossfade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── BOOKMARK FOLD (Tier 2) ───────────────── */
@keyframes bookmark-fold {
  0% {
    transform: rotateX(0deg);
  }

  30% {
    transform: rotateX(-30deg);
  }

  60% {
    transform: rotateX(15deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}

.animate-bookmark-fold {
  animation: bookmark-fold 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: top center;
}

/* ── TAB GLOW (Tier 2) ───────────────────── */
@keyframes tab-glow {

  0%,
  100% {
    opacity: 0.6;
    transform: scaleX(1);
  }

  50% {
    opacity: 1;
    transform: scaleX(1.15);
  }
}

@keyframes tab-bounce {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

.animate-tab-bounce {
  animation: tab-bounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── CARD PRESS (Tier 2) ─────────────────── */
.card-press {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.card-press:active {
  transform: scale(0.97);
}

/* ── IMAGE BLUR-UP (Tier 2) ──────────────── */
@keyframes blur-sharpen {
  0% {
    filter: blur(12px);
    transform: scale(1.05);
    opacity: 0.6;
  }

  100% {
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
  }
}

.animate-blur-up {
  animation: blur-sharpen 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── FLOATING CP TOAST (Tier 2) ──────────── */
@keyframes float-up-fade {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }

  20% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }

  30% {
    transform: translateY(0) scale(1);
  }

  80% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
}

.animate-float-up {
  animation: float-up-fade 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── CONFETTI (Tier 3) ───────────────────── */
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg) scale(0.3);
  }
}

/* ── TYPING DOTS (Tier 3) ────────────────── */
@keyframes typing-bounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.typing-dot {
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* ── RIPPLE TAP (Tier 3) ────────────────── */
.ripple-tap {
  position: relative;
  overflow: hidden;
}

.ripple-tap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
      rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ripple-tap:active::after {
  opacity: 1;
}

/* ── PARALLAX HELPER (Tier 3) ───────────── */
.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-bg {
  position: absolute;
  inset: -20% 0;
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ── CONCIERGE LAYOUT TOKENS ──────────────── */
.concierge-screen {
  --concierge-header-h: 88px; /* Fixed header height (excl. safe area) */
}

/* ── SAFE AREA UTILITIES (Android/iOS system nav bar) ─ */
/* max() picks the largest of: 8px minimum, env() (iOS native), --sab (Android JS-injected via initSafeAreaInsets) */
/* !important ensures these are never overridden by Tailwind pb-* utilities */
.pb-safe {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px), var(--sab, 0px)) !important;
}

.safe-area-bottom {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px), var(--sab, 0px)) !important;
}

.mb-safe {
  margin-bottom: max(8px, env(safe-area-inset-bottom, 0px), var(--sab, 0px));
}

.pt-safe {
  padding-top: env(safe-area-inset-top, var(--sat, 0px));
}

.safe-area-top {
  padding-top: env(safe-area-inset-top, var(--sat, 0px));
}

/* ============================================
   TRUSTBITE SIGNATURE ELEMENTS
   Visual DNA that makes the app instantly recognizable
   ============================================ */

/* ── BITE NOTCH (TrustBite's signature shape) ─────── */
/* A subtle concave corner cut on the bottom-right of feed cards,
   representing a "bite" taken — the brand's visual metaphor. */
.tb-bite-notch {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.tb-bite-notch::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-app, #ffffff);
  z-index: 25;
  box-shadow: inset 2px -2px 6px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

/* Dark mode: adjust bite notch shadow for depth */
.dark .tb-bite-notch::after,
.midnight .tb-bite-notch::after {
  box-shadow: inset 2px -2px 8px rgba(0, 0, 0, 0.3);
}

/* ── VISUAL CRUNCH FLASH ────────────────────────── */
/* Brief screen-edge glow when haptic "crunch" fires */
@keyframes crunch-flash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.crunch-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  border: 2px solid var(--color-primary, #F59E0B);
  border-radius: 16px;
  box-shadow: inset 0 0 30px var(--color-primary, #F59E0B), 0 0 15px color-mix(in srgb, var(--color-primary, #F59E0B) 30%, transparent);
  animation: crunch-flash 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================
   TAP SCALE DESIGN TOKENS
   3-tier system for consistent active state feedback.
   Use these instead of ad-hoc active:scale-* values.
   ──────────────────────────────────────────────
   tb-tap-subtle  → 0.98 — list items, cards, rows
   tb-tap         → 0.95 — standard buttons, chips, tabs
   tb-tap-strong  → 0.90 — icon buttons, FABs, CTAs
   ============================================ */
.tb-tap-subtle {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.tb-tap-subtle:active {
  transform: scale(0.98);
}

.tb-tap {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.tb-tap:active {
  transform: scale(0.95);
}

.tb-tap-strong {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.tb-tap-strong:active {
  transform: scale(0.90);
}
/* Override global pan-y for horizontally scrollable containers (fixes Android touch) */
.overflow-x-auto, .overflow-x-scroll {
  touch-action: pan-x pan-y !important;
}