/* v102 — layout fixes for all screen sizes */
/* Loading skeleton for settings no longer shares the real .settings-layout class */
.sk97-settings-layout{display:block}
.sk97-settings-layout>.panel{margin-block:12px}

/* Form controls never push past their card on narrow phones */
#main input,#main select,#main textarea{max-width:100%}
#main input[type=file]{min-width:0;width:100%;box-sizing:border-box;font-size:13px}
#main .panel,#main form{min-width:0;overflow-wrap:break-word}

/* Settings tabs: touch-friendly; on phones all five fit in one row */
#main .settings-tabs101{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
#main .settings-tabs101 button{scroll-snap-align:start;min-height:44px}
@media(max-width:480px){
 #main .settings-tabs101{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;overflow:visible}
 #main .settings-tabs101 button{padding:9px 2px;font-size:12.5px;border-radius:12px;min-width:0;overflow:hidden;text-overflow:ellipsis}
 #main .settings-view101>[data-settings-page101]>.panel{padding:14px;border-radius:16px}
}

/* Touch devices: small icon buttons get a bigger hit area without changing their look */
@media(pointer:coarse){
 #siteInfo.icon{min-width:40px;min-height:40px}
 .top-actions>.icon,.topbar>.icon{min-width:38px;min-height:38px}
}

/* Long words, links and usernames wrap instead of widening the page */
#main h1,#main h2,#main h3,#main p,#main li,#main .bio,#main .identity-bio{overflow-wrap:break-word}

/* Very small phones (≤340px) */
@media(max-width:340px){
 .top-actions{gap:4px!important}
}

/* Messages on phones: the list stays inside the screen; header buttons are full size */
@media(max-width:800px){
 #main .messages-layout{margin-inline:0!important;max-width:100%}
 #main .chat-side-controls{padding-inline:8px;gap:8px;box-sizing:border-box}
 #main .chat-side-controls>.icon{width:38px!important;height:38px!important;min-width:38px;flex:none}
}