/* ================================================
   css/responsive.css — Mobile and Responsive Styles
   ================================================ */

/* --- Tablet / Large Mobile (Max 1100px) --- */
@media (max-width: 1100px) {
  :root {
    --stages-w: 0px;
  }
  .stages-panel {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0;
    right: 0;
    width: 100vw !important;
    max-width: 390px !important;
    height: 100vh !important;
    z-index: 2000 !important;
    background: var(--bg-secondary) !important;
    border-left: 1px solid var(--gold-border) !important;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.6) !important;
  }

  .stages-panel.active {
    transform: translateX(0) !important;
  }

  .stages-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .mobile-stages-toggle {
    display: flex !important;
  }

  .stages-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--gold-border);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: var(--transition);
  }

  .stages-close:hover {
    color: var(--gold-light);
    border-color: var(--gold);
    background: var(--gold-glow);
  }

  .two-col, .three-col {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
}

/* --- Mobile Portrait & Landscape (Max 768px) --- */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 100%;
    --header-h: 60px;
  }

  html, body {
    overflow: auto; /* Allow viewport scrolling on mobile if content exceeds */
  }

  .app-wrapper {
    display: flex;
    flex-direction: column-reverse !important;
    height: 100vh;
    height: -webkit-fill-available;
    overflow: hidden;
  }

  /* Sidebar changes from Left-Vertical to Bottom-Horizontal sticky bar */
  .sidebar {
    width: 100% !important;
    min-width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    flex-direction: row !important;
    border-right: none !important;
    border-top: 1px solid var(--gold-border);
    padding: 0 10px !important;
    position: relative !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    background: var(--bg-secondary);
    justify-content: space-around;
    align-items: center;
  }

  .sidebar-logo {
    display: none !important; /* Hide logo in bottom nav bar */
  }

  .sidebar-nav {
    flex-direction: row !important;
    justify-content: space-around;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .nav-item {
    font-size: 8.5px !important;
    padding: 6px 4px !important;
    gap: 2px !important;
    flex: 1;
    max-width: 70px;
  }

  .nav-item svg {
    width: 18px !important;
    height: 18px !important;
  }

  .nav-item.active::before {
    left: 50%;
    top: auto;
    bottom: -4px;
    transform: translateX(-50%);
    width: 50%;
    height: 3px;
    border-radius: 2px 2px 0 0;
  }

  .sidebar-spacer, .sidebar-divider, .sidebar-logout {
    display: none !important; /* Hide spacer, divider and settings/logout in bottom sticky nav */
  }

  /* Main Content Area adjusts for bottom nav height */
  .main-content {
    flex: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    padding-bottom: 0px;
  }

  .content-area {
    height: 100%;
    overflow: hidden;
  }

  /* Chat screen specific mobile fixes */
  .chat-panel {
    flex-direction: column !important;
    border-right: none !important;
  }

  .chat-history-sidebar {
    display: none !important; /* Hide chat history on mobile */
  }

  .messages-container {
    padding: 16px 14px 12px !important;
    gap: 16px !important;
  }

  .message {
    max-width: 95% !important;
  }

  .message-bubble {
    padding: 11px 14px !important;
    font-size: 13.5px !important;
  }

  .app-header {
    padding: 0 16px !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  .header-brand {
    gap: 8px !important;
  }

  .header-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .header-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .header-text h1 {
    font-size: 15px !important;
  }

  .header-text p {
    font-size: 10.5px !important;
  }

  /* Input area responsive stacking */
  .input-area {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  /* Transform large upload zone into a compact circular button on mobile! */
  .upload-zone {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    justify-content: center !important;
    background: var(--bg-card) !important;
  }

  .upload-zone .upload-label,
  .upload-zone .upload-hint,
  .upload-zone .upload-file-name {
    display: none !important; /* Hide text guides */
  }

  .upload-zone svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }

  #messageInput {
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    min-height: 44px !important;
  }

  .btn-send {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
  }

  /* Inner Pages Specific Fixes */
  .page-inner {
    padding: 18px 16px 32px !important;
    gap: 18px !important;
  }

  .page-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .page-heading-right {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .page-heading-right .form-input {
    width: 100% !important;
  }

  .stats-row {
    grid-template-columns: 1fr !important; /* Vertical stacking for cards on small screens */
    gap: 10px !important;
  }

  .stat-card {
    padding: 14px 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .stat-icon {
    width: 34px !important;
    height: 34px !important;
  }

  .stat-value {
    font-size: 22px !important;
  }

  .files-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .standards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .file-card {
    padding: 12px !important;
  }

  .file-icon-wrap {
    width: 40px !important;
    height: 40px !important;
  }

  .file-icon-wrap svg {
    width: 20px !important;
    height: 20px !important;
  }

  .empty-state {
    padding: 20px 10px !important;
  }

  .suggestion-chips {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .chip {
    text-align: center !important;
  }

  /* Table responsiveness wrapper */
  .table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--gold-border);
  }

  .data-table {
    min-width: 600px; /* Force minimum width to enable horizontal scroll and prevent squeeze */
  }
}

/* --- Tiny Screens / Phones (Max 480px) --- */
@media (max-width: 480px) {
  .files-grid {
    grid-template-columns: 1fr !important; /* Single column files grid */
  }
}