@import url('https://fontsapi.zeoseven.com/2104/main/result.css');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --app-height: 100lvh;
  }

  html, body, #root {
    width: 100vw;
    min-height: var(--app-height);
    height: var(--app-height);
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    @apply antialiased text-gray-900;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);

    /* Prevent text selection and default callouts on mobile */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS specific fixes for bottom gaps in PWA */
  body.ios-standalone {
    min-height: var(--app-height);
    height: var(--app-height);
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
  }

  body.ios-standalone #root {
    min-height: var(--app-height);
    height: var(--app-height);
  }
  
  /* Re-enable selection for inputs */
  input, textarea {
    user-select: text;
    -webkit-user-select: text;
  }
  /* Protect SVG colors */
  svg.preserve-color, .preserve-color svg {
    color: currentColor !important;
  }
}

@layer utilities {
  .glass-card {
    background-color: theme('colors.glass-bg');
    border: 1px solid theme('colors.glass-border');
    box-shadow: theme('boxShadow.glass');
  }

  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .glass-card {
      @apply backdrop-blur-glass;
      background-color: rgba(255, 255, 255, 0.4);
    }
  }

  @supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .glass-card {
      background-color: rgba(255, 255, 255, 0.95);
    }
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  @keyframes wiggle {
    0% {
      transform: rotate(-1.5deg);
    }
    50% {
      transform: rotate(1.5deg);
    }
    100% {
      transform: rotate(-1.5deg);
    }
  }

  .wiggle {
    animation: wiggle 0.25s ease-in-out infinite;
    transform-origin: 50% 70%;
  }

  .x-dm-peer-bubble {
    background-color: #E5E5EA !important;
    color: #000000 !important;
  }

  .x-dm-me-bubble {
    background-color: #1D9BF0 !important;
    color: #ffffff !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .wiggle {
      animation: none;
    }
  }
}

:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ui-card-subtitle-font { font-family: "Great_Vibes","Great Vibes",cursive !important; }

@font-face {
  font-family: "ZSFT-gq";
  src: url("https://fontsapi.zeoseven.com/gq/italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "ZSFT-gq";
  src: url("https://fontsapi.zeoseven.com/gq/main.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "ZSFT-he";
  src: url("https://fontsapi.zeoseven.com/he/main.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

span.app-logo-text {
  font-family: "ZSFT-he" !important;
}
span.meeting-ribbon-text {
  font-family: 'Pinyon Script', cursive !important;
}
.force-script-font, .force-script-font * {
  font-family: "ZSFT-gq" !important;
  font-weight: normal !important;
}
.mask-image-vertical {
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
.animate-spin-slow {
  animation: spin 20s linear infinite;
}
.font-companion-script {
  font-family: "ZSFT-gq" !important;
  font-weight: normal;
}
.font-enter-exit {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
}