/* Mobile layer (phones, installed PWA). Loaded last, so it only overrides —
   desktop layout is untouched above 760px. The bottom tab bar reuses the
   existing header .nav-links (app.js keeps its active state and the owner-only
   Pre-Bid entry), it is just pinned to the bottom edge here. */

html { -webkit-text-size-adjust: 100%; }
button, a, select, label, .upload-zone { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* One-tap camera button only where there is a touch screen. */
.upload-zone__camera-btn { display: none; }
@media (pointer: coarse) { .upload-zone__camera-btn { display: block; } }

@media (max-width: 760px) {
  :root {
    --kf-tabbar-h: 58px;
    --kf-bottom: calc(var(--kf-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* ---- Top bar: brand + language + account in one compact row ---- */
  .app-header {
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px));
    gap: 8px;
  }
  .brand { font-size: 20px; }

  /* ---- Bottom tab bar ---- */
  .header-right > .nav-links:not(#nav-account) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    order: 0; flex: none; width: 100%; margin: 0; gap: 0; overflow: visible;
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: var(--surface-raised);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 14px rgba(11, 11, 11, 0.06);
  }
  .header-right > .nav-links:not(#nav-account) .nav-link {
    flex: 1 1 0; min-width: 0; min-height: 46px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    margin: 0; padding: 4px 2px; border: 0; border-radius: 12px; box-shadow: none; opacity: 1;
    background: transparent; color: var(--text-muted);
    font-size: 11px; font-weight: 500; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis;
  }
  .header-right > .nav-links:not(#nav-account) .nav-link::before {
    content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: var(--kf-ic) center / contain no-repeat; mask: var(--kf-ic) center / contain no-repeat;
  }
  .header-right > .nav-links:not(#nav-account) .nav-link.active,
  .header-right > .nav-links:not(#nav-account) #nav-entry.active {
    background: var(--accent-100); border: 0; color: var(--accent);
  }
  @media (max-width: 380px) {
    .app-header { flex-wrap: nowrap; gap: 4px; }
    .brand { font-size: 17px; white-space: nowrap; }
    .header-lang-select { padding-left: 6px; padding-right: 6px; }
    .app-header .nav-link { padding-left: 8px; padding-right: 8px; }
  }
  .header-right > .nav-links:not(#nav-account) .nav-link:active { transform: scale(0.96); }
  #nav-entry { --kf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h3.2l1.6-2.4h7.4L17.3 8h3.2v11.5h-17z'/%3E%3Ccircle cx='12' cy='13.5' r='3.6'/%3E%3C/svg%3E"); }
  #nav-collection { --kf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5'/%3E%3C/svg%3E"); }
  #nav-prebid { --kf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 14h6l-1 7 8-11h-6z'/%3E%3C/svg%3E"); }
  #nav-partners { --kf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='9' cy='12' r='5'/%3E%3Ccircle cx='15' cy='12' r='5'/%3E%3C/svg%3E"); }

  /* The bar must not hide the page's tail, the footer or floating controls. */
  .shell { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: 32px; }
  .app-footer { margin-top: 24px; padding-bottom: calc(var(--kf-bottom) + 16px); }
  .toast { bottom: calc(var(--kf-bottom) + 14px); max-width: calc(100vw - 32px); text-align: center; }

  /* ---- Assistant: round button above the bar, full-screen sheet when open ---- */
  .chat-toggle { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(var(--kf-bottom) + 12px); width: 50px; height: 50px; font-size: 20px; }
  .chat-panel {
    top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: 100%; max-height: none;
    border: 0; border-radius: 0; z-index: 70;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .chat-header { padding: 14px 16px; }
  .chat-header .chat-close { font-size: 20px; min-width: 44px; min-height: 44px; }

  /* ---- Touch targets and inputs (16px stops iOS from zooming on focus) ---- */
  input, select, textarea { font-size: 16px; }
  select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { min-height: 44px; }
  .primary-button, .secondary-button { min-height: 46px; }
  .header-lang-select { min-height: 40px; padding-left: 10px; padding-right: 10px; }

  /* ---- Home hero: the headline's longest word overflowed at 320px; justified
     text left wide gaps in short lines ---- */
  .entry-hero { padding-top: 24px; }
  .entry-hero h1 { font-size: clamp(22px, 7.2vw, 30px); overflow-wrap: break-word; }
  .entry-hero p { text-align: center; }

  /* ---- Partners page: plain .pp-cards3 stayed two columns on a phone ---- */
  .pp-cards3 { grid-template-columns: 1fr; }
  .pp-cardbox { min-width: 0; overflow-wrap: anywhere; }

  /* ---- Photo capture screen ---- */
  .upload-zone { padding: 20px 14px; }
  .upload-zone__actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
  .upload-zone__actions .primary-button,
  .upload-zone__actions .secondary-button { width: 100%; min-height: 52px; font-size: 16px; }
  .upload-zone__add-btn { outline: none; }
  .type-picker select { max-width: none !important; }
  .photo-slots { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .photo-slot .remove-btn { width: 30px; height: 30px; }
  /* Once photos are added, the start button stays under the thumb while the
     list scrolls; the assistant button moves up out of its way. */
  .upload-start-btn { width: 100%; min-height: 52px; font-size: 16px; }
  .upload-start-btn:not(:disabled) {
    position: sticky; bottom: calc(var(--kf-bottom) + 10px); z-index: 5;
    box-shadow: 0 6px 18px rgba(11, 11, 11, 0.16);
  }
  body:has(.upload-start-btn:not(:disabled)) .chat-toggle { bottom: calc(var(--kf-bottom) + 76px); }
}