/* Mobile-first responsive overrides – layout and touch targets when opened on small screens */

/* Safe area for notched devices (e.g. iPhone X+) */
.chat-header {
  padding-top: max(var(--header-padding-y), env(safe-area-inset-top, 0px));
}

/* Narrow viewports: reduce padding and font sizes so UI fits and remains tappable */
@media (max-width: 767px) {
  :root {
    --content-padding-x: 0.875rem;
    --content-padding-y: 0.875rem;
    --header-padding-x: 1rem;
    --header-padding-y: 0.75rem;
    --input-padding-x: 1rem;
    --input-padding-y: 0.75rem;
  }

  .chat-header {
    padding: max(var(--header-padding-y), env(safe-area-inset-top, 0px)) var(--header-padding-x) var(--header-padding-y);
    gap: 0.5rem;
  }

  .chat-header h1 {
    font-size: 1.05rem;
  }

  .chat-subtitle {
    font-size: 0.75rem;
  }

  .sidebar-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .messages {
    padding: var(--content-padding-y) var(--content-padding-x) var(--input-padding-y);
    gap: 1rem;
  }

  .messages > * {
    max-width: 100%;
  }

  .message {
    max-width: 92%;
  }

  .bubble {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
  }

  .input-bar {
    padding: var(--input-padding-y) var(--input-padding-x);
    padding-bottom: calc(var(--input-padding-y) + env(safe-area-inset-bottom, 0px));
    gap: 0.5rem;
  }

  .input-bar textarea {
    min-height: 44px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
  }

  .btn-attach,
  .btn-send {
    min-height: 44px;
    min-width: 44px;
    padding: 0.6rem 0.875rem;
  }
}

/* Very small phones: tighter layout, keep touch targets */
@media (max-width: 480px) {
  :root {
    --content-padding-x: 0.75rem;
    --header-padding-x: 0.75rem;
    --input-padding-x: 0.75rem;
  }

  .chat-header h1 {
    font-size: 1rem;
  }

  .chat-subtitle {
    display: block;
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .bubble {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
  }

  .bubble th,
  .bubble td {
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
  }

  .bubble .bubble-sql {
    font-size: 0.6875rem;
    padding: 0.5rem 0.75rem;
  }

  .btn-download {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
  }
}

/* Sidebar on mobile: full-width overlay for easier tap targets */
@media (max-width: 767px) {
  .sidebar {
    width: min(var(--sidebar-width), 100vw - 3rem);
    max-width: 320px;
  }
}

/* Prevent horizontal overflow on small screens */
html, body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .app-shell,
  .main-content,
  .chat-layout,
  .messages {
    overflow-x: hidden;
  }
}