/* 📱 Tenord Mobile Optimizations */

.is-mobile .messenger {
  display: flex;
  flex-direction: column;
}

.is-mobile .sidebar {
  width: 100% !important;
  max-width: none !important;
  border-right: none;
}

.is-mobile .chat-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: var(--bg-main);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.is-mobile .chat-area.active {
  transform: translateX(0);
}

.is-mobile .empty-state {
  display: none !important;
}

/* Hide Sidebar when chat is open on mobile */
.is-mobile .messenger.chat-open .sidebar {
  display: none;
}


/* Modals on mobile */
.is-mobile .modal {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.is-mobile .modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}

.is-mobile .icon-btn {
  width: 44px;
  height: 44px;
}

.is-mobile .message-bubble {
  max-width: 85%;
  padding: 10px 14px;
  font-size: 1rem;
}


/* Pull to refresh / Over scroll behavior */
.is-mobile body {
  overscroll-behavior-y: contain;
}

/* PC Specific tweaks */
.is-pc .chat-area {
  flex: 1;
}

.is-pc .back-btn {
  display: none;
}

/* ?? Extreme Mobile Optimizations */
* { -webkit-tap-highlight-color: transparent; }

@media (max-width: 768px) {
  /* Disable expensive backdrop filters on mobile for max FPS */
  .drawer-overlay, .modal-overlay, .profile-modal-overlay, .context-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.65) !important; /* Slightly darker background to compensate for no blur */
  }

  /* Hardware accelerate scrolling containers */
  .chat-list, .messages-list {
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
    will-change: transform, scroll-position;
  }

  /* Render optimization for long lists */
  .chat-item, .message {
    content-visibility: auto;
    contain-intrinsic-size: 70px;
  }

  /* Reduce heavy box-shadows on mobile */
  .sidebar-menu, .modal, .chat-area {
    box-shadow: none !important;
  }
}