/* Keep text readable and controls reachable on narrow screens. */
html { color-scheme: light; }
html, body { background: #000; }
.welcome, .app { width: 100%; max-width: 480px; margin-inline: auto; background: #fff; }
/* The vh declarations also cover browsers without dynamic viewport units. */
.welcome { min-height: 100vh; min-height: 100dvh; }
.app { height: 100vh; height: 100dvh; }
.bottom { flex-shrink: 0; background: #fff; }
main, main > section, .bottom { min-width: 0; }
.user-profile, .company-profile, .friends-view, .search-view { overscroll-behavior: contain; scrollbar-gutter: stable; }
h1, h2, h3, p, dt, dd, .business-name, .business-category, .friend-name,
.profile-category, .profile-services li, .coupon-card-header, .home-list li,
.view-terms, .profile-back, .claim-button { overflow-wrap: anywhere; }
.user-header > div, .business-link > div, .business-link > span,
.recommendation-company > span, .friend-name { min-width: 0; }
.user-header > div, .business-link > div, .business-link > span,
.recommendation-company > span { flex: 1; }
.friend-avatar, .coupon-card-header img, .source-icon { flex-shrink: 0; }
.friend-link .friend-name { flex: 1; }
.wallet-tabs, .friend-filters { flex-wrap: wrap; }
button.claim-button, button.profile-back, button.wallet-tab, button.friend-filter {
  min-height: 44px; height: auto; padding-top: 10px; padding-bottom: 10px;
  line-height: 1.4; max-width: 100%;
}
button.view-terms, button.show-all { min-height: 44px; text-align: left; line-height: 1.4; }
.claim-actions .view-terms { padding: 10px 0; }
.demo-panel select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.demo-panel input { max-width: 100%; min-width: 0; }
.category-menu { max-width: calc(100vw - 32px); max-height: 55dvh; overflow-y: auto; }
.profile-tags > *, .profile-socials > * { max-width: 100%; }
.coupon-status { font-weight: 700; }
.coupon-status[data-state="expired"] { background: #fff0e3; color: #925619; }
.coupon-status[data-state="used"] { background: #f0edf4; color: #625b70; }
.invitation-details { margin-top: 12px; font-size: 13px; }
.invitation-details summary { color: #6c33dc; cursor: pointer; padding: 10px 0; }
.invitation-list { list-style: none; padding: 0; margin: 0; }
.invitation-list li { padding: 10px 0; border-top: 1px solid #e9dff9; overflow-wrap: anywhere; }
.invitation-list small { display: block; margin-top: 4px; color: #77717e; line-height: 1.5; }
.list-more { list-style: none; }
.list-more button { width: 100%; text-align: center; padding: 12px; margin: 8px 0; border: 1px solid #e9dff9; border-radius: 12px; }
.list-count { color: #77717e; font-size: 12px; margin: 12px 0; }
.search-empty { margin: 24px 0; }
#demo-coupon-preview .bonus-card { padding: 14px; }
dialog { max-height: calc(100dvh - 40px); overflow-y: auto; overflow-wrap: anywhere; }
dialog input { min-width: 0; }
#notification { width: max-content; max-width: min(85vw, 430px); overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .user-profile, .company-profile, .friends-view, .search-view { padding-left: 16px; padding-right: 16px; }
  .user-header { gap: 12px; align-items: flex-start; }
  .user-avatar, .user-header .friend-avatar { width: 64px; height: 64px; }
  .user-profile h1 { font-size: 23px; }
  .company-profile h1 { font-size: 26px; }
  .business-name { font-size: 18px; }
  .avatar { width: 48px; height: 48px; }
  button.business-link, button.recommendation-company { gap: 12px; }
  .referral-offer { margin-left: 0; }
  .coupon-card, .bonus-card { padding: 14px; }
  .demo-panel { padding: 12px; }
  .filter, button.category-trigger { padding-left: 7px; padding-right: 7px; gap: 2px; }
}