/* 5.118.2 — mobile layout, loaded after the legacy component layers. */
:root{--vc-visible-height:100dvh;--vc-visible-top:0px;--vc-dock-space:160px}
@media(max-width:900px){
  .screen:not(.cas-screen){padding-bottom:calc(var(--vc-dock-space) + 20px)}
  .modal-backdrop,.phone-overlay-backdrop{
    top:var(--vc-visible-top)!important;bottom:auto!important;
    height:var(--vc-visible-height);box-sizing:border-box;
  }
  .modal-backdrop{
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
    align-items:center!important;place-items:center!important;grid-template-rows:minmax(0,1fr);
  }
  .modal-backdrop>.modal{
    min-height:0!important;max-height:100%!important;
    max-width:100%!important;box-sizing:border-box;
    overscroll-behavior:contain;scrollbar-gutter:auto;
  }
  /* Wrapping footers must stay in normal flow; sticky blocks can hide the whole dialog. */
  .modal .btn-row,.modal .relationship-profile-footer,.modal .family-life-footer,
  .modal .formal-date-footer,.modal .early-child-footer,.modal .career-board-footer{
    position:static!important;bottom:auto!important;flex-wrap:wrap;
    margin-left:0!important;margin-right:0!important;margin-bottom:0!important;
  }
  .modal .btn-row>.btn{min-width:0;flex:1 1 145px}
  .toast-root{
    top:auto!important;bottom:calc(var(--vc-dock-space) + 8px)!important;
    max-height:35dvh;overflow-y:auto;align-content:end;justify-content:flex-start!important;
  }
  .toast{flex-shrink:0;overflow-wrap:anywhere}
  .phone-floating-close{min-width:44px;min-height:44px;flex-shrink:0}
}
@media(max-width:620px),(max-height:520px) and (max-width:1000px){
  .phone-overlay-backdrop{padding:0!important;align-items:stretch!important}
  .phone-floating-window{
    height:100%!important;max-height:100%!important;min-height:0!important;
    width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
    display:flex!important;flex-direction:column!important;border:0;border-radius:0;
  }
  .phone-floating-toolbar{height:auto;min-height:50px;flex:0 0 auto!important}
  .phone-floating-window .phone-device{
    display:flex!important;flex-direction:column!important;flex:1 1 0!important;
    height:auto!important;min-height:0!important;max-height:100%!important;
    border:0;border-radius:0;
  }
  .phone-floating-window .phone-device-status{flex:0 0 auto}
  .phone-floating-window .phone-device-body{
    flex:1 1 0!important;height:auto!important;min-height:0!important;overflow:auto!important;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .phone-floating-window .phone-home-indicator{display:none}
  .phone-app-screen{min-height:0!important}
  .phone-app-header.thread{
    grid-template-columns:44px 44px minmax(0,1fr)!important;gap:6px!important;height:auto;
  }
  .phone-app-header.thread>button{min-width:44px;width:44px!important;min-height:44px;height:auto!important}
  .phone-app-header.thread>button:nth-child(n+4){grid-row:2;justify-self:start}
  .phone-app-header.thread>div:nth-child(3){min-width:0}
  .phone-app-header.thread strong,.phone-app-header.thread small{white-space:normal;overflow-wrap:anywhere}
  .phone-app-header.thread:has(>button:nth-child(4))>button:first-child{grid-row:1}
  .phone-app-header.thread img{width:36px;height:36px}
  .phone-preset-bar button{min-height:48px}
  input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:max(16px,1rem)!important}
}
@media(max-width:620px){
  .modal-backdrop{align-items:end!important;place-items:end center!important}
  .modal-backdrop>.modal{border-radius:20px!important}
  .start-topbar,.start-top-actions,.start-menu-footer{flex-wrap:wrap}
  .start-topbar>*{min-width:0}
  .start-menu-footer{gap:10px}
  .cas-screen{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .dock-shell .nav-btn{overflow-wrap:anywhere;white-space:normal}
  .furniture-shop-grid,.pet-shop-grid{grid-template-columns:minmax(0,1fr)}
  .room-furniture-line{grid-template-columns:25px minmax(0,1fr)}
  .room-furniture-line>em{grid-column:2;text-align:left}
  .portrait-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:520px) and (max-width:1000px){
  .modal .city-map-head,.bp-filter-shell,.phone-home-dock{position:static!important}
  .phone-floating-toolbar{padding-top:4px;padding-bottom:4px;min-height:44px}
  .phone-floating-window .phone-device-status{display:none}
}

@media(max-width:700px){
  .phone-app-header.thread>.unknown-number-avatar{grid-column:2;grid-row:1}
  .city-filter-row,.city-district-title{position:static!important}
  .city-map-shell{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .mobile-important-notice{flex-shrink:0}
}
@media(max-height:520px) and (max-width:1000px){
  .phone-thread-screen .phone-app-header{position:static!important}
  .generation-head,.generation-guide-head{position:static!important}
  .generation-shell,.generation-guide-modal .generation-shell{display:block;height:auto;max-height:none}
  .generation-scroll,.generation-guide-scroll{overflow:visible}
  .modal.generation-modal,.modal.generation-guide-modal{overflow-y:auto!important}
}

@media(max-width:700px){
  .phone-app-header.thread{grid-template-columns:44px 44px minmax(0,1fr)!important}
  body.phone-overlay-visible .toast-root{z-index:70}
}