/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Tailwind CSS is loaded directly in the layout */
/* Add any custom styles below */

/* Mobile Optimizations */
@media (max-width: 768px) {
  /* Prevent zoom on input focus for iOS Safari */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    font-size: 16px !important;
  }

  /* Keyboard open state adjustments */
  body.keyboard-open {
    /* Prevent background scrolling when keyboard is open */
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* Optimize touch targets for mobile */
  button, .touch-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Improve scrolling performance on mobile */
  .mobile-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Better spacing for mobile chat */
  .mobile-chat-bubble {
    max-width: 85%;
    word-wrap: break-word;
  }

  /* Mobile panel animations */
  .mobile-panel-enter {
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
  }

  .mobile-panel-enter-active {
    transform: translateX(0);
  }

  .mobile-panel-exit {
    transform: translateX(0);
    transition: transform 0.3s ease-out;
  }

  .mobile-panel-exit-active {
    transform: translateX(100%);
  }

  /* Hide scrollbar on mobile chat */
  .mobile-chat::-webkit-scrollbar {
    display: none;
  }

  .mobile-chat {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Better tap highlight for mobile */
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* Optimize input area for mobile */
  .mobile-input-area {
    padding: 8px 12px;
  }

  .mobile-input-area textarea {
    resize: none;
    line-height: 1.4;
  }
}

/* Prevent text selection on touch devices for better UX */
@media (hover: none) and (pointer: coarse) {
  .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}