/* ============================================================
   MOBILE RESPONSIVE — append this to the bottom of style.css
   Breakpoints: tablet ≤ 900px | mobile ≤ 600px
   ============================================================ */

/* ── TABLET (≤ 900px) ──────────────────────────────────────── */
@media (max-width: 900px) {

    body { overflow: auto; }
  
    /* App layout: stack vertically on tablet */
    .app {
      flex-direction: column;
      height: auto;
      min-height: 100vh;
    }
  
    /* Sidebar becomes a top bar that collapses */
    .sidebar {
      width: 100%;
      max-height: 52px;
      overflow: hidden;
      flex-direction: row;
      align-items: center;
      border-right: none;
      border-bottom: 1.5px solid var(--border-light);
      transition: max-height 0.3s ease;
      flex-wrap: wrap;
    }
  
    .sidebar.sidebar-expanded {
      max-height: 600px;
      flex-direction: column;
      align-items: stretch;
    }
  
    .sidebar-header {
      flex: 1;
      border-bottom: none;
      cursor: pointer;
      padding: 12px 16px;
    }
  
    .sidebar-header::after {
      content: '▾';
      font-size: 12px;
      color: var(--text-muted);
      margin-left: auto;
    }
  
    .sidebar.sidebar-expanded .sidebar-header::after { content: '▴'; }
  
    .sidebar-search,
    .schema-container {
      width: 100%;
    }
  
    /* Chat area: full width */
    .chat-area {
      flex: 1;
      height: auto;
      min-height: 0;
    }
  
    /* Header: allow wrapping */
    .chat-header {
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px 14px;
    }
  
    .header-stats {
      flex-wrap: wrap;
      gap: 6px;
    }
  
    /* History panel: full width overlay on tablet */
    .history-panel.open {
      width: 100%;
      position: fixed;
      top: 0; right: 0; bottom: 0;
      z-index: 500;
      box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    }
  
    .history-panel-header,
    .history-search,
    .history-list,
    .history-footer {
      min-width: 0;
    }
  
    /* Messages: adjust padding */
    .messages { padding: 16px 12px; }
  
    /* Input container: adjust */
    .input-container { padding: 10px 12px 14px; }
  }
  
  /* ── MOBILE (≤ 600px) ──────────────────────────────────────── */
  @media (max-width: 600px) {
  
    body { overflow-x: hidden; }
  
    /* ── LOGIN CARD ─────────────────────────────── */
    .login-screen { padding: 16px; align-items: flex-start; padding-top: 40px; }
    .login-card   { padding: 28px 20px 24px; border-radius: 16px; }
    .login-logo   { width: 52px; height: 52px; }
    .login-title  { font-size: 20px; }
    .login-sub    { font-size: 13px; }
  
    /* ── APP LAYOUT ─────────────────────────────── */
    .app { flex-direction: column; height: auto; min-height: 100dvh; }
  
    /* ── SIDEBAR: collapsible top drawer ───────── */
    .sidebar {
      width: 100%;
      max-height: 48px;
      overflow: hidden;
      flex-direction: column;
      border-right: none;
      border-bottom: 1.5px solid var(--border-light);
      transition: max-height 0.3s ease;
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--bg-sidebar);
    }
  
    .sidebar.sidebar-expanded { max-height: 70vh; overflow-y: auto; }
  
    .sidebar-header {
      display: flex;
      align-items: center;
      padding: 12px 14px;
      border-bottom: none;
      cursor: pointer;
      flex-shrink: 0;
    }
  
    .sidebar-header h2 { font-size: 13px; }
  
    /* ── CHAT HEADER ────────────────────────────── */
    .chat-header {
      flex-direction: column;
      align-items: flex-start;
      padding: 10px 12px;
      gap: 8px;
    }
  
    .header-brand { gap: 10px; }
    .brand-icon   { width: 32px; height: 32px; }
    .main-title   { font-size: 16px; }
    .subtitle     { font-size: 11px; display: none; }
  
    .header-stats {
      width: 100%;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-start;
    }
  
    /* Shrink header buttons on mobile */
    .user-chip        { font-size: 12px; padding: 3px 8px 3px 3px; }
    .user-avatar-sm   { width: 22px; height: 22px; font-size: 10px; }
    .connect-db-btn   { font-size: 12px; padding: 5px 10px; }
    .history-toggle-btn{ font-size: 12px; padding: 5px 10px; }
    .stat-chip        { font-size: 11px; padding: 4px 8px; }
  
    /* Hide text labels on very small screens, keep icons */
    @media (max-width: 380px) {
      #db-btn-label    { display: none; }
      .history-toggle-btn span { display: none; }
    }
  
    /* ── MESSAGES ───────────────────────────────── */
    .messages { padding: 12px 10px 8px; flex: 1; }
  
    /* Welcome screen */
    .welcome-screen { padding: 24px 16px; }
    .welcome-icon svg { width: 32px; height: 32px; }
    .welcome-screen h2 { font-size: 18px; }
    .welcome-screen p  { font-size: 13px; }
  
    /* Sample query buttons */
    .sample-queries { gap: 6px; }
    .sample-btn     { font-size: 12px; padding: 8px 12px; }
  
    /* ── ASSISTANT CARD ─────────────────────────── */
    .assistant-card { padding: 14px 12px; border-radius: 12px; }
  
    /* SQL block */
    .sql-block { font-size: 12px; padding: 12px; border-radius: 8px; overflow-x: auto; }
  
    /* Results table: horizontal scroll */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table          { min-width: 400px; font-size: 12px; }
    th, td         { padding: 7px 10px; }
  
    /* Chart */
    .chart-card { height: 200px; }
  
    /* Row count badge */
    .row-count-badge { font-size: 10px; }
  
    /* ── INPUT BOX ──────────────────────────────── */
    .input-container { padding: 8px 10px 12px; }
    .input-box       { border-radius: 12px; padding: 8px 10px; }
    #nl-query        { font-size: 14px; }
    #run-query       { padding: 7px 14px; font-size: 13px; }
    .input-hint      { font-size: 10px; }
  
    /* ── HISTORY PANEL ──────────────────────────── */
    .history-panel.open {
      width: 100%;
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: 600;
      border-radius: 0;
    }
  
    .history-panel-header { min-width: 0; padding: 14px 14px 10px; }
    .history-search       { min-width: 0; padding: 8px 14px; }
    .history-list         { min-width: 0; }
    .history-footer       { min-width: 0; }
  
    /* ── MODAL ──────────────────────────────────── */
    .modal-box {
      margin: 10px;
      border-radius: 12px;
      max-height: 90vh;
      overflow-y: auto;
    }
    .modal-header { padding: 16px 16px 12px; }
    .modal-body   { padding: 14px 16px; gap: 12px; }
    .modal-footer { padding: 12px 16px; }
    .modal-title  { font-size: 14px; }
    .modal-input  { font-size: 12px; }
    .provider-card span { font-size: 10px; }
  
    /* ── SECTION LABELS ─────────────────────────── */
    .section-label { font-size: 11px; gap: 5px; }
    .copy-btn      { font-size: 11px; padding: 3px 8px; }
  
    /* ── USER MESSAGE ───────────────────────────── */
    .user-bubble { font-size: 13px; padding: 10px 14px; max-width: 90%; }
  
    /* ── ERROR CARD ─────────────────────────────── */
    .error-card { padding: 10px 14px; font-size: 13px; border-radius: 8px; }
  
    /* ── SCHEMA CARD ────────────────────────────── */
    .schema-card-header { padding: 10px 12px; }
    .schema-card-header h3 { font-size: 12px; }
    .column { padding: 5px 12px; font-size: 11px; }
  }
  
  /* ── VERY SMALL (≤ 360px) ──────────────────────────────────── */
  @media (max-width: 360px) {
    .login-card { padding: 20px 14px; }
    .chat-header { padding: 8px 10px; }
    .messages { padding: 10px 8px; }
    .assistant-card { padding: 12px 10px; }
    .sql-block { font-size: 11px; }
    table { font-size: 11px; }
    th, td { padding: 6px 8px; }
  }
  
  /* ── SIDEBAR TOGGLE BUTTON (mobile only) ───────────────────── */
  @media (max-width: 900px) {
    .sidebar-header { user-select: none; }
  }