/* 8.5.1e: public mobile fullscreen screens only; desktop styles untouched. */
@media (max-width:700px){
  body>#accountMenu:not([hidden]){padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))!important;}
  body>#accountMenu .mobileAccountPanelHead{position:relative!important;justify-content:center!important;text-align:center!important;padding:0 76px!important;min-height:54px!important;}
  body>#accountMenu .mobileAccountPanelHead strong{font-size:16px!important;white-space:nowrap!important;}
  body>#accountMenu .mobileAccountPanelHead .mobilePanelBack{position:absolute!important;left:0!important;top:50%!important;transform:translateY(-50%)!important;font-size:12px!important;}
  body>#accountMenu>button:not(.mobilePanelBack){font-size:11px!important;min-height:48px!important;gap:9px!important;padding:10px 8px!important;}
  body>#accountMenu>button span{font-size:9px!important;}
  body>#accountMenu #supportPortalBtn{justify-content:flex-start!important;text-align:left!important;}
  body>#accountMenu #supportPortalBtn>span{margin-left:0!important;text-align:left!important;max-width:none!important;}
  body>#accountMenu #supportPortalBtn>b{margin-left:auto!important;}
  .mobileHeaderAccount.signedInMobile{background:linear-gradient(135deg,#ffad6d,#f45b91)!important;border-color:transparent!important;color:#fff!important;font-weight:800;font-size:15px;}
  .authModal.open{width:100vw!important;max-width:100vw!important;overflow:hidden!important;}
  .authModal.open>.authCard,
  .authModal.open>.authCard.settingsMode,
  .authModal.open>.authCard.supportCenterCard{
    position:relative!important;display:block!important;left:auto!important;right:auto!important;top:auto!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    height:100dvh!important;max-height:100dvh!important;margin:0!important;
    padding:calc(env(safe-area-inset-top,0px) + 16px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(16px,env(safe-area-inset-left,0px))!important;
    overflow-x:hidden!important;overflow-y:auto!important;box-sizing:border-box!important;
  }
  .authModal.open>.authCard *, .authModal.open>.authCard *::before,.authModal.open>.authCard *::after{box-sizing:border-box;}
  .authModal.open>.authCard :is(.accountProfileFields,.accountReadOnly,.accountPlanCard,.accountCreditCard,.accountWallpaperCard,.accountMeta,.supportCenterTabs,.authForm,.customerTicketItem,.customerReplyForm,.customerMessages,.accountWallpaperGrid){width:100%;max-width:100%;min-width:0;}
  .authModal.open>.authCard :is(input,select,textarea,button){max-width:100%;min-width:0;}
  .authModal.open>.authCard :is(.accountReadOnly,.accountPlanCard,.accountCreditHead,.accountWallpaperHead){flex-wrap:wrap!important;}
  .authModal.open>.authCard :is(.accountReadOnly,.accountPlanCard,.accountCreditCard,.accountWallpaperCard) :is(strong,span,small,b){overflow-wrap:anywhere;min-width:0;}
  .authModal.open>.authCard>.mobilePanelBack{font-size:12px!important;}
  .authModal.open>.authCard .authBrand img{width:135px!important;max-width:60%!important;margin-bottom:16px!important;}
  .authModal.open>.authCard .authEyebrow{font-size:9px!important;}
  .authModal.open>.authCard h2{font-size:clamp(23px,7vw,28px)!important;line-height:1.16!important;letter-spacing:-.035em!important;}
  .authModal.open>.authCard>p{font-size:12px!important;line-height:1.5!important;max-width:100%!important;}
  .authModal.open>.authCard .authForm label{font-size:11px!important;}
  .authModal.open>.authCard :is(input,select,textarea){font-size:14px!important;}
  .authModal.open>.authCard .supportCenterTabs button{font-size:11px!important;min-width:0!important;}
  .authModal.open>.authCard .accountPlanCard button{white-space:normal;}
  .authModal.open>.authCard .accountReadOnly{gap:8px!important;}
  .authModal.open>.authCard .accountReadOnly>*{flex-shrink:1;}
  .authModal.open>.authCard .accountWallpaperGrid{grid-template-columns:minmax(0,1fr)!important;}
}

/* 8.5.1f — compact mobile support and 25% smaller header actions. */
@media(max-width:700px){
  body>header .mobileHeaderActions{gap:7px!important;}
  body>header .mobileHeaderActions button{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;}
  body>header .mobileHeaderActions button i{font-size:15px!important;}
  body>header .mobileHeaderAccount.signedInMobile{font-size:12px!important;}
  body>header .mobileHeaderNotify{width:8px;height:8px;}
  .authModal.open>.supportCenterCard h2{font-size:24px!important;line-height:1.18!important;}
  .authModal.open>.supportCenterCard>p{font-size:11px!important;line-height:1.5!important;}
  .authModal.open>.supportCenterCard .authEyebrow{font-size:8px!important;}
  .authModal.open>.supportCenterCard .authForm label{font-size:10px!important;}
  .authModal.open>.supportCenterCard .authForm :is(input:not([type=file]),select,textarea){font-size:13px!important;}
  .authModal.open>.supportCenterCard .authForm :is(input:not([type=file]),select){min-height:43px!important;padding:10px 12px!important;}
  .authModal.open>.supportCenterCard .authForm textarea{padding:12px!important;}
  .authModal.open>.supportCenterCard .supportCenterTabs button{font-size:10px!important;}
  .authModal.open>.supportCenterCard .authSubmit{font-size:12px!important;}
}
/* Custom attachment picker — keep native input operable, accessible and wired to existing JS. */
.supportAttachmentField .wallnuviaUploadControl{position:relative;display:flex;align-items:center;min-height:46px;max-width:100%;width:100%;border:1px dashed rgba(255,145,119,.35);border-radius:12px;background:rgba(255,145,119,.045);overflow:hidden;cursor:pointer;}
.supportAttachmentField .wallnuviaUploadControl:focus-within{outline:2px solid #ff947c;outline-offset:2px;}
.supportAttachmentField .wallnuviaUploadControl input[type=file]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:2;padding:0!important;border:0!important;}
.supportAttachmentField .wallnuviaUploadVisual{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:700;color:#ff9c85;pointer-events:none;}
.supportAttachmentField .wallnuviaUploadVisual i{font-size:15px;}
.supportAttachmentField .wallnuviaUploadVisual small{font-size:9px;font-weight:400;color:#87909a;margin-left:5px;}
@media(max-width:370px){.supportAttachmentField .wallnuviaUploadVisual small{display:none;}}

/* 8.5.1g — support field values and placeholders, mobile only. */
@media(max-width:700px){
 .authModal.open>.supportCenterCard #customerTicketCategory{font-size:13px!important;font-weight:500!important;line-height:1.4!important;}
 .authModal.open>.supportCenterCard #customerTicketSubject,
 .authModal.open>.supportCenterCard #customerTicketDescription{font-size:13px!important;font-weight:400!important;line-height:1.5!important;}
 .authModal.open>.supportCenterCard #customerTicketSubject::placeholder,
 .authModal.open>.supportCenterCard #customerTicketDescription::placeholder{font-size:13px!important;font-weight:400!important;opacity:1;}
 .supportAttachmentField .wallnuviaUploadVisual{font-size:10px!important;}
}

/* 8.5.1h — precise mobile support form typography. Target actual authCard element. */
@media (max-width:700px){
  .authModal.open > .authCard.supportCenterCard #customerTicketSubject,
  .authModal.open > .authCard.supportCenterCard #customerTicketDescription {
    font-size:11px!important;font-weight:400!important;line-height:1.5!important;
  }
  .authModal.open > .authCard.supportCenterCard #customerTicketSubject::placeholder,
  .authModal.open > .authCard.supportCenterCard #customerTicketDescription::placeholder {
    font-size:11px!important;font-weight:400!important;line-height:1.5!important;opacity:1;
  }
  .authModal.open > .authCard.supportCenterCard .authSubmit {
    font-size:14px!important;font-weight:600!important;
  }
}