/* =========================================================
   Vrienda v5.2 Unified Social Surface
   Polish layer on top of v5.1 + v5.1.1.
   No aggressive layout replacement.
   ========================================================= */

:root{
  --vs-surface:#ffffff;
  --vs-soft:#fffaf5;
  --vs-line:#eadfd3;
  --vs-muted:#6b7280;
  --vs-text:#1f2937;
  --vs-orange:#ff7a18;
  --vs-orange-soft:#fff7ed;
  --vs-radius:22px;
  --vs-radius-lg:26px;
  --vs-shadow:0 8px 22px rgba(28,25,23,.052);
  --vs-shadow-hover:0 12px 30px rgba(28,25,23,.075);
}

/* Top feed surface */
.feed-column > .stories,
.feed-column > .stories-card,
.feed-column > .story-card,
.main-content > .stories,
.main-content > .stories-card,
.main-content > .story-card,
main > .stories,
main > .stories-card,
main > .story-card{
  margin-bottom:10px !important;
  border-bottom-left-radius:18px !important;
  border-bottom-right-radius:18px !important;
}

.feed-column > .activity-card,
.feed-column > .activity,
.main-content > .activity-card,
.main-content > .activity,
main > .activity-card,
main > .activity{
  margin-top:0 !important;
  margin-bottom:10px !important;
  border-radius:18px !important;
}

.stories,
.stories-card,
.story-card,
.activity-card,
.activity,
.composer,
.post-composer,
.krabbel-composer,
#postForm,
.create-post{
  border-color:var(--vs-line) !important;
  box-shadow:var(--vs-shadow) !important;
}

/* Stories compact */
.stories,
.stories-card,
.story-card{
  padding:14px 16px !important;
}

.stories h2,
.stories-card h2,
.story-card h2,
.stories h3,
.stories-card h3,
.story-card h3{
  font-size:20px !important;
  margin-bottom:4px !important;
}

.stories p,
.stories-card p,
.story-card p{
  color:var(--vs-muted) !important;
  font-size:13px !important;
  font-weight:650 !important;
  margin-top:0 !important;
  margin-bottom:10px !important;
}

.story-list,
.stories-list,
.story-row,
.stories-row{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  overflow-x:auto !important;
  padding-bottom:2px !important;
  scrollbar-width:thin;
}

.story-item{
  min-width:76px !important;
  max-width:86px !important;
}

.story-avatar,
.story-ring,
.story-thumb{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
}

.story-item strong,
.story-item .name,
.story-name{
  font-size:12.5px !important;
  line-height:1.15 !important;
  margin-top:5px !important;
}

.story-item small,
.story-time{
  font-size:11.5px !important;
}

/* Activity compact */
.activity-card,
.activity{
  padding:12px 16px !important;
}

.activity-card h2,
.activity-card h3,
.activity h2,
.activity h3{
  font-size:18px !important;
  margin:0 0 8px !important;
}

.activity-card .activity-item,
.activity .activity-item{
  min-height:40px !important;
  padding:6px 0 !important;
}

/* Composer */
.composer,
.post-composer,
.krabbel-composer,
#postForm,
.create-post{
  position:relative;
  padding:14px !important;
  border-radius:24px !important;
  background:linear-gradient(180deg,#fff 0%,#fffaf5 100%) !important;
}

.composer::before,
.post-composer::before,
.krabbel-composer::before,
#postForm::before,
.create-post::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,122,24,.05),transparent 55%);
}

.composer textarea,
.post-composer textarea,
.krabbel-composer textarea,
#postForm textarea,
.create-post textarea{
  min-height:74px !important;
  font-size:14.5px !important;
  line-height:1.45 !important;
  border-radius:18px !important;
  background:#fff !important;
}

.composer button,
.post-composer button,
.krabbel-composer button,
#postForm button,
.create-post button{
  min-height:34px !important;
  padding:0 12px !important;
  font-size:13px !important;
  border-radius:999px !important;
}

.composer .tools,
.post-composer .tools,
.krabbel-composer .tools,
#postForm .tools,
.create-post .tools,
.composer .composer-tools,
.post-composer .composer-tools,
.krabbel-composer .composer-tools{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin-top:9px !important;
}

/* Feed cards */
.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card{
  transition:box-shadow .16s ease, transform .16s ease;
  color:var(--vs-text) !important;
}

@media(hover:hover){
  .feed-card:hover,
  .post-card:hover,
  .krabbel-card:hover,
  .vrienda-community-card:hover{
    box-shadow:var(--vs-shadow-hover) !important;
  }
}

.post-header strong,
.krabbel-header strong,
.feed-card-header strong,
.user-row strong,
.author-row strong,
.vrienda-community-card-head strong{
  font-size:14.5px !important;
  color:var(--vs-text) !important;
  font-weight:780 !important;
}

.post-header small,
.krabbel-header small,
.feed-card-header small,
.user-row small,
.author-row small,
.vrienda-community-card-head small{
  font-size:12.25px !important;
  color:var(--vs-muted) !important;
  font-weight:600 !important;
}

.feed-card p,
.post-card p,
.krabbel-card p,
.vrienda-community-card p,
.feed-card .post-content,
.post-card .post-content,
.krabbel-card .post-content,
.vrienda-community-card .post-content{
  font-size:14.75px !important;
  line-height:1.52 !important;
  font-weight:500 !important;
}

/* Tags/mentions less loud */
a,
.hashtag,
.vrienda-hashtag,
.mention,
.vrienda-mention{
  text-decoration:none !important;
}

.hashtag,
.vrienda-hashtag,
.mention,
.vrienda-mention,
a[href*="hashtag"],
a[href*="%23"]{
  color:#ea580c !important;
  font-weight:760 !important;
  background:rgba(255,122,24,.08);
  border-radius:9px;
  padding:1px 4px;
}

/* Media and stickers */
.post-media img,
.media-wrap img,
.image-wrap img,
.feed-image,
.post-image,
.krabbel-image,
.vrienda-community-media{
  background:#fff !important;
}

/* Cap stickers/GIFs */
.feed-card img[src*="gif"],
.post-card img[src*="gif"],
.krabbel-card img[src*="gif"],
.feed-card img[src*="emoji"],
.post-card img[src*="emoji"],
.krabbel-card img[src*="emoji"],
.feed-card img[src*="sticker"],
.post-card img[src*="sticker"],
.krabbel-card img[src*="sticker"],
.feed-card img[src*="giphy"],
.post-card img[src*="giphy"],
.krabbel-card img[src*="giphy"]{
  width:auto !important;
  max-width:220px !important;
  max-height:220px !important;
  border-radius:14px !important;
  margin-left:16px !important;
  margin-right:16px !important;
  background:#fff !important;
}

/* Cap unclassed transparent PNG-style stickers, but avoid avatars/media */
.feed-card img[src$=".png"]:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar):not(.feed-image):not(.post-image):not(.krabbel-image):not(.vrienda-real-media),
.post-card img[src$=".png"]:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar):not(.feed-image):not(.post-image):not(.krabbel-image):not(.vrienda-real-media),
.krabbel-card img[src$=".png"]:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar):not(.feed-image):not(.post-image):not(.krabbel-image):not(.vrienda-real-media){
  max-width:340px !important;
}

/* Actions/comments */
.actions,
.post-actions,
.krabbel-actions,
.reactions,
.vrienda-reactions,
.vrienda-community-meta{
  border-top:1px solid rgba(234,223,211,.78) !important;
  padding-top:8px !important;
}

.reaction-trigger,
.like-button,
.comment-button,
.action-btn,
.actions button,
.post-actions button,
.krabbel-actions button{
  background:#fff !important;
  color:var(--vs-text) !important;
  border:1px solid var(--vs-line) !important;
}

.reaction-trigger:hover,
.like-button:hover,
.comment-button:hover,
.action-btn:hover,
.actions button:hover,
.post-actions button:hover,
.krabbel-actions button:hover{
  background:var(--vs-orange-soft) !important;
  color:#9a3412 !important;
}

.reaction-counts,
.comment-list,
.comments,
.krabbel-comments{
  margin-top:8px !important;
}

.comment,
.comment-item,
.reply,
.krabbel-comment{
  border-radius:14px !important;
  background:var(--vs-soft) !important;
  padding:8px 10px !important;
  margin-top:6px !important;
}

/* Sidebars */
.widget,
.side-card,
.trending-card,
.menu-card{
  box-shadow:var(--vs-shadow) !important;
}

.widget h2,
.widget h3,
.side-card h2,
.side-card h3,
.trending-card h2,
.trending-card h3{
  font-size:15.5px !important;
  margin-bottom:9px !important;
}

.sidebar a,
.leftbar a,
nav.sidebar a,
.menu a,
.side-menu a{
  color:var(--vs-text) !important;
}

.sidebar a:hover,
.leftbar a:hover,
nav.sidebar a:hover,
.menu a:hover,
.side-menu a:hover{
  background:var(--vs-orange-soft) !important;
  color:#9a3412 !important;
}

/* Profile/stats */
.profile-card,
.stats-card,
.top-friends,
.friends-row,
.vrienda-profile-card{
  border-radius:24px !important;
}

.stats,
.stat-row,
.profile-stats{
  gap:8px !important;
}

.stat,
.stat-card,
.profile-stat{
  border-radius:16px !important;
  background:var(--vs-soft) !important;
  border:1px solid var(--vs-line) !important;
}

/* Mobile */
@media(max-width:900px){
  .stories,
  .stories-card,
  .story-card{
    padding:12px 13px !important;
  }

  .story-avatar,
  .story-ring,
  .story-thumb{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
  }

  .composer,
  .post-composer,
  .krabbel-composer,
  #postForm,
  .create-post{
    padding:12px !important;
    border-radius:20px !important;
  }

  .composer textarea,
  .post-composer textarea,
  .krabbel-composer textarea,
  #postForm textarea,
  .create-post textarea{
    min-height:68px !important;
  }

  .feed-card img[src*="gif"],
  .post-card img[src*="gif"],
  .krabbel-card img[src*="gif"],
  .feed-card img[src*="emoji"],
  .post-card img[src*="emoji"],
  .krabbel-card img[src*="emoji"],
  .feed-card img[src*="sticker"],
  .post-card img[src*="sticker"],
  .krabbel-card img[src*="sticker"],
  .feed-card img[src*="giphy"],
  .post-card img[src*="giphy"],
  .krabbel-card img[src*="giphy"]{
    max-width:190px !important;
    max-height:190px !important;
    margin-left:13px !important;
    margin-right:13px !important;
  }

  .feed-card p,
  .post-card p,
  .krabbel-card p,
  .vrienda-community-card p,
  .feed-card .post-content,
  .post-card .post-content,
  .krabbel-card .post-content,
  .vrienda-community-card .post-content{
    font-size:14.25px !important;
  }
}

@media(max-width:520px){
  .story-item{
    min-width:68px !important;
    max-width:74px !important;
  }

  .story-avatar,
  .story-ring,
  .story-thumb{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
  }
}