/* src/index.css */
/* RTL support for Arabic */
[lang="ar"] body,
[lang="ar"] .landing-page {
  direction: rtl;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
/* src/App.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow: hidden !important;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #1a0b2e;
}

html, body, #root {
  overflow: hidden !important;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #1a0b2e;
}

/* Prevent horizontal scroll on all screen sizes */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

@media (max-width: 375px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 320px) {
  html {
    font-size: 13px;
  }
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #1a0b2e;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden !important;
  color: #fff;
  overscroll-behavior-x: none;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
  input, textarea, button:not(.pricing-cta-btn):not(.cta-main-btn) {
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }
  
  input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  
  .message-bubble {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }
  
  .message.user .message-bubble {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
  }
  
  .message.assistant .message-bubble {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }
  
  .pricing-card {
    background: rgba(30, 20, 50, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  
  .pricing-card.featured {
    background: rgba(80, 70, 140, 0.75) !important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 13px;
  }
}

.App {
  min-height: 100vh;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  width: 100%;
  background: linear-gradient(135deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
}

.app-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100%;
  position: fixed;
  top: 42px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
  z-index: 1;
}

@media (max-width: 768px) {
  .app-content {
    top: 10px !important;
  }
  /* .layout-content{
    top: 16px !important;
  }  */
  /* chat-container {
    top: 100px !important;;
  } */
   messages-area {
    bottom: 20px !important;
  }
  bottom-navigation {
    bottom: 10px !important;
  }
}

@media (max-width: 768px) {
  .App {
    padding: 0;
  }
}

.App::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}

/* Disable animation on iOS devices to prevent white flashing */
@media (hover: hover) and (pointer: fine) {
  .App::before {
    animation: backgroundShift 20s ease-in-out infinite;
  }
}

@keyframes backgroundShift {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  33% {
    transform: translateX(-20px) translateY(20px);
  }
  66% {
    transform: translateX(20px) translateY(-20px);
  }
}

/*# sourceMappingURL=main.74984984.css.map*/