/* Mobile-first enhancements for Lenny Lodge */

/* Respect notches and home indicators */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

body { padding-bottom: calc(var(--safe-bottom, 0px)); }

header { padding-top: calc(16px + var(--safe-top, 0px)); }

.chat-fab { right: calc(16px + var(--safe-right, 0px)); bottom: calc(20px + var(--safe-bottom, 0px)); }
.chat-panel { right: calc(12px + var(--safe-right, 0px)); bottom: calc(96px + var(--safe-bottom, 0px)); }

/* Improve tap target sizes */
button, .btn, .chip, input { min-height: 44px; }

/* Input styles for mobile */
input.input, .chat-input input {
  font-size: 16px; /* avoid iOS zoom */
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Larger hit area for chips */
.chip { padding: 12px 14px; }

/* Constrain hero content for very small screens */
@media (max-width: 360px) {
  .hero-head { grid-template-columns: 48px 1fr; }
  .hero-head img { width: 48px; height: 48px; }
  .hero-title { font-size: 19px; }
}

/* Overlay drag handle hint (visual) */
.stepper::before {
  content: "";
  width: 40px;
  height: 4px;
  background: #d9e2ec;
  border-radius: 999px;
  margin: 4px auto 8px auto;
  display: block;
}