/* ── PWA Responsive / Mobile ───────────────────────── */
@media (max-width: 768px) {
  :root {
    --panel-width: 0%;
  }

  /* ── Native app feel ──────────────────────────────── */
  html,
  body {
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ── Latency stats: hidden by default, toggle-able ── */
  .latency-stats {
    display: none;
    width: 100%;
    order: 20;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    font-size: 9px;
    padding: 6px 0 2px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
  }
  .latency-stats.m-visible {
    display: grid;
  }
  .latency-stats .sep {
    display: none;
  }
  .latency-stats .heartbeat {
    display: none;
  }
  .latency-stats .stat-group {
    padding: 2px 6px;
    justify-content: center;
    font-size: 9px;
  }
  .latency-stats .stat-label {
    font-size: 8px;
  }
  .latency-stats .value {
    font-size: 10px;
  }
  #pollHealth,
  #backoffStatus {
    display: none !important;
  }

  /* ── Feed: edge-to-edge cards ─────────────────────── */
  #feed {
    padding: 6px;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Cards: compact horizontal layout ─────────────── */
  .listing-card {
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "thumb info"
      "thumb actions"
      "center center"
      "time   time";
    gap: 0 10px;
    padding: 10px;
    margin-bottom: 6px;
    border-radius: var(--radius-md);
    border-left-width: 3px;
    animation: none;
  }
  .listing-card::before {
    display: none;
  }
  .listing-card:hover {
    transform: none;
    box-shadow: none;
  }

  .listing-thumb {
    width: 100px;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    border-radius: var(--radius-sm);
    align-self: start;
  }

  .listing-info {
    min-width: 0;
    padding-top: 0;
  }
  .listing-info h3 {
    font-size: 14px;
    margin-bottom: 2px;
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }
  .listing-meta {
    font-size: 11px;
    gap: 4px;
    min-height: unset;
  }
  .listing-meta .vehicle-tag {
    padding: 2px 6px;
    font-size: 9px;
  }

  /* ── Center section: compact details + seller/phone on mobile ─────── */
  .listing-center {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .vehicle-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .vehicle-details .vd-id {
    font-size: 10px;
    padding-bottom: 4px;
    margin-bottom: 2px;
  }
  .vehicle-details .vd-item {
    gap: 4px;
    min-width: 0;
    overflow: hidden;
  }
  .vehicle-details .vd-label {
    font-size: 9px;
    letter-spacing: 0.4px;
  }
  .vehicle-details .vd-value {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* Telefonnummer prominent + tap-tauglich (44px Touch-Target) */
  .seller-info {
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
    min-height: unset;
  }
  .seller-info .seller-name {
    font-size: 12px;
  }
  .seller-info .seller-phone-link,
  .seller-info .seller-phone-text {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,229,160,0.12);
    border: 1px solid rgba(0,229,160,0.35);
    color: var(--green);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
  }
  .seller-info .seller-phone-link:hover,
  .seller-info .seller-phone-link:active {
    background: rgba(0,229,160,0.2);
    text-decoration: none;
  }

  /* ── Actions: inline row ──────────────────────────── */
  .listing-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
  }
  .listing-price {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.3px;
  }

  /* ── Time row: minimal ────────────────────────────── */
  .listing-time {
    padding-top: 4px;
    margin-top: 4px;
    font-size: 10px;
    gap: 8px;
    border-top: 1px solid var(--border);
  }
  .listing-time .time-label {
    font-size: 9px;
    padding: 1px 5px;
  }
  .listing-time .time-value {
    font-size: 10px;
  }
  .listing-time .latency-badge {
    font-size: 9px;
    padding: 1px 6px;
  }

  /* ── Quick overlay ────────────────────────────────── */
  #quick-overlay {
    left: 8px;
    right: 8px;
    bottom: 8px;
    min-width: unset;
    max-width: unset;
    padding: 14px;
  }

  /* ── Banners: tighter ─────────────────────────────── */
  .session-banner {
    margin: 4px 6px 0;
    padding: 6px 10px;
    font-size: 11px;
  }
  .auth-debug-banner {
    margin: 4px 6px 0;
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ── Extra small (≤ 360px) ───────────────────────────── */
@media (max-width: 360px) {
  .listing-card {
    grid-template-columns: 80px 1fr;
  }
  .listing-thumb {
    width: 80px;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
  }
  .listing-info h3 {
    font-size: 13px;
  }
  .listing-price {
    font-size: 16px;
  }
  .listing-buttons .btn-buynow,
  .listing-buttons .btn-bid {
    padding: 5px 8px !important;
    font-size: 10px !important;
  }
  .deal-score {
    min-width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .age-badge {
    font-size: 10px;
    padding: 3px 6px;
    min-height: 30px;
  }
}

/* ── PWA: Remove Electron-only UI ──────────────────── */
#resizeHandle,
#webview-panel {
  display: none !important;
}
-webkit-app-region {
  drag: none;
}

/* ── Modern viewport units (dvh/lvh/svh) ──────────────── */
/* Avoids mobile browser address-bar jumps that the legacy `100vh` causes. */
html,
body {
  height: 100vh; /* fallback */
  height: 100lvh; /* large viewport — never shrinks */
  min-height: 100svh; /* small viewport — never overflows */
}
@supports (height: 100dvh) {
  html,
  body {
    height: 100dvh; /* dynamic viewport — adapts to UI chrome */
  }
}

/* Make every full-height container behave consistently. */
.main-container,
#feed-panel,
#feed,
#webview-panel {
  min-height: 0;
}

/* ── Tablet / narrow desktop ──────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --panel-width: 60%;
  }
  header {
    padding: 10px 16px;
  }
  .feed-toolbar {
    padding: 6px 16px;
  }
  #feed {
    padding: 12px 16px;
  }
}

/* ── Mobile landscape / small tablet ──────────────────── */
@media (max-width: 768px) {
  :root {
    --panel-width: 100%;
  }
  header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .header-left {
    flex-wrap: wrap;
    gap: 10px;
  }
  .status-bar {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
  }
  .main-container {
    flex-direction: column;
  }
  #feed-panel {
    min-width: 0;
  }
  #webview-panel.open {
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-top: 1px solid var(--glass-border);
  }
  #feed {
    padding: 10px 12px;
  }
  .feed-toolbar {
    padding: 6px 12px;
  }
}

/* ── Mobile portrait ──────────────────────────────────── */
@media (max-width: 480px) {
  header h1 {
    font-size: 12px;
  }
  .btn {
    padding: 6px 12px;
    font-size: 11px;
  }
  .btn-small {
    padding: 5px 10px;
    font-size: 10px;
  }
  .listing-info h3 {
    font-size: 18px;
  }
  .listing-price {
    font-size: 20px;
  }
  .vehicle-details {
    grid-template-columns: 1fr !important;
    padding: 10px 12px;
    gap: 4px;
  }
  .listing-time {
    gap: 8px;
    font-size: 11px;
  }
}

/* ── Reduce motion preference ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── High-density displays ────────────────────────────── */
@media (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

/* ── Header-Stabilität: kein Wippen durch Latency/Status-Updates ─────── */
/* Behebt das vertikale Springen (Laptop & Tablet), wenn sich Zahlen, */
/* Status-Pillen oder Latency-Werte im Header ändern. */
header {
  min-height: 56px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.status-bar {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.latency-stats {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
/* Tabellarische Ziffern: gleichbleibende Breite pro Digit → kein Reflow */
.latency-stats,
.latency-stats .value,
.latency-stats .stat-group,
#counter,
#stats,
.status-bar {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Header-Layout: feste Reihenfolge, links flexibel, rechts kompakt ──── */
header {
  align-items: center;
  gap: 12px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.login-area {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.latency-stats {
  flex: 0 1 auto;
}

/* ── Laptop / kleinerer Desktop (≤ 1440px): Header kompakter ────────── */
@media (max-width: 1440px) {
  header {
    padding: 10px 18px;
    gap: 10px;
  }
  .header-left {
    gap: 8px;
  }
  header h1 {
    font-size: 1.05rem;
  }
  .latency-stats {
    gap: 6px;
    font-size: 10.5px;
  }
  .latency-stats .stat-group {
    padding: 2px 8px;
    gap: 4px;
  }
  .latency-stats .stat-label {
    font-size: 8.5px;
    letter-spacing: 0.4px;
  }
  .latency-stats .value {
    font-size: 11px;
  }
  .latency-stats .sep {
    display: none;
  }
  /* Sekundäre Infos zuerst weglassen */
  #pollHealth,
  #backoffStatus {
    display: none !important;
  }
}

/* ── Schmaler Laptop (≤ 1280px): "Letzter" weg, Buttons schrumpfen ───── */
@media (max-width: 1280px) {
  .latency-stats .stat-group:last-child {
    display: none;
  } /* Letzter */
  .login-area {
    gap: 6px;
  }
  .login-area .btn-small {
    padding: 6px 10px;
    font-size: 12px;
  }
  #stats {
    display: none;
  }
}

/* ── Sehr schmaler Laptop (≤ 1100px): Markt-Alter weg ────────────── */
@media (max-width: 1100px) {
  .latency-stats .stat-group:nth-child(3) {
    display: none;
  } /* Markt-Alter */
}

/* ── Tablet (≤ 1024px): Header einzeilig, Buy-Alert ausblenden ───────── */
@media (max-width: 1024px) {
  header {
    min-height: 52px;
    flex-wrap: nowrap;
  }
  .header-left {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
  }
  .status-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .status-bar::-webkit-scrollbar {
    display: none;
  }

  /* Buy-Alert / Quick-Mode-Overlay auf Tablets ausblenden */
  #quick-overlay,
  #quick-overlay.visible {
    display: none !important;
  }
}

/* ── Mobile (≤ 768px): Buy-Alert ebenfalls ausblenden ───────────────── */
@media (max-width: 768px) {
  #quick-overlay,
  #quick-overlay.visible {
    display: none !important;
  }
}