/* PWA + iPhone Safari polish — loaded last; desktop (≥761px) mostly untouched */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  min-height:100dvh;
  overflow-x:hidden;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* iOS: prevent input zoom (font-size < 16px triggers zoom) */
input,select,textarea{
  font-size:16px;
}

@media(max-width:760px){
  html,body{overflow-x:hidden;max-width:100vw}
  body{overscroll-behavior-y:contain}

  /* Top safe area under status bar / notch when standalone */
  header{
    padding-top:max(8px, env(safe-area-inset-top));
    min-height:calc(56px + env(safe-area-inset-top));
    height:auto;
    position:sticky;
    top:0;
    z-index:12;
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }

  /* Bottom tab bar */
  aside{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    width:100% !important;
    height:auto !important;
    min-height:calc(56px + env(safe-area-inset-bottom));
    padding:4px 4px calc(4px + env(safe-area-inset-bottom)) !important;
    z-index:30 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch;
    justify-content:stretch;
    border-top:1px solid #c2d0e4 !important;
    background:#f4f6fbf2 !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 -6px 24px #24437612;
  }
  aside .brand,
  aside .sidebar-bottom{display:none !important}
  aside nav{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:0;
    margin:0;
  }
  aside nav button{
    flex:1 1 0;
    min-width:0;
    min-height:44px;
    padding:6px 2px 4px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    font-size:18px !important;
    line-height:1.15;
    border-radius:10px !important;
    background:transparent !important;
    color:#5a6f8f !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent;
  }
  aside nav button .nav-full{display:none !important}
  aside nav button .nav-short{
    display:block !important;
    font-size:10px !important;
    letter-spacing:0;
    white-space:nowrap;
  }
  aside nav button.active{
    background:#dfe8f6 !important;
    color:#2f5f9a !important;
    box-shadow:inset 0 2px 0 #3d6aa8 !important;
  }

  main{
    margin:0 !important;
    width:100%;
    max-width:100vw;
    padding:0 max(16px, env(safe-area-inset-left)) calc(72px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)) !important;
    overflow-x:hidden;
  }

  /* Tap targets */
  button,.text-btn,.outline,.primary,
  .suggestions button,
  .topic-pills button,
  .tabs button,
  .module-list button,
  .quick-launch button,
  .avatar{
    min-height:44px;
  }
  .avatar{
    min-width:44px;
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .suggestions button{
    padding:10px 14px !important;
    font-size:14px;
  }
  .tabs button{padding:12px 18px}
  .outline,.primary{padding:12px 18px}

  /* Forms: stop iOS zoom + comfortable fields */
  input,select,textarea{
    font-size:16px !important;
    min-height:44px;
    max-width:100%;
  }
  label{max-width:100%}

  /* Prevent horizontal bleed from wide tables / wheels */
  .table-scroll,.pro-table-scroll,.pro-wheel-wrap,
  .wheel-wrap,svg{
    max-width:100%;
  }
  .table-scroll,.pro-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pro-wheel-wrap svg,.wheel-wrap svg{width:100%;height:auto}
  .top-grid,.explore-grid,.strategy-layout,.daily-grid,.form-grid,.three{
    max-width:100%;
  }
  .universe,.insight,.card,.detail,.chatbox{max-width:100%;overflow-x:hidden}
  img{max-width:100%;height:auto}

  /* Page headings */
  .page-heading{padding-top:18px;padding-bottom:20px}
  .page-heading h1{word-break:break-word;overflow-wrap:anywhere}
  #home>.page-heading h1{font-size:clamp(28px,8vw,36px)}

  /* Love / relation */
  .love-heading{grid-template-columns:1fr !important}
  .love-art{max-width:140px;margin:0 auto}

  /* Strategy modules */
  .module-list{grid-template-columns:1fr 1fr;gap:8px}
  .module-list button{min-height:52px;padding:12px 10px;font-size:13px}

  /* Dialog / birth profile */
  dialog{
    width:calc(100% - 24px) !important;
    max-width:480px;
    max-height:min(90dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px));
    margin:auto;
    padding:22px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius:16px;
  }
  dialog .close{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  dialog .primary{min-height:48px;font-size:16px}

  #toast{bottom:calc(88px + env(safe-area-inset-bottom));z-index:40}

  /* —— Chat: pin composer above home indicator / keyboard —— */
  body[data-current-view="chat"] main{
    padding-bottom:0 !important;
    display:flex;
    flex-direction:column;
    min-height:100dvh;
    min-height:100svh;
  }
  body[data-current-view="chat"] #chat.view{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    padding-bottom:0;
  }
  body[data-current-view="chat"] #chat .page-heading{
    flex-shrink:0;
    padding-bottom:12px;
  }
  body[data-current-view="chat"] .chatbox{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0 !important;
    margin-bottom:calc(56px + env(safe-area-inset-bottom));
    padding:0 0 0 !important;
    overflow:hidden;
  }
  body[data-current-view="chat"] .chat-galaxy{flex-shrink:0;height:88px !important;margin:0 !important}
  body[data-current-view="chat"] .chat-toolbar{padding:8px 14px 0;flex-shrink:0}
  body[data-current-view="chat"] #messages{
    flex:1;
    max-height:none !important;
    min-height:0 !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:12px 14px;
    margin-bottom:0 !important;
  }
  body[data-current-view="chat"] .suggestions{
    flex-shrink:0;
    padding:8px 14px;
    margin:0;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  body[data-current-view="chat"] .suggestions button{flex:0 0 auto;white-space:nowrap}
  body[data-current-view="chat"] #chatForm{
    position:sticky;
    bottom:0;
    flex-shrink:0;
    display:flex;
    gap:8px;
    align-items:center;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    margin:0;
    background:#eff4fbf5;
    border-top:1px solid #c7d5e7;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    /* Sit above the tab bar */
    margin-bottom:calc(56px + env(safe-area-inset-bottom));
  }
  body[data-current-view="chat"] #chatForm input{
    flex:1;
    min-height:44px;
    font-size:16px !important;
    border-radius:22px;
    padding:10px 16px;
  }
  body[data-current-view="chat"] #chatForm button{
    min-height:44px;
    min-width:72px;
    border-radius:22px;
    padding:10px 14px;
  }
  body[data-current-view="chat"] #chatFootnote,
  body[data-current-view="chat"] .chatbox > .footnote{
    display:none;
  }
  body[data-current-view="chat"] #chatError{margin:0 14px 8px}

  /* Hide bottom tab slightly less conflicting: chat form already accounts for it */
}

/* Very small phones */
@media(max-width:380px){
  aside nav button{font-size:16px !important}
  aside nav button .nav-short{font-size:9px !important}
  .module-list{grid-template-columns:1fr}
}

/* Standalone PWA: extra top padding */
@media(display-mode:standalone){
  header{padding-top:max(12px, env(safe-area-inset-top))}
}

/* 内置浏览器 / 添加到主屏幕 引导条（install-guide.js） */
.guide-bar{position:sticky;top:0;z-index:1200;display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:#eef4f7;color:#244b40;border-bottom:1px solid #cfdde3;font-size:13px;line-height:1.5;box-shadow:0 2px 10px rgba(36,75,64,.08)}
.guide-bar .guide-text{flex:1;min-width:0;display:flex;flex-direction:column}
.guide-bar strong{font-weight:600;font-size:14px;color:#244b40}
.guide-bar .guide-text span{color:#4f6a73}
.guide-bar b{font-weight:600;color:#2f5f7a}
.guide-bar .guide-share::before{content:'';display:inline-block;width:12px;height:14px;margin:0 3px -2px 2px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='%232f5f7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17V2M7 7l5-5 5 5'/%3E%3Cpath d='M7 11H4v15h16V11h-3'/%3E%3C/svg%3E")}
.guide-bar .guide-arrow{width:46px;height:34px;flex:none;color:#5a8fad;margin-right:2px;align-self:flex-start}
.guide-bar .guide-close{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#626e65;font-size:20px;line-height:1;cursor:pointer}
.guide-bar .guide-close:hover{background:rgba(36,75,64,.08)}
.guide-bar .guide-install.primary{flex:none;min-width:0;padding:7px 14px;font-size:13px;grid-column:auto;justify-self:auto}
.guide-inapp{background:#fdf6e9;border-bottom-color:#ecdcbc}
.guide-bar .guide-copy.outline{flex:none;padding:6px 12px;font-size:12.5px;border:1px solid #c9b48a;border-radius:6px;background:#fffefa;color:#5b4a2a;cursor:pointer;white-space:nowrap}
.guide-bar .guide-url{margin-top:4px;width:100%;font-size:13px;padding:4px 6px;border:1px solid #d8ded6;border-radius:4px;background:#fffefa;color:#244b40}
.page-footer .install-entry{flex:none;white-space:nowrap;border:1px solid var(--line,#d8ded6);background:transparent;color:inherit;border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer}
body[data-current-view="member"] .page-footer .install-entry{display:none}
@media (max-width:420px){.guide-inapp .guide-arrow{width:34px;height:26px;margin-right:0}.guide-inapp strong{font-size:13.5px}}
.page-footer .footer-social{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.page-footer{flex-wrap:wrap;row-gap:10px}
@media (max-width:720px){.page-footer{justify-content:flex-start;column-gap:16px}.page-footer>span:nth-child(2){flex:1 1 100%;order:-1}}
.page-footer .footer-socials{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
@media (max-width:720px){.page-footer .footer-socials{flex:1 1 100%;order:-1}}