/* Responsive cho Mobile - Web Version */
@media (max-width: 768px) {
  /* 1. MỞ KHÓA SCROLL NATIVE CHO BROWSER MOBILE */
  body.tab-mode {
    overflow: visible !important;
    height: auto !important;
  }

  body.tab-mode .app-container,
  body.tab-mode .app-content-wrapper,
  body.tab-mode .app-main,
  body.tab-mode .view-section.active {
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* 2. CẤU HÌNH LẠI SIDEBAR TRÊN CÙNG */
  body.tab-mode .app-sidebar {
    width: 100%;
    min-width: 100%;
    height: auto !important;
    max-height: none !important;
    border-right: none;
    border-bottom: 1px solid var(--border-glass);
    padding: 16px;
    flex-shrink: 0;
  }

  .sidebar-header {
    margin-bottom: 12px;
  }

  .sidebar-btn-new {
    padding: 10px;
    margin-bottom: 12px;
  }

  .sidebar-history-container {
    padding-right: 4px;
    overflow-y: auto !important;
    max-height: 150px; /* Giới hạn chiều cao lịch sử trên mobile */
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    background: #ffffff;
  }

  /* 3. CẤU HÌNH VÙNG NỘI DUNG */
  body.tab-mode .app-main {
    padding: 16px;
  }

  body.tab-mode #view-input, 
  body.tab-mode #view-processing, 
  body.tab-mode #view-results {
    padding: 0; /* Padding do parent lo */
    overflow: visible !important;
  }

  /* Responsive Tabs */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* Cấu hình các nút checkbox/radio */
  .config-section {
    padding: 12px;
  }

  .checkbox-group {
    flex-direction: column;
    gap: 12px;
  }

  /* Form nhập liệu */
  .input-scroll-body {
    padding: 0 0 16px 0;
    overflow: visible !important;
  }

  .dropzone-content {
    padding: 24px 16px;
  }

  /* Kết quả phân tích */
  body.tab-mode .results-tab-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 16px 0;
  }

  .post-card-header,
  .tiktok-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .btn-text-action {
    align-self: flex-start;
  }

  .console-box {
    min-height: 200px;
  }
}