/* Shared Post Card Styles (used on feed, profile, etc.) */

/* === POST CARD - PREMIUM REDESIGN === */
.post-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.98) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(229,231,235,0.5);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), inset 0 1px 0 0 rgba(255,255,255,0.8);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  animation: slideInUp 0.5s ease-out backwards;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.post-card:hover {
  border-color: rgba(255,77,255,0.15);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.post-card.premium {
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), #fff) padding-box,
              linear-gradient(135deg, rgba(255,77,255,0.8), rgba(118,75,162,0.8), rgba(0,242,254,0.6)) border-box;
  box-shadow: 0 12px 32px rgba(255,77,255,0.3), 0 0 40px rgba(0,242,254,0.2), 0 0 60px rgba(118,75,162,0.15), inset 0 1px 0 0 rgba(255,255,255,0.9);
  animation: electricPulse 4s ease-in-out infinite;
}

.post-card.premium:hover {
  box-shadow: 0 24px 64px rgba(255,77,255,0.4), 0 0 80px rgba(0,242,254,0.3), 0 0 100px rgba(118,75,162,0.25), inset 0 1px 0 0 rgba(255,255,255,1);
  animation: electricGlow 2s ease-in-out infinite;
}

/* === POST HEADER === */
.post-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.post-header .avatar {
  position:relative; width:52px; height:52px; border-radius:50%; border:3px solid transparent;
  background: linear-gradient(white,white) padding-box, linear-gradient(135deg,#FF4DFF,#A53CFF,#3FD6FF) border-box;
  box-shadow: 0 4px 12px rgba(255,77,255,0.2), 0 0 8px rgba(0,242,254,0.15), 0 0 0 4px rgba(118,75,162,0.05);
  transition: all .3s cubic-bezier(0.4,0,0.2,1); cursor:pointer;
}
.post-header .avatar:hover { 
  transform: scale(1.1); 
  box-shadow: 0 8px 24px rgba(255,77,255,0.4), 0 0 16px rgba(0,242,254,0.3), 0 0 0 6px rgba(118,75,162,0.15);
  animation: electricSpark 2s ease-in-out infinite;
}
.post-user-meta { flex:1; min-width:0; }
.post-user-name { font-size:1.05rem; font-weight:700; color:#111827; margin:0 0 .25rem 0; background:linear-gradient(135deg,#111827,#374151); -webkit-background-clip:text; background-clip:text; }
.post-meta-line { display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:#6b7280; }
.post-passion-tag { background:linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.08)); color:#7C3AED; padding:.25rem .75rem; border-radius:20px; font-weight:700; font-size:.75rem; border:1px solid rgba(124,58,237,0.2); transition:all .3s ease; }
.post-passion-tag:hover { background:linear-gradient(135deg,#7C3AED,#6d28d9); color:#fff; transform:scale(1.05); }

/* === POST BODY === */
.post-body { margin-bottom:1rem; position:relative; z-index:5; }
.post-text { font-size:.95rem; line-height:1.7; color:#1f2937; margin:0 0 1rem 0; letter-spacing:.01em; }
.post-title { margin:0 0 .35rem 0; font-size:1.15rem; line-height:1.4; color:#0f172a; font-weight:800; letter-spacing:.01em; }
.post-taxonomy { display:flex; flex-direction:column; gap:.35rem; margin-top:.75rem; }
.post-pill-row { display:flex; flex-wrap:wrap; gap:.35rem; }
.post-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:999px; font-weight:700; font-size:.78rem; border:1px solid rgba(229,231,235,0.9); color:#374151; background:linear-gradient(135deg,#fff,#f9fafb); }
.post-pill.hashtag { border-color:rgba(255,77,255,0.25); color:#b91c1c; background:linear-gradient(135deg, rgba(255,77,255,0.08), rgba(255,77,255,0.02)); }
.post-pill.tag { border-color:rgba(124,58,237,0.25); color:#4c1d95; background:linear-gradient(135deg, rgba(124,58,237,0.08), rgba(124,58,237,0.02)); }
.post-pill:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.05); }

.post-body img, .post-body video, .post-image, .post-video {
  width:100%; border-radius:16px; margin-top:1rem; box-shadow:0 8px 24px rgba(0,0,0,0.1);
  transition: all .4s cubic-bezier(0.4,0,0.2,1); display:block!important; position:relative!important; z-index:10!important;
  object-fit: cover; -webkit-filter:none!important; filter:none!important; image-rendering:auto; min-height:100px;
}
.post-body img:hover, .post-body video:hover, .post-image:hover, .post-video:hover { transform: scale(1.02); box-shadow: 0 16px 48px rgba(0,0,0,0.15); }

/* === REACTIONS === */
.reactions-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; position:relative; z-index:1; }
.reactions-container { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; flex:1; }
.rx-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1rem; background:linear-gradient(135deg,#fff,#f9fafb); border:2px solid #e5e7eb; border-radius:50px; font-weight:700; font-size:.9rem; color:#6b7280; cursor:pointer; transition:all .3s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; }
.rx-btn::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,77,255,0.2); transform:translate(-50%,-50%); transition:width .4s ease, height .4s ease; }
.rx-btn:hover::before { width:0; height:0; }
.rx-btn:hover { border-color:#FF4DFF; box-shadow:0 2px 6px rgba(255,77,255,0.15); transform:none; }
.rx-btn.active { 
  background:linear-gradient(135deg, rgba(255,77,255,0.15), rgba(118,75,162,0.1), rgba(0,242,254,0.08)); 
  border-color:rgba(255,77,255,0.4); 
  color:#111827; 
  box-shadow:0 4px 12px rgba(255,77,255,0.2), 0 0 8px rgba(0,242,254,0.15), inset 0 1px 0 0 rgba(255,255,255,0.5);
  animation: electricGlow 3s ease-in-out infinite;
}
.rx-btn span:first-child { font-size:1.2rem; line-height:1; display:inline-block; transition: transform .3s cubic-bezier(0.68,-0.55,0.265,1.55); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.rx-btn:hover span:first-child { transform:none; }
.rx-btn:active span:first-child { transform: scale(0.9); }

/* === COMMENT TOGGLE === */
.comment-toggle { margin-left:auto; background:linear-gradient(135deg,#ffffff,#f9fafb); border:2px solid #e5e7eb; border-radius:50px; padding:.65rem 1.25rem; font-weight:700; font-size:.9rem; color:#374151; cursor:pointer; transition:all .3s cubic-bezier(0.4,0,0.2,1); }
.comment-toggle:hover { 
  background:linear-gradient(135deg,#3FD6FF,#2BB6FF,#A53CFF); 
  color:#fff; 
  border-color:#6AE6FF; 
  transform: translateY(-2px); 
  box-shadow:0 4px 12px rgba(0,242,254,0.3), 0 0 20px rgba(118,75,162,0.2);
  animation: electricSpark 2s ease-in-out infinite;
}

/* === COMMENTS PANEL === */
.comments-panel { background:linear-gradient(135deg, rgba(249,250,251,0.9), rgba(243,244,246,0.8)); backdrop-filter: blur(10px); border:2px dashed rgba(229,231,235,0.6); border-radius:16px; padding:1rem; margin-top:1rem; width:100%; transition:all .4s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; overflow:hidden; }
.comment-input { flex:1; background:white; border:2px solid #e5e7eb; border-radius:50px; padding:.75rem 1.25rem; font-size:.95rem; transition: all .3s ease; }
.comment-input:focus { outline:none; border-color:#FF4DFF; box-shadow:0 0 0 4px rgba(255,77,255,0.1); }
.comment-send { background:linear-gradient(135deg,#FF4DFF,#D845FF); color:white; border:none; border-radius:50px; padding:.75rem 1.5rem; font-weight:700; font-size:.9rem; cursor:pointer; transition:all .3s cubic-bezier(0.4,0,0.2,1); box-shadow:0 4px 12px rgba(255,77,255,0.3); }
.comment-send:hover { background:linear-gradient(135deg,#D845FF,#cc3575); transform: translateY(-2px); box-shadow:0 6px 16px rgba(255,77,255,0.4); }

.comments-list { display:flex; flex-direction:column; gap:1rem; margin-bottom:1rem; overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; max-height:280px; padding-right:.5rem; }
.comments-list::-webkit-scrollbar { width:6px; }
.comments-list::-webkit-scrollbar-track { background:rgba(229,231,235,0.3); border-radius:10px; }
.comments-list::-webkit-scrollbar-thumb { background:rgba(255,77,255,0.4); border-radius:10px; }
.comments-list::-webkit-scrollbar-thumb:hover { background:rgba(255,77,255,0.6); }

.comment-input-row { display:flex; gap:.75rem; align-items:center; flex-shrink:0; margin-top:auto; padding-top:.5rem; border-top:1px solid rgba(229,231,235,0.5); }

.comment-item { word-wrap:break-word; overflow-wrap:break-word; word-break:break-word; }
.comment-item > div { word-wrap:break-word; overflow-wrap:break-word; word-break:break-word; max-width:100%; }
.comment-item div[style*="font-size"] { word-wrap:break-word; overflow-wrap:break-word; word-break:break-word; max-width:100%; }

/* === HARD OVERRIDES TO ENSURE POST IMAGES RENDER === */
.post-card .post-body img,
.post-card img.post-image,
.post-card .post-body video,
.post-card video.post-video {
  display:block!important; visibility:visible!important; opacity:1!important; max-width:100%!important; height:auto!important; position:relative!important; z-index:10!important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .post-card { padding:1rem; border-radius:16px; margin-bottom:1rem; }
  .post-header { gap:10px; }
  .post-header .avatar { width:40px!important; height:40px!important; }
  .post-user-name { font-size:.95rem; }
  .post-meta-line { font-size:.75rem; }
  .post-text { font-size:.9rem; line-height:1.6; }
  .reactions-row { gap:.5rem; flex-wrap:wrap; }
  .rx-btn { padding:.5rem .75rem; font-size:.85rem; gap:.35rem; border-radius:30px; }
  .rx-btn span:first-child { font-size:1.1rem; }
  .comment-toggle { width:100%; margin-top:.5rem; padding:.65rem 1rem; font-size:.85rem; }
}

@media (max-width: 480px) {
  .post-card { padding:.85rem; margin-bottom:.85rem; }
  .post-header .avatar { width:36px!important; height:36px!important; }
  .post-user-name { font-size:.9rem; }
  .post-passion-tag { font-size:.65rem; padding:.25rem .6rem; }
  .post-time { font-size:.7rem; }
  .post-text { font-size:.875rem; }
  .post-body img, .post-body video, .post-image, .post-video { border-radius:12px; margin-top:.75rem; }
  .reactions-row { gap:.4rem; }
  .rx-btn { padding:.4rem .65rem; font-size:.8rem; gap:.3rem; }
  .rx-btn span:first-child { font-size:1rem; }
  .comment-toggle { padding:.6rem .85rem; font-size:.8rem; }
  .comment-input { font-size:.85rem; padding:.6rem .85rem; }
  .comment-send { font-size:.8rem; padding:.6rem .85rem; }
}

/* === TOUCH-FRIENDLY === */
@media (hover:none) and (pointer:coarse) {
  .rx-btn { min-width:48px; min-height:44px; padding:.55rem .85rem; }
  .comment-toggle { min-height:44px; }
  .comment-send { min-width:48px; min-height:44px; }
  .post-card:hover { transform:none; border-color:rgba(229,231,235,0.5); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
  .rx-btn:hover { transform:none; border-color:#e5e7eb; }
  .post-body img:hover, .post-body video:hover, .post-image:hover, .post-video:hover { transform:none; box-shadow:0 8px 24px rgba(0,0,0,0.1); }
}

/* === MOBILE IMAGE OPTIMIZATIONS === */
@media (max-width:768px) {
  .post-body img, .post-image { max-height:500px; object-fit:cover; }
  .post-body video, .post-video { max-height:400px; }
}

/* === PREFERS REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; }
}