Initial commit: Telegram Management System

Full-stack web application for Telegram management
- Frontend: Vue 3 + Vben Admin
- Backend: NestJS
- Features: User management, group broadcast, statistics

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

marketing-agent/frontend/src/styles/mobile.css

@@ -0,0 +1,192 @@
+/* Mobile-specific styles for Marketing Agent System */
+
+/* Ensure full height on mobile browsers */
+.h-full {
+  height: 100vh;
+  height: -webkit-fill-available;
+}
+
+/* Fix iOS Safari bottom bar issue */
+.pb-safe {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* Mobile-optimized form elements */
+@media (max-width: 768px) {
+  /* Larger touch targets */
+  .el-button {
+    min-height: 44px;
+  }
+  
+  .el-input__inner {
+    height: 44px !important;
+    font-size: 16px !important; /* Prevent zoom on iOS */
+  }
+  
+  .el-select .el-input__inner {
+    height: 44px !important;
+  }
+  
+  /* Better spacing for mobile */
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+  
+  /* Mobile-friendly tables */
+  .el-table {
+    font-size: 14px;
+  }
+  
+  .el-table .cell {
+    padding: 8px 10px;
+  }
+  
+  /* Responsive cards */
+  .el-card {
+    margin-bottom: 12px;
+  }
+  
+  .el-card__body {
+    padding: 12px;
+  }
+  
+  /* Mobile dialogs */
+  .el-dialog {
+    width: 90% !important;
+    margin-top: 10vh !important;
+  }
+  
+  .el-dialog__body {
+    padding: 15px;
+  }
+  
+  /* Mobile message boxes */
+  .el-message-box {
+    width: 80%;
+  }
+  
+  /* Mobile dropdowns */
+  .el-dropdown-menu {
+    min-width: 150px;
+  }
+  
+  /* Bottom navigation spacing */
+  .pb-20 {
+    padding-bottom: 5rem;
+  }
+}
+
+/* Smooth scrolling */
+.scroll-smooth {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+}
+
+/* Prevent text selection on interactive elements */
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Mobile tap highlight */
+.tap-highlight {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Loading states */
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Pull to refresh indicator */
+.pull-to-refresh {
+  position: absolute;
+  top: -50px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: top 0.3s;
+}
+
+.pull-to-refresh.active {
+  top: 10px;
+}
+
+/* Mobile-optimized animations */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Swipe actions */
+.swipe-action {
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;
+}
+
+.swipe-action-content {
+  position: relative;
+  background: white;
+  z-index: 2;
+  transition: transform 0.3s;
+}
+
+.swipe-action-buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* Mobile-friendly tooltips */
+@media (max-width: 768px) {
+  .el-tooltip__popper {
+    max-width: 250px;
+    font-size: 12px;
+  }
+}
+
+/* Responsive images */
+.responsive-img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Mobile grid adjustments */
+@media (max-width: 640px) {
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  
+  .grid-cols-3 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  
+  .grid-cols-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}