html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(var(--color-bg));
  font-family: 'Inter', sans-serif;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  position: relative; /* Establishes a containing block for transitions */
  overflow: hidden;   /* Clips content animating outside the viewport */
}

/* 
  All theme colors are now set dynamically via JavaScript (in applyTheme function)
  and applied to the :root element. This file no longer contains default theme variables.
*/

/* Removed .page-container animation for a better card list animation */

.is-navigating-forward {
  animation: slide-in-from-right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.is-navigating-backward {
  animation: slide-in-from-left 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.page-exit-forward {
    animation: slide-out-to-left 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
.page-exit-backward {
    animation: slide-out-to-right 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-from-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-to-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in-from-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-to-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Card List Entry Animation */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.contact-list-card {
  animation: card-enter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0; /* Start hidden before animation */
}

/* Card Exit Animation */
.contact-list-card.card-exit {
  animation: card-exit-animation 0.4s ease-out forwards;
}

@keyframes card-exit-animation {
  from {
    opacity: 1;
    transform: scale(1);
    max-height: 500px; /* Needs to be larger than any possible card height */
    margin-bottom: 0.75rem; /* from .space-y-3 */
  }
  to {
    opacity: 0;
    transform: scale(0.95);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
  }
}


/* Card content fade-in */
.card-details-content {
  transition: opacity 0.4s ease;
  opacity: 0;
  will-change: opacity;
}

.is-expanded .card-details-content {
  opacity: 1;
  transition-delay: 0.1s; /* Start after the expand transition begins */
}

/* Bouncy arrow for card expand/collapse */
.bouncy-arrow {
    transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* Toast Animations */
@keyframes toast-in {
    from { transform: translateY(-20px) translateX(0); opacity: 0; }
    to { transform: translateY(0) translateX(0); opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateY(0) translateX(0); opacity: 1; }
    to { transform: translateY(-20px) translateX(0); opacity: 0; }
}
.toast-in {
    animation: toast-in 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
.toast-out {
    animation: toast-out 0.3s ease-out forwards;
}

/* Modal Animations */
@keyframes modal-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-content-enter { 
  from { opacity: 0; transform: scale(0.95) translateY(20px); } 
  to { opacity: 1; transform: scale(1) translateY(0); } 
}
@keyframes modal-content-exit { 
  from { opacity: 1; transform: scale(1) translateY(0); } 
  to { opacity: 0; transform: scale(0.95) translateY(20px); } 
}

@media (max-width: 640px) {
  @keyframes modal-content-enter {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes modal-content-exit {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(100%); }
  }
}

/* FAB hide-on-scroll */
#fab-container {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#fab-container.fab-hidden {
  transform: translateY(calc(100% + 2rem)); /* 100% of its own height + bottom margin */
  pointer-events: none;
}


/* Camera View */
.guide-frame {
  border: 4px dashed rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
}

/* Skeleton Loader */
.skeleton-box {
    position: relative;
    overflow: hidden;
    background-color: rgb(var(--color-border));
}
.shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.dark .shimmer {
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0) 100%
    );
}

/* Highlight style for search term */
.highlight {
    background-color: rgb(var(--color-accent) / 0.5);
    border-radius: 3px;
    padding: 0 2px;
}
.dark .highlight {
    background-color: rgb(var(--color-accent) / 0.4);
}

/* Tab Navigation */
.tab-nav-container {
  display: flex;
  gap: 0.5rem; /* 8px */
}

.tab-button {
  flex-grow: 1;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: rgb(var(--color-muted));
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  position: relative;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.tab-button:hover {
  color: rgb(var(--color-text));
}

.tab-button.active {
  color: rgb(var(--color-text));
  border-bottom-color: rgb(var(--color-accent-hover));
}