/* Swipe interaction */
.profile-card {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transform: translateX(var(--swipe-x, 0)) rotate(var(--swipe-rotate, 0deg));
}

/* Unified mobile type scale and touch layout */
@media (max-width: 600px) {
  html { width: 100%; height: 100%; font-size: 16px; overflow: hidden; overscroll-behavior: none; }
  html, body { width: 100%; min-width: 320px; overflow: hidden; }
  body { position: fixed; inset: 0; height: 100svh; font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
  .stage { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
  .intro { display: none; }
  .phone { width: 100%; max-width: none; height: 100%; min-height: 0; overflow: hidden; }
  .phone-top { padding-top: env(safe-area-inset-top); height: calc(30px + env(safe-area-inset-top)); }
  .app-shell { height: calc(100% - 30px - env(safe-area-inset-top)); }
  .app-header { min-height: 58px; }
  .screen { width: 100%; padding-inline: clamp(14px, 4vw, 18px); padding-bottom: calc(20px + env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .tabbar { height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  h1, h2, h3, p { overflow-wrap: anywhere; }
  .screen h2, .page-title h2, .messages-heading h2, .moments-heading h2, .pet-topline h2, .group-lobby-heading h2 { font-size: clamp(23px, 6.4vw, 28px); line-height: 1.22; }
  .identity h3, .me-card h3, .voice-connected h2 { font-size: clamp(22px, 6vw, 27px); line-height: 1.25; }
  .kicker, .eyebrow, .voice-eyebrow { font-size: 12px; line-height: 1.4; letter-spacing: .12em; }
  p, label, .moment-text, .profile-copy > p, .profile-copy .quote, .voice-description, .voice-finished > p, .group-message p span, .meetly-chat .bubble, .bubble, .room-copy > p, .ai-companion-card small { font-size: 14px; line-height: 1.55; }
  small, time, .count small, .daily-note, .completion, .settings-list small, .message-row small, .match-row small, .inbox-matches small, .voice-safe, .room-list-title span, .group-room-row small, .group-safety small, .voice-seats small, .reel-caption small, .affection-event small { font-size: 12px; line-height: 1.45; }
  .settings-list b, .message-row strong, .match-row strong, .inbox-matches b, .moment-card header b, .room-copy h3, .group-room-row b, .group-safety b, .ai-companion-card b, .pet-actions b, .affection-actions b, .reel-caption b { font-size: 15px; line-height: 1.4; }
  button, input, textarea, select { font-family: inherit; }
  input, textarea, select { font-size: 16px !important; }
  button { -webkit-tap-highlight-color: transparent; }
  button:not(.round-button):not(.story-reel):not(.story):not(.reel-play) { min-height: 44px; }
  .icon-button, .modal-close, .messages-heading > button, .meetly-chat-header button, .group-chat-header button { min-width: 44px; min-height: 44px; }
  .search, .message-search, .composer input, .group-composer input { min-height: 44px; }
  .primary-action, .text-action, .voice-primary, .voice-secondary { min-height: 48px; }
  .profile-card { width: 100%; min-height: 330px; max-height: 52dvh; }
  .modal { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
  .modal-content { width: min(100%, 380px); max-height: 88dvh; padding: 24px 20px; overflow-y: auto; }
  .modal h2 { font-size: clamp(26px, 7vw, 32px); line-height: 1.2; }
  .chat-view, .group-chat-view, .voice-view { max-width: 100%; padding-bottom: env(safe-area-inset-bottom); }
  .chat-body, .group-chat-stream { padding-inline: 14px; }
  .composer, .meetly-composer, .group-composer { padding-bottom: max(9px, env(safe-area-inset-bottom)); }
}

@media (max-width: 359px) {
  body { font-size: 14px; }
  .screen { padding-inline: 11px; }
  .app-header { padding-inline: 12px; }
  .screen h2, .page-title h2, .messages-heading h2 { font-size: 22px; }
  .profile-card { min-height: 300px; }
  .actions { gap: 18px; }
}

.app-toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 100;
  max-width: calc(100% - 36px); padding: 11px 17px; border-radius: 999px;
  color: #fff; background: rgba(38,34,31,.94); box-shadow: 0 8px 24px rgba(0,0,0,.2);
  font-size: 14px; line-height: 1.4; text-align: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s;
}
.app-toast.show { opacity: 1; transform: translate(-50%, 0); }
.viewer-actions button.active { color: #e86578; }
.meetly-chat.show, .group-chat-view.show, .voice-view.show { z-index: 10; }
.meetly-chat.show { inset: 0; }
.profile-card.is-dragging { transition: none; cursor: grabbing; }
.profile-card::before,
.profile-card::after {
  position: absolute;
  top: 72px;
  z-index: 4;
  padding: 8px 14px;
  border: 3px solid;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: 0;
  pointer-events: none;
}
.profile-card::before { content: '喜歡'; left: 22px; color: #2d9d76; transform: rotate(-10deg); }
.profile-card::after { content: '不喜歡'; right: 22px; color: #db5966; transform: rotate(10deg); }
.profile-card.drag-like::before,
.profile-card.drag-pass::after { opacity: var(--swipe-strength, 0); }
.profile-editor{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;background:rgba(32,27,25,.5);backdrop-filter:blur(7px)}
.profile-editor.show{display:flex}.profile-editor-sheet{width:min(100%,480px);max-height:92svh;margin:auto;background:var(--paper);border-radius:25px 25px 0 0;padding:0 20px calc(22px + env(safe-area-inset-bottom));overflow-y:auto}
.profile-editor-sheet header{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:60px 1fr 60px;align-items:center;height:64px;background:var(--paper);border-bottom:1px solid var(--line)}
.profile-editor-sheet header h2{margin:0;text-align:center;font-size:18px}.profile-editor-sheet header button{border:0;background:none;color:var(--muted)}.profile-editor-sheet header button[type="submit"]{color:var(--rose-dark);font-weight:700}
.profile-editor-sheet>label,.profile-editor-row label{display:grid;gap:7px;margin-top:17px;font-size:13px;font-weight:600}.profile-editor-sheet input,.profile-editor-sheet textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:#f8f4f0;padding:11px 12px;outline:none;color:var(--ink);font:inherit}.profile-editor-sheet textarea{resize:vertical}.profile-editor-row{display:grid;grid-template-columns:90px 1fr;gap:12px}.profile-editor-sheet>p{font-size:12px;color:var(--muted);line-height:1.6;margin:18px 2px 0}

/* Phone readability and spacing */
@media (max-width: 450px) {
  body { font-size: 16px; }
  .app-header { height: 62px; padding: 0 18px; }
  .wordmark { font-size: 25px; }
  .wordmark span { font-size:12px; }
  .icon-button { font-size: 24px; min-width: 40px; min-height: 40px; }
  .screen { height: calc(100% - 130px); padding: 8px 15px 20px; }
  .screen-heading, .page-title { margin-bottom: 12px; }
  .screen h2, .page-title h2 { font-size: 26px; line-height: 1.25; }
  .kicker, .eyebrow { font-size: 12px; letter-spacing: .12em; }
  .count strong { font-size: 30px; }
  .count small { font-size: 12px; }
  .profile-card { height: calc(100svh - 306px); min-height: 350px; max-height: 500px; border-radius: 25px; }
  .profile-copy { left: 18px; right: 16px; bottom: 18px; }
  .identity h3 { font-size: 27px; }
  .profile-copy > p { font-size: 14px; margin: 7px 0 11px; }
  .tags { gap: 7px; }
  .tags span { padding: 6px 9px; font-size: 12px; }
  .profile-copy .quote { font-size: 14px; line-height: 1.55; margin-top: 10px; }
  .compatibility { top: 14px; right: 13px; padding: 9px 11px; }
  .compatibility strong { font-size: 18px; }
  .compatibility span { font-size:12px; }
  .actions { gap: 25px; margin-top: 12px; }
  .pass, .like { width: 58px; height: 58px; font-size: 26px; }
  .detail { width: 42px; height: 42px; font-size: 19px; }
  .section-label { font-size: 14px; }
  .match-row strong, .message-row strong { font-size: 16px; }
  .match-row small, .message-row small, .match-row time, .message-row time { font-size: 12px; }
  .search { height: 44px; }
  .search input { font-size: 14px; }
  .tabbar { height: 68px; padding-top: 5px; }
  .tabbar button span { font-size: 22px; }
  .tabbar button b { font-size:12px; }
  .bubble { font-size: 14px; }
  .chat-view header strong { font-size: 14px; }
  .chat-view header small, .icebreaker { font-size:12px; }
  .composer input, .composer button { font-size: 14px; }
}

/* Native phone UI scale
   The feature styles were originally drawn as a 390px desktop mock-up and
   contain many 5-10px labels. Keep secondary copy compact, but never tiny. */
@media (max-width: 450px) {
  :root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  button, input, textarea, select { font-size: 16px; }
  input, textarea, select { min-height: 44px; }

  /* Shared text and touch targets */
  .daily-note, .me-card p, .completion, .settings-list small,
  .chat-date, .icebreaker, .icebreaker strong,
  .voice-promo b, .voice-promo small, .voice-wave,
  .voice-eyebrow, .voice-description, .voice-common span,
  .conversation-card small, .voice-common b, .conversation-card strong,
  .voice-safe, .voice-searching p:not(.voice-eyebrow), .voice-match,
  .conversation-card button, .call-actions b, .voice-finished>p:not(.voice-eyebrow),
  .match-strip-heading span, .inbox-matches b, .inbox-matches small,
  .conversation-heading button, .message-row.richer em,
  .chat-relationship, .chat-relationship button,
  .smart-topic small, .smart-topic strong, .smart-topic button,
  .meetly-chat .bubble small, .voice-message span, .chat-tools button,
  .gift-grid b, .gift-grid small, .system-gift, .call-demo p,
  .chat-mode-switch button, .chat-mode-switch i,
  .group-live-heading h3, .group-live-heading button,
  .room-copy>small, .room-copy h3, .room-copy>p,
  .room-members b, .room-members em, .room-list-title h3,
  .room-list-title span, .group-room-row b, .group-room-row small,
  .group-safety b, .group-safety small, .group-chat-header b,
  .group-chat-header small, .voice-seats b, .voice-seats small,
  .group-topic small, .group-topic b, .group-topic button,
  .group-system, .group-message b, .group-message b i,
  .group-message p span, .group-reaction,
  .affection-event b, .affection-event small, .affection-event em,
  .affection-actions span, .affection-actions b, .affection-toast,
  .reel-duration, .reel-caption b, .reel-caption small,
  .reel-preview>span { font-size: 12px; line-height: 1.45; }

  .match-strip-heading h3, .conversation-heading h3,
  .meetly-chat-header span strong, .room-copy h3,
  .group-live-heading h3, .room-list-title h3,
  .group-chat-header b { font-size: 15px; }

  .voice-stage h2 { font-size: 30px; }
  .voice-connected h2 { font-size: 25px; }
  .voice-description, .voice-finished>p:not(.voice-eyebrow) { font-size: 14px; }
  .voice-primary, .voice-secondary { min-height: 48px; font-size: 15px; }

  /* Inbox and direct chat */
  .messages-heading h2 { font-size: 27px; }
  .messages-heading>button { width: 44px; height: 44px; }
  .message-search { min-height: 44px; }
  .inbox-matches button { min-width: 70px; min-height: 88px; }
  .meetly-chat.show { grid-template-rows:64px 42px 1fr 58px 66px; }
  .meetly-chat-header { grid-template-columns:38px 44px 1fr 38px 38px 38px!important; }
  .meetly-chat-header img { width:44px!important; height:44px!important; }
  .meetly-chat-header button { min-width:38px; min-height:38px; font-size:20px!important; }
  .chat-relationship { padding:0 14px; }
  .smart-topic { grid-template-columns:34px 1fr auto; padding:10px 11px; }
  .smart-topic>span { width:32px; height:32px; }
  .meetly-chat .bubble { font-size:14px; padding:11px 13px; }
  .voice-message { min-height:46px; }
  .chat-tools button { min-width:48px; min-height:48px; }
  .chat-tools span { font-size:21px; }
  .meetly-composer { grid-template-columns:38px 1fr 38px 52px!important; }
  .meetly-composer input { height:44px; font-size:16px; }
  .meetly-composer button { font-size:14px!important; }

  /* Group rooms and group chat */
  .chat-mode-switch button { height:44px; font-size:14px; }
  .featured-room { grid-template-columns:94px 1fr; padding:12px; }
  .room-art { height:108px; }
  .group-room-row { grid-template-columns:48px 1fr 24px; padding:12px 3px; }
  .room-icon { width:46px; height:46px; }
  .group-safety { padding:11px; }
  .group-chat-view { grid-template-rows:64px 126px 62px 1fr 58px 62px; }
  .group-chat-header { grid-template-columns:44px 1fr 44px; }
  .group-chat-header button { min-width:44px; min-height:44px; font-size:22px; }
  .voice-seats span { width:54px; height:54px; }
  .voice-seats img { width:50px; height:50px; }
  .group-topic { grid-template-columns:32px 1fr auto; padding:8px 10px; }
  .group-topic>span { width:30px; height:30px; }
  .group-message { grid-template-columns:36px 1fr; }
  .group-message img { width:36px; height:36px; }
  .group-message.mine { grid-template-columns:1fr 36px; }
  .group-message p span { padding:9px 11px; font-size:14px; }

  /* AI companion and affection */
  .affection-event { grid-template-columns:36px 1fr auto; gap:9px; padding:10px 11px; }
  .affection-event>span { width:34px; height:34px; }
  .affection-actions button { min-height:44px; padding:8px 11px; }
  .affection-toast { top:86px; padding:9px 14px; }

  /* Feed, stories and creation controls */
  .post-type-switch button { height:44px; font-size:14px; }
  .reel-play { width:56px; height:56px; }
  .reel-duration, .reel-preview>span { padding:6px 9px; }
  .reel-caption b { font-size:16px; }
  .reel-caption small { font-size:13px; }

  /* Settings and modal actions */
  .me-card p, .completion { font-size:13px; }
  .settings-list button { min-height:56px; padding:14px 7px; }
  .settings-list b { font-size:16px; }
  .settings-list small { font-size:13px; }
  .modal-content>p:not(.eyebrow):not(.sparkle) { font-size:14px; line-height:1.6; }
  .primary-action, .text-action { min-height:48px; font-size:15px; }
}