/* Phone and tablet improvements; desktop branding is preserved. */
html { scroll-padding-top: 90px; }
body { overflow-wrap: anywhere; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #e8784f; outline-offset: 3px;
}
.form input, .form select, .form textarea, .chat-form input { min-width: 0; width: 100%; font-size: 16px; }
.form label { min-width: 0; font-size: 14px; }
.form input[type="checkbox"] { width: 22px; height: 22px; vertical-align: middle; margin-right: 8px; }
.form textarea { resize: vertical; }
.modal-box { overscroll-behavior: contain; max-height: 92dvh; }
.modal .close { min-width: 44px; min-height: 44px; border-radius: 50%; background: #f1f3ef; }
.modal-intro, .notice, .sub { font-size: 14px; }
.account-card .soft { min-height: 44px; margin: 4px; }
.account-card .form { text-align: left; }
.account-btn { max-width: 230px; }
.account-btn > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-icon { display: none; }
.chat, .chat-log, .row > div { min-width: 0; }
.grid, .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.connection-status { margin: 0; padding: 12px 20px; background: #fff0d5; color: #573e15; text-align: center; }
body.modal-open { overflow: hidden; }

@media (max-width: 1000px) and (min-width: 901px) {
  .appbar { gap: 12px; padding-inline: 16px; }
  .nav button { padding-inline: 8px; }
  .top-actions > .soft { display: none; }
}
@media (max-width: 900px) {
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .appbar { gap: 12px; justify-content: space-between; padding-top: env(safe-area-inset-top); height: calc(68px + env(safe-area-inset-top)); }
  .top-actions { margin-left: auto; min-width: 0; }
  .top-actions #accountButton { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .nav { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); box-shadow: 0 -4px 20px #17231c0a; }
  .nav button { min-height: 60px; min-width: 0; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; line-height: 1.25; }
  .nav-icon { display: block; width: 22px; height: 22px; flex: none; }
  .nav button.active { background: var(--mint); }
  .grid, .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .threads { width: auto; min-width: 0; }
  .messages { grid-template-columns: 230px minmax(0, 1fr); height: calc(100dvh - 178px - env(safe-area-inset-bottom)); }
  .hero-photo { min-height: 0; height: 340px; }
  .hero-copy { padding: 36px; }
  .section { padding: 32px 0; }
  .section-head p { line-height: 1.5; }
  .seller, .filters input, .filters select, .primary, .soft { min-height: 48px; }
  #breeder { padding: 24px 18px !important; }
  #breeder h1 { font: 500 36px/1.12 Georgia, serif; }
}
@media (max-width: 600px) {
  .appbar { padding-inline: 14px; gap: 8px; }
  .brand { gap: 7px; font-size: 17px; }
  .brand-mark { width: 34px; height: 34px; }
  .top-actions { gap: 6px; }
  .top-actions .icon-btn { display: none; }
  .account-btn { max-width: 145px; padding-right: 10px; }
  .top-actions #accountButton.primary { padding: 10px 14px; }
  .shell { width: calc(100% - 28px); }
  .hero { min-height: 0; }
  .hero-copy { padding: 28px 20px; }
  .hero h1 { font-size: clamp(38px, 11vw, 54px); letter-spacing: -1.5px; margin: 16px 0; }
  .hero p { font: 16px/1.55 Arial, sans-serif; }
  .hero-actions { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-actions button { padding: 10px; }
  .hero-photo { height: 220px; }
  .stat-card { left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; }
  .stat-card b { font-size: 17px; }
  .stat-card span { font-size: 13px; }
  .section-head { gap: 16px; margin-bottom: 20px; }
  .section-head h2 { font-size: 32px; }
  .section-head > button { width: 100%; }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters input { grid-column: 1/-1; }
  .filters input, .filters select { min-width: 0; width: 100%; font-size: 16px; padding: 12px 8px; }
  .grid, .service-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card-photo, .product .card-photo { height: auto; aspect-ratio: 4 / 3; }
  .card-photo img { display: block; }
  .card-body { padding: 16px; }
  .seller { line-height: 1.5; }
  .feed-layout { padding: 20px 0; }
  .composer { padding: 12px; gap: 8px; }
  .composer button { padding: 10px 12px; border-radius: 14px; font-size: 16px; }
  .post-head { padding: 12px; }
  .post-actions button { padding: 12px 4px; min-height: 48px; font-size: 14px; }
  .empty { padding: 28px 16px; }
  .messages { grid-template-columns: minmax(0, 1fr); min-height: 280px; }
  .messages .threads { display: none; }
  .chat-form { padding: 10px; gap: 6px; }
  .chat-form input { padding: 12px 8px; }
  .chat-form button { padding: 10px; }
  .modal { padding: 0; align-items: end; }
  .modal-box { width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 12px); padding: 18px max(8px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-radius: 22px 22px 0 0; }
  .modal h2 { font-size: 28px; padding-top: 4px; }
  .modal .form { grid-template-columns: minmax(0, 1fr); }
  .modal .full { grid-column: 1/-1; }
  .modal .form button, .auth-tabs button { min-height: 48px; }
  .form label { line-height: 1.5; }
  #recaptcha { overflow-x: auto; }
  #publicProfileForm { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Private inbox and support, including the phone list-to-chat flow. */
.message-breeder { width: 100%; margin-top: 14px; }
.support-footer { padding: 20px; text-align: center; }
.support-page { max-width: 700px; }
.care-entry { width: 100%; margin-bottom: 14px; text-align: left; }
.care-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.care-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.care-check input { width: 22px; height: 22px; flex: none; }
.care-filters { align-items: center; }
.care-section { border-bottom: 1px solid var(--line); }
.my-care { margin-top: 28px; padding: 18px; background: white; border: 1px solid var(--line); border-radius: 14px; }
.my-care summary { cursor: pointer; font-weight: 700; min-height: 44px; }
.care-owned { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding: 14px 0; }
.care-owned p { margin-bottom: 0; }
.care-detail-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; margin-top: 24px; }
.care-detail-photo img { width: 100%; max-height: 620px; object-fit: cover; border-radius: 20px; }
.care-detail-body h1 { font: 500 38px/1.1 Georgia,serif; margin: 14px 0; }
.care-detail-body li { margin: 10px 0; }
.care-description { white-space: pre-wrap; line-height: 1.6; }
.care-detail-body button { margin: 4px 4px 4px 0; }
@media (max-width: 700px) {
  .care-detail-body { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .care-detail-photo img { max-height: 320px; }
  .care-detail-body h1 { font-size: 30px; }
  .care-categories { display: grid; grid-template-columns: minmax(0,1fr); }
  .care-filters .care-check { min-height: 44px; }
  .care-owned { flex-wrap: wrap; }
}
.support-page p { line-height: 1.6; }
.support-page h1 { font: 500 36px/1.1 Georgia, serif; }
.inbox-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.inbox-tabs button { font-size: 14px; min-height: 44px; }
.inbox-tabs button[aria-pressed="true"] { background: var(--green); color: white; }
.inbox-tabs [hidden] { display: none; }
.support-link { margin: 0 12px 10px; font-size: 14px; }
#inboxStatus { padding-inline: 14px; font-size: 14px; }
#messages .threads { overflow-y: auto; }
#messages .chat { min-height: 0; overflow: hidden; }
#messages .chat-head { display: flex; align-items: center; gap: 12px; }
#chatStatus { padding: 0 16px; font-size: 14px; }
#chatStatus:empty { display: none; }
#backToInbox { display: none; }
.message-author, .message-text, .bubble small { display: block; }
.message-author { font-size: 13px; margin-bottom: 6px; }
.message-text { white-space: pre-wrap; font-size: 16px; line-height: 1.5; }
.bubble small { font-size: 12px; margin-top: 8px; opacity: .8; }
button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 600px) {
  #messages .messages { grid-template-columns: minmax(0,1fr); }
  #messages .messages .threads { display: block; width: auto; }
  #messages .threads h2 { display: block; }
  #messages .thread { justify-content: start; }
  #messages .thread div:last-child { display: block; }
  #messages .messages .chat { display: none; }
  #messages .messages.conversation-open .threads { display: none; }
  #messages .messages.conversation-open .chat { display: flex; }
  #backToInbox { display: inline-block; flex: none; padding: 8px; }
  #messages .chat-head { padding: 10px; font-size: 14px; }
}