/**
 * Mobile + tablet layer for user-facing KB.
 * Phones: ≤768px. Tablets / iPads: 769px–1024px. Desktop: >1024px.
 */

/* Prevent zoom on input focus (iOS, iPad) */
html { -webkit-text-size-adjust: 100%; }

/* Phones + tablets: 16px inputs to avoid iOS zoom on focus */
@media (max-width: 1024px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Touch-friendly: 44px tap targets for phones and tablets (iPads are touch) */
@media (max-width: 1024px) {
  .btn, button, a.btn,
  input[type="submit"], input[type="button"], button[type="submit"],
  .kb-header .btn, .kb-header a.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  input[type="text"], input[type="search"], input[name="q"],
  select, textarea {
    min-height: 44px;
    padding: 12px 14px;
  }
  textarea { min-height: 88px; }
}

/* Tablet-only: slightly more room, keep header compact */
@media (min-width: 769px) and (max-width: 1024px) {
  /* .wrap.kb-wrap padding: kb_base.html + brand.css (--kb-brand-*) */
  .kb-header-row1 .kb-header-title h1 { font-size: 22px; }
  .kb-header-row2 input { max-width: 360px; }
}

/* Responsive layout: wrap and full width */
@media (max-width: 768px) {
  .wrap { padding: 0 12px; margin: 16px auto; }
  /* KB shell padding: kb_base.html (higher specificity than .wrap alone) */
  .kb-header-row1 { gap: 10px; margin-bottom: 12px; }
  .kb-header-row1 .kb-header-title h1 { font-size: 20px; }
  .kb-header-row1 .kb-header-right { justify-content: flex-end; }
  .kb-header-row2 { flex-direction: column; align-items: stretch; gap: 8px; }
  .kb-header-row2 input {
    min-width: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }
  .kb-header-row2 .btn { width: 100%; }
  .card { padding: 16px; }
}

/* Chat: touch-friendly on tablet, full screen only on phone */
@media (max-width: 1024px) {
  #kbChatPanel input,
  #kbChatPanel .btn {
    min-height: 44px;
    padding: 12px 14px;
  }
  #kbChatPanel .kb-chat-bubble { max-width: 92%; }
}
/* KB chat layout (compact card) lives in kb_unified_chat.css */

/* Forms on mobile: full width, no overflow */
@media (max-width: 768px) {
  form input[type="text"], form input[type="search"], form input[name="q"],
  form select, form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  form .btn, form button[type="submit"] {
    width: 100%;
    max-width: 100%;
  }
  form[style*="display:flex"] { flex-direction: column; }
  form[style*="display:flex"] input { flex: none; }
}

/* Tables: horizontal scroll on phone and tablet */
.kb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 1024px) {
  .kb-table-wrap { margin: 0 -12px; padding: 0 12px; }
  table { min-width: 400px; }
  th, td { padding: 10px 8px; font-size: 13px; }
}

/* Search page form */
@media (max-width: 768px) {
  .kb-search-form { flex-direction: column; align-items: stretch; }
  .kb-search-form input { min-width: 0; width: 100%; flex: none; }
  .kb-search-form .btn { width: 100%; }
}

/* Navigation: touch spacing on phone and tablet */
@media (max-width: 1024px) {
  .kb-cat-link, .kb-articles-list a { min-height: 44px; padding: 12px 14px; }
}
@media (max-width: 768px) {
  .kb-left .card { padding: 12px; }
}