/* STAGE31: compatibility styles; current component CSS owns presentation. */
@layer av-legacy-shared {
/* anihate v12 — targeted visual normalization. The original shell/menu is intentionally untouched. */
:root{
  --av-bg:#080b14;
  --av-panel:#101522;
  --av-panel-2:#0c111d;
  --av-border:#252c40;
  --av-border-soft:rgba(255,255,255,.07);
  --av-text:#f5f5f8;
  --av-muted:#8f96a9;
  --av-purple:#8b4dff;
  --av-purple-2:#a35cff;
}

/* ---------- Shared post component ---------- */
.post,
.av-post{
  width:100% ;
  min-width:0 ;
  background:linear-gradient(180deg,#111622,#0f141f) ;
  border:1px solid #242b3d ;
  border-radius:16px ;
  box-shadow:none ;
  overflow:hidden ;
  padding:0 ;
  margin:0 0 16px ;
}
.post-top,
.post-head,
.post-header{
  display:flex ;
  align-items:center ;
  gap:12px ;
  min-width:0 ;
  padding:14px 16px 0 ;
}
.post-avatar,
.profile-avatar-link .post-avatar,
.post-top .profile-avatar-link,
.post-top>.post-avatar{
  width:42px ;
  height:42px ;
  min-width:42px ;
  flex:0 0 42px ;
  border-radius:50% ;
  overflow:hidden ;
  display:grid ;
  place-items:center ;
  background:#2a2144 ;
}
.post-avatar img,
.profile-avatar-link img,
.post-top>.post-avatar img{
  width:100% ;
  height:100% ;
  object-fit:cover ;
  display:block ;
}
.post-meta,
.post-top>.meta,
.post-top>div:last-child{
  min-width:0 ;
  flex:1 1 auto ;
}
.post-name,
.post-author,
.post-user,
.author-name,
.post-top .name{
  display:inline-flex ;
  align-items:center ;
  gap:5px ;
  min-width:0 ;
  max-width:100% ;
  white-space:nowrap ;
  overflow:hidden ;
  text-overflow:ellipsis ;
  font-weight:800 ;
  color:#f7f7fa ;
  line-height:1.2 ;
  text-decoration:none ;
}
.post-name .user-badges,
.post-author .user-badges,
.post-top .name .user-badges{
  flex:0 0 auto ;
}
.post-time,
.post-meta .handle,
.post-meta .post-role,
.post-meta .post-time,
.post-top .handle{
  display:block ;
  margin-top:4px ;
  color:#7f879a ;
  font-size:12px ;
  line-height:1.25 ;
  white-space:nowrap ;
  overflow:hidden ;
  text-overflow:ellipsis ;
}
.user-badges{
  display:inline-flex ;
  align-items:center ;
  gap:4px ;
  flex:0 0 auto ;
  white-space:nowrap ;
}
.verified{
  display:inline-grid ;
  place-items:center ;
  width:16px ;
  height:16px ;
  min-width:16px ;
  flex:0 0 16px ;
  margin:0 ;
  border-radius:50% ;
  background:#7840e8 ;
  color:#fff ;
  font-size:9px ;
  line-height:1 ;
}
.post-body{
  padding:12px 16px 0 ;
  margin:0 ;
  color:#e9eaf0 ;
  font-size:14px ;
  line-height:1.55 ;
  white-space:pre-wrap ;
  overflow-wrap:anywhere ;
  word-break:normal ;
}
.post-images{
  margin:12px 16px 0 ;
  padding:0 ;
  display:grid ;
  grid-template-columns:repeat(2,minmax(0,1fr)) ;
  gap:8px ;
}
.post-images.single-vertical,
.post-images:has(> .post-image:only-child){
  grid-template-columns:1fr ;
}
.post-image{
  display:block ;
  width:100% ;
  max-width:100% ;
  height:auto ;
  max-height:620px ;
  min-height:0 ;
  object-fit:cover ;
  border-radius:12px ;
  background:#0a0e17 ;
  border:0 ;
}
.post-images:has(> .post-image:only-child) .post-image,
.post-images.single-vertical .post-image{
  max-height:680px ;
  object-fit:contain ;
}
.post-actions,
.actions{
  display:flex ;
  align-items:center ;
  gap:4px ;
  min-height:48px ;
  padding:10px 12px 10px 16px ;
  margin:0 ;
  border-top:0 ;
}
.post-action,
.action{
  display:inline-flex ;
  align-items:center ;
  justify-content:center ;
  min-height:32px ;
  padding:7px 9px ;
  border:0 ;
  border-radius:9px ;
  background:transparent ;
  color:#8991a5 ;
  font-size:12px ;
  line-height:1 ;
  text-decoration:none ;
  cursor:pointer ;
  white-space:nowrap ;
}
.post-action:hover,
.action:hover{background:#1a2131 ;color:#fff }
.post-action.like.liked,
.action.like.liked,
.post-action.liked{color:#ff6890 }
.post .post-share,
.post .post-bookmark{
  margin-left:0 ;
}
.post .post-bookmark{margin-left:auto }
.post .delete-post{color:#ff819a }
.post .delete-post:hover{background:rgba(255,92,120,.10) ;color:#ff9bb0 }
.post>a.action.profile-link{display:none }

/* Shared comments */
.comments,
.comment-list{
  margin:0 ;
  padding:0 16px 14px ;
}
.comments:not(.open):empty,
.comment-list:empty{display:none }
.comment{
  display:flex ;
  gap:9px ;
  min-width:0 ;
  padding:8px 0 ;
  margin:0 ;
}
.comment-avatar{
  width:32px ;
  height:32px ;
  min-width:32px ;
  flex:0 0 32px ;
  border-radius:50% ;
  overflow:hidden ;
  display:grid ;
  place-items:center ;
  background:#2b2341 ;
}
.comment-avatar img{width:100% ;height:100% ;object-fit:cover ;display:block }
.comment-body{
  min-width:0 ;
  flex:1 1 auto ;
  padding:8px 10px ;
  border-radius:11px ;
  background:#0d131f ;
}
.comment-author,
.comment-name{
  display:inline-flex ;
  align-items:center ;
  gap:4px ;
  min-width:0 ;
  max-width:100% ;
  color:#f4f5f7 ;
  font-size:12px ;
  line-height:1.25 ;
  white-space:nowrap ;
  overflow:hidden ;
  text-overflow:ellipsis ;
  text-decoration:none ;
}
.comment-text{
  margin-top:4px ;
  color:#cbd0db ;
  font-size:13px ;
  line-height:1.45 ;
  white-space:pre-wrap ;
  overflow-wrap:anywhere ;
}
.comment-actions{display:flex ;gap:5px ;margin-top:6px }
.comment-actions button{border:0 ;background:transparent ;padding:3px 5px ;color:#7d869b ;font-size:11px ;cursor:pointer }
.comment-actions button:hover{color:#fff }
.comment-actions .liked{color:#ff6890 }
.comment-replying{color:#a978ff ;font-size:11px }
.comment-form{display:flex ;align-items:center ;gap:8px ;margin-top:8px }
.comment-form input{min-width:0 ;flex:1 1 auto ;background:#090e18 ;border:1px solid #293149 ;color:#fff ;border-radius:10px ;padding:9px 11px ;outline:none }

/* ---------- Shared composer ---------- */
.composer{
  padding:16px ;
  background:transparent ;
}
.composer textarea{
  width:100% ;
  min-height:82px ;
  resize:vertical ;
  box-sizing:border-box ;
  background:#0a0f19 ;
  border:1px solid #293149 ;
  border-radius:12px ;
  color:#f5f6f8 ;
  padding:12px ;
  outline:none ;
  line-height:1.5 ;
  overflow-wrap:anywhere ;
}
.composer textarea:focus{border-color:#7544e9 ;box-shadow:0 0 0 2px rgba(117,68,233,.12) }
.composer-bottom,
.composer-footer{display:flex ;align-items:center ;justify-content:space-between ;gap:10px ;margin-top:10px ;min-width:0 }
.post-tools{display:flex ;align-items:center ;gap:7px ;min-width:0 ;flex-wrap:wrap }
.attachment-name{max-width:180px ;overflow:hidden ;text-overflow:ellipsis ;white-space:nowrap ;color:#858da0 ;font-size:11px }

/* ---------- Profile: stable two-column desktop layout ---------- */
body.av-page-profile .container{
  width:min(1450px,calc(100% - 36px)) ;
  margin:0 auto ;
  padding:8px 0 60px ;
}
body.av-page-profile .container>section:first-child{
  width:calc(100% - 366px) ;
  min-width:0 ;
}
body.av-page-profile .profile-card{
  width:100% ;
  min-width:0 ;
  margin-top:40px ;
  padding:0 20px ;
  border-radius:0 0 12px 12px ;
  background:linear-gradient(180deg,#111622,#0d121e) ;
  border:1px solid #242b3d ;
  border-top:0 ;
}
body.av-page-profile .profile-head{
  display:grid ;
  grid-template-columns:136px minmax(0,1fr) auto auto ;
  align-items:center ;
  column-gap:20px ;
  row-gap:12px ;
  min-width:0 ;
  margin-top:-56px ;
  position:relative ;
}
body.av-page-profile .profile-head>.identity{min-width:0 }
body.av-page-profile .profile-head>.identity .name{display:flex ;align-items:center ;gap:7px ;white-space:normal ;overflow:visible ;font-size:30px ;line-height:1.15 }
body.av-page-profile .profile-head>.identity .handle{white-space:nowrap ;overflow:hidden ;text-overflow:ellipsis }
body.av-page-profile .profile-head>.stats{display:flex ;align-items:center ;gap:22px ;margin:0 ;white-space:nowrap }
body.av-page-profile .profile-head>.actions{display:flex ;align-items:center ;gap:8px ;padding:0 ;min-height:0 }
body.av-page-profile .profile-head>.actions .btn{white-space:nowrap }
body.av-page-profile .profile-card .profile-tabs{
  display:flex ;
  align-items:stretch ;
  gap:2px ;
  margin-top:18px ;
  min-width:0 ;
  overflow:auto hidden ;
  scrollbar-width:none ;
}
body.av-page-profile .profile-card .profile-tab{flex:0 0 auto ;white-space:nowrap }
body.av-page-profile .profile-layout{
  display:block ;
  width:calc(100% - 366px) ;
  min-width:0 ;
  margin-top:16px ;
  position:relative ;
}
body.av-page-profile .profile-layout>div{width:100% ;max-width:none ;min-width:0 }
body.av-page-profile .profile-layout>aside{
  position:absolute ;
  right:calc(-366px) ;
  top:0 ;
  width:350px ;
  margin:0 ;
  min-width:0 ;
}
body.av-page-profile #view-posts{width:100% ;max-width:none ;margin:0 }
body.av-page-profile #view-posts>.panel-title{padding:16px 18px }
body.av-page-profile #composerPanel{margin:0 ;border:0 ;border-bottom:1px solid rgba(255,255,255,.06) ;border-radius:0 ;background:transparent }
body.av-page-profile #posts{width:100% ;min-width:0 }
body.av-page-profile .bio{max-width:100% ;overflow-wrap:anywhere }
body.av-page-profile .profile-tags{max-width:100% ;display:flex ;flex-wrap:wrap ;gap:6px }
body.av-page-profile .profile-tags *{max-width:100% }
body.av-page-profile .panel,
body.av-page-profile aside>.panel{min-width:0 ;overflow:hidden }
body.av-page-profile .panel-title{white-space:nowrap ;overflow:hidden ;text-overflow:ellipsis }

/* Profile right rail cards */
body.av-page-profile .profile-extra{min-width:0 }
body.av-page-profile .profile-extra>section,
body.av-page-profile .profile-extra>.side-section{min-width:0 }

/* ---------- Generic pages: prevent content from being wider than its columns ---------- */
.av-page-feed main,
.av-page-community main,
.av-page-community-topic main,
.av-page-communities main,
.av-page-messages main,
.av-page-friends main,
.av-page-search main{min-width:0}

/* Prevent icon/text baselines from drifting. */
button, input, textarea, select{line-height:1.35}

@media (max-width:1200px){
  body.av-page-profile .container{width:calc(100% - 24px) }
  body.av-page-profile .container>section:first-child,
  body.av-page-profile .profile-layout{width:calc(100% - 320px) }
  body.av-page-profile .profile-layout>aside{right:-320px ;width:304px }
  body.av-page-profile .profile-head{grid-template-columns:116px minmax(0,1fr) }
  body.av-page-profile .profile-head>.stats,
  body.av-page-profile .profile-head>.actions{grid-column:2 ;justify-self:start }
}
@media (max-width:900px){
  body.av-page-profile .container,
  body.av-page-profile .container>section:first-child,
  body.av-page-profile .profile-layout{width:calc(100% - 16px) ;margin-left:auto ;margin-right:auto }
  body.av-page-profile .profile-layout{display:block }
  body.av-page-profile .profile-layout>aside{position:static ;width:100% ;margin-top:16px }
  body.av-page-profile .profile-head{display:grid ;grid-template-columns:100px minmax(0,1fr) ;column-gap:16px ;margin-top:-48px }
  body.av-page-profile .profile-head>.stats,
  body.av-page-profile .profile-head>.actions{grid-column:2 ;justify-self:start ;flex-wrap:wrap }
  body.av-page-profile .profile-head>.actions{width:auto }
  body.av-page-profile .profile-card{padding:0 16px 18px }
}
@media (max-width:600px){
  body.av-page-profile .container,
  body.av-page-profile .container>section:first-child,
  body.av-page-profile .profile-layout{width:calc(100% - 16px) }
  body.av-page-profile .profile-head{grid-template-columns:86px minmax(0,1fr) ;column-gap:12px }
  body.av-page-profile .profile-head>.identity .name{font-size:24px }
  body.av-page-profile .profile-head>.stats{gap:12px ;overflow:auto hidden ;max-width:100% }
  .post-top,.post-head,.post-header{padding-left:13px ;padding-right:13px }
  .post-body{padding-left:13px ;padding-right:13px }
  .post-images{margin-left:13px ;margin-right:13px ;grid-template-columns:1fr }
  .post-actions,.actions{padding-left:13px }
  .comments,.comment-list{padding-left:13px ;padding-right:13px }
  .post{border-radius:13px }
}

}