/* =========================================================
   Vrienda v5.1 Social Feed Refinement
   Direction: calm centered social feed.
   Inspired by LinkedIn/Facebook readability, with Vrienda warmth.
   Safe on top of v5.0.
   ========================================================= */

:root{
  --vf-bg:#f3ede5;
  --vf-card:#ffffff;
  --vf-card-soft:#fffaf5;
  --vf-line:#eadfd3;
  --vf-text:#1f2937;
  --vf-muted:#6b7280;
  --vf-orange:#ff7a18;
  --vf-orange-soft:#fff7ed;
  --vf-radius:22px;
  --vf-radius-lg:28px;
  --vf-shadow:0 8px 24px rgba(28,25,23,.055);
  --vf-shadow-hover:0 14px 34px rgba(28,25,23,.085);
  --vf-feed-width:720px;
  --vf-left-width:230px;
  --vf-right-width:300px;
  --vf-gap:18px;
}

/* Site background */
html,
body{
  background:var(--vf-bg) !important;
}

body{
  color:var(--vf-text);
}

/* Main app width: centered but not ultra-wide */
.container,
.wrapper,
.page,
.page-wrap,
.page-wrapper,
.site,
.site-wrap,
.app,
.app-wrap,
.content-wrap,
.main-wrap,
.layout,
.dashboard{
  max-width:1280px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Preserve existing layout, but gently tune common three-column shells */
.layout,
.dashboard,
.app-layout,
.social-layout,
.main-layout,
.page-grid,
.content-grid{
  gap:var(--vf-gap) !important;
  align-items:flex-start !important;
}

/* If existing layout is grid/flex, tune columns without forcing new display */
@supports (grid-template-columns: 1fr){
  .layout,
  .dashboard,
  .app-layout,
  .social-layout,
  .main-layout,
  .page-grid,
  .content-grid{
    grid-template-columns:var(--vf-left-width) minmax(0,var(--vf-feed-width)) var(--vf-right-width) !important;
    justify-content:center !important;
  }
}

/* Feed stays readable and centered */
main,
.main,
.feed-column,
.content,
.main-content,
.center,
.timeline,
.timeline-wrap,
.feed,
.posts,
.krabbels{
  max-width:var(--vf-feed-width) !important;
}

/* Wide feature pages may use more width */
.vrienda-discovery,
.vrienda-groups,
.vrienda-group-view,
.vrienda-media-engine,
.vrienda-messenger,
.vrienda-community-feed{
  max-width:960px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Header cleaner */
header,
.topbar,
.navbar,
.site-header,
.app-header{
  background:rgba(255,255,255,.92) !important;
  border-bottom:1px solid var(--vf-line) !important;
  box-shadow:0 4px 16px rgba(28,25,23,.035) !important;
  backdrop-filter:blur(14px);
}

/* Cards: calm social style */
.card,
.panel,
.widget,
.box,
.section,
.feed-card,
.post-card,
.krabbel-card,
.story-card,
.activity-card,
.profile-card,
.group-card,
.side-card,
.trending-card,
.menu-card,
.vrienda-community-card,
.vrienda-discovery-section,
.vrienda-group-card,
.vrienda-group-post,
.vrienda-group-profile{
  background:var(--vf-card) !important;
  border:1px solid var(--vf-line) !important;
  border-radius:var(--vf-radius-lg) !important;
  box-shadow:var(--vf-shadow) !important;
}

.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card{
  padding:0 !important;
  overflow:hidden !important;
  margin-bottom:var(--vf-gap) !important;
}

/* Inner spacing for posts */
.feed-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
.post-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
.krabbel-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
.vrienda-community-card > *:not(img):not(video):not(.post-media):not(.media-wrap){
  margin-left:18px;
  margin-right:18px;
}

.feed-card > *:first-child,
.post-card > *:first-child,
.krabbel-card > *:first-child,
.vrienda-community-card > *:first-child{
  margin-top:16px;
}

.feed-card > *:last-child,
.post-card > *:last-child,
.krabbel-card > *:last-child,
.vrienda-community-card > *:last-child{
  margin-bottom:16px;
}

/* Post header */
.post-header,
.krabbel-header,
.feed-card-header,
.vrienda-community-card-head,
.user-row,
.author-row{
  display:flex;
  align-items:center !important;
  gap:10px !important;
  min-height:52px;
}

/* Avatars stay small */
.avatar,
.profile-photo,
.user-avatar,
.post-avatar,
.comment-avatar,
.member-avatar,
.story-avatar,
img.avatar,
img.profile-photo,
img.user-avatar,
img.post-avatar,
.post-header img,
.krabbel-header img,
.feed-card-header img,
.user-row img,
.author-row img,
a[href*="public_profile"] img,
a[href*="profile"] img{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  flex:0 0 48px !important;
  box-shadow:none !important;
}

/* Text rhythm */
.feed-card,
.post-card,
.krabbel-card,
.vrienda-community-card{
  font-size:15px;
  line-height:1.55;
}

.feed-card p,
.post-card p,
.krabbel-card p,
.vrienda-community-card p{
  line-height:1.55 !important;
}

small,
.meta,
.date,
.time,
.timestamp,
.post-meta,
.krabbel-meta{
  color:var(--vf-muted) !important;
  font-size:13px !important;
  font-weight:600 !important;
}

strong,
b{
  font-weight:750 !important;
}

/* Media edge-to-edge inside feed cards */
.post-media,
.media-wrap,
.image-wrap{
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:hidden;
}

.feed-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.post-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.krabbel-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.vrienda-community-card > img:not(.avatar):not(.profile-photo):not(.user-avatar):not(.post-avatar),
.post-media img,
.media-wrap img,
.image-wrap img,
.feed-image,
.post-image,
.krabbel-image,
.vrienda-community-media{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:680px !important;
  object-fit:contain !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}

/* If media is small gif/sticker, don't blow it up too much */
.feed-card img[src*="gif"],
.post-card img[src*="gif"],
.krabbel-card img[src*="gif"]{
  width:auto !important;
  max-width:100% !important;
  border-radius:16px !important;
  margin-left:18px !important;
}

/* Actions/reactions */
.actions,
.post-actions,
.krabbel-actions,
.reactions,
.vrienda-reactions,
.vrienda-community-meta{
  border-top:1px solid var(--vf-line);
  padding-top:10px;
  gap:8px !important;
}

button,
.btn,
.button,
input[type="submit"],
a.btn{
  border-radius:14px !important;
  font-weight:800 !important;
}

.reaction-trigger,
.like-button,
.comment-button,
.action-btn{
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  box-shadow:none !important;
}

/* Composer refined */
.composer,
.post-composer,
.krabbel-composer,
#postForm,
.create-post{
  background:var(--vf-card) !important;
  border:1px solid var(--vf-line) !important;
  border-radius:var(--vf-radius-lg) !important;
  box-shadow:var(--vf-shadow) !important;
  padding:16px !important;
  margin-bottom:var(--vf-gap) !important;
}

textarea,
input,
select{
  border:1px solid var(--vf-line) !important;
  border-radius:16px !important;
  background:var(--vf-card-soft) !important;
  box-shadow:none !important;
}

/* Stories/activity: smaller, cleaner */
.stories,
.stories-card,
.activity-card,
.story-card{
  margin-bottom:var(--vf-gap) !important;
}

/* Sidebars: compact social panels */
.leftbar,
.left-sidebar,
.sidebar-left,
nav.sidebar,
.rightbar,
.right-sidebar,
.sidebar-right,
.widget,
.side-card,
.trending-card,
.menu-card{
  font-size:14px !important;
}

.sidebar a,
.leftbar a,
nav.sidebar a,
.menu a,
.side-menu a{
  min-height:36px !important;
  border-radius:12px !important;
  font-weight:700 !important;
}

/* Sticky sidebars on desktop */
@media(min-width:1051px){
  .leftbar,
  .left-sidebar,
  .sidebar-left,
  nav.sidebar,
  .rightbar,
  .right-sidebar,
  .sidebar-right{
    position:sticky !important;
    top:86px !important;
    max-height:calc(100dvh - 100px) !important;
    overflow:auto !important;
    scrollbar-width:thin;
  }
}

/* AI/live widgets should be less visually dominant */
.vrienda-live-layer,
.vrienda-ai-panel{
  opacity:.96;
  box-shadow:0 12px 36px rgba(28,25,23,.14) !important;
}

/* Hover only on desktop */
@media(hover:hover){
  .feed-card:hover,
  .post-card:hover,
  .krabbel-card:hover,
  .vrienda-community-card:hover{
    box-shadow:var(--vf-shadow-hover) !important;
  }
}

/* Tablet */
@media(max-width:1200px){
  :root{
    --vf-left-width:210px;
    --vf-right-width:280px;
    --vf-feed-width:700px;
  }

  .rightbar,
  .right-sidebar,
  .sidebar-right{
    display:none !important;
  }
}

/* Mobile app-like feed */
@media(max-width:900px){
  :root{
    --vf-feed-width:100%;
    --vf-gap:12px;
  }

  .container,
  .wrapper,
  .page,
  .page-wrap,
  .page-wrapper,
  .site,
  .site-wrap,
  .app,
  .app-wrap,
  .content-wrap,
  .main-wrap,
  .layout,
  .dashboard{
    max-width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  main,
  .main,
  .feed-column,
  .content,
  .main-content,
  .center,
  .timeline,
  .timeline-wrap,
  .feed,
  .posts,
  .krabbels{
    width:100% !important;
    max-width:100% !important;
  }

  .leftbar,
  .left-sidebar,
  .sidebar-left,
  nav.sidebar,
  .rightbar,
  .right-sidebar,
  .sidebar-right{
    position:static !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .feed-card,
  .post-card,
  .krabbel-card,
  .vrienda-community-card,
  .composer,
  .post-composer,
  .krabbel-composer,
  #postForm,
  .create-post{
    border-radius:20px !important;
    margin-bottom:12px !important;
  }

  .feed-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
  .post-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
  .krabbel-card > *:not(img):not(video):not(.post-media):not(.media-wrap),
  .vrienda-community-card > *:not(img):not(video):not(.post-media):not(.media-wrap){
    margin-left:14px;
    margin-right:14px;
  }

  .avatar,
  .profile-photo,
  .user-avatar,
  .post-avatar,
  .comment-avatar,
  .member-avatar,
  .story-avatar,
  img.avatar,
  img.profile-photo,
  img.user-avatar,
  img.post-avatar,
  .post-header img,
  .krabbel-header img,
  .feed-card-header img,
  .user-row img,
  .author-row img,
  a[href*="public_profile"] img,
  a[href*="profile"] img{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    flex-basis:42px !important;
  }

  .feed-card,
  .post-card,
  .krabbel-card,
  .vrienda-community-card{
    font-size:15px;
  }
}

/* Very small mobile */
@media(max-width:520px){
  .container,
  .wrapper,
  .page,
  .page-wrap,
  .page-wrapper,
  .site,
  .site-wrap,
  .app,
  .app-wrap,
  .content-wrap,
  .main-wrap,
  .layout,
  .dashboard{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .feed-card,
  .post-card,
  .krabbel-card,
  .vrienda-community-card{
    border-radius:18px !important;
  }
}