/* ══════════════════════════════════════════════════
   Shared Post Card Styles (used by feed, profile, hashtag pages)
   ══════════════════════════════════════════════════ */

/* ── Glass Card ── */
.sf-card {
    position: relative;
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}
.sf-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.sf-card-inner {
    background: white;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dark .sf-card-inner {
    background: rgba(15,20,35,0.92);
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

/* ── Avatar ── */
.sf-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.sf-avatar-ring {
    padding: 2px;
    background: linear-gradient(135deg, #f59e0b, #d97706, #1a1a2e);
    border-radius: 50%;
    display: inline-flex;
}
.sf-avatar-ring > * { border: 2px solid white; border-radius: 50%; }
.dark .sf-avatar-ring > * { border-color: #0f1423; }

/* ── Facebook-style Action Buttons ── */
.sf-fb-action-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 4px; border-radius: 6px; font-size: 14px; font-weight: 600;
    color: #65676b; background: transparent; border: none; cursor: pointer; transition: all 0.15s;
}
.sf-fb-action-btn:hover { background: #f0f2f5; }
.dark .sf-fb-action-btn { color: #b0b3b8; }
.dark .sf-fb-action-btn:hover { background: rgba(255,255,255,0.05); }
.sf-fb-reaction-emoji { font-size: 18px; }

/* ── Reaction Popup (floating, appended to body) ── */
.sf-reaction-wrap { position: relative; }
.sf-reaction-popup {
    position: fixed;
    display: none; background: white; border-radius: 40px;
    padding: 8px 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
    white-space: nowrap; z-index: 9999;
    pointer-events: none;
}
.dark .sf-reaction-popup { background: #3a3b3c; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.sf-reaction-popup.sf-reaction-visible {
    display: flex;
    pointer-events: auto;
    animation: sf-pop-up 0.3s cubic-bezier(.17,.89,.32,1.28);
}
@keyframes sf-pop-up { from { opacity: 0; transform: scale(0.6) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.sf-reaction-btn {
    background: none; border: none; cursor: pointer;
    padding: 4px 5px; transition: transform 0.2s cubic-bezier(.17,.89,.32,1.28);
    display: flex; align-items: center; position: relative;
}
.sf-reaction-btn:hover { transform: scale(1.4) translateY(-8px); }
.sf-reaction-btn:hover::after {
    content: attr(title);
    font-size: 9px; font-weight: 700;
    color: white; background: rgba(0,0,0,0.8);
    padding: 2px 6px; border-radius: 10px;
    position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
    white-space: nowrap;
}
.sf-reaction-emoji-big { font-size: 32px; line-height: 1; }

/* ── Reaction mini display ── */
.sf-reaction-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; font-size: 13px; border-radius: 50%;
    background: white; border: 2px solid white;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1);
}
.dark .sf-reaction-mini { background: #242526; border-color: #242526; }

/* ── Post menu ── */
.sf-post-menu-btn {
    padding: 6px; border-radius: 50%; border: none; background: none;
    cursor: pointer; transition: background 0.2s;
}
.sf-post-menu-btn:hover { background: #f0f2f5; }
.dark .sf-post-menu-btn:hover { background: rgba(255,255,255,0.05); }
.sf-post-dropdown {
    position: absolute; right: 16px; top: 52px; background: white;
    border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    min-width: 200px; z-index: 30; overflow: hidden;
}
.dark .sf-post-dropdown { background: #3a3b3c; }
.sf-post-dropdown button {
    display: block; width: 100%; text-align: left;
    padding: 10px 16px; font-size: 14px; font-weight: 500;
    color: #050505; border: none; background: none; cursor: pointer; transition: background 0.15s;
}
.sf-post-dropdown button:hover { background: #f0f2f5; }
.dark .sf-post-dropdown button { color: #e4e6eb; }
.dark .sf-post-dropdown button:hover { background: rgba(255,255,255,0.05); }

/* ── Background Post in Feed ── */
.sf-post-bg-display {
    min-height: 280px; display: flex; align-items: center; justify-content: center;
    padding: 40px 32px; border-radius: 0;
}
.sf-post-bg-display .sf-post-bg-text {
    font-size: 24px; font-weight: 700; color: white;
    text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.25);
    line-height: 1.4; word-break: break-word;
}

/* ── Post Image - Full width ── */
.sf-post-img { overflow: hidden; cursor: pointer; }
.sf-post-img img { width: 100%; max-height: 600px; object-fit: cover; }

/* ── Image Collage ── */
.sf-collage { display: grid; gap: 2px; cursor: pointer; }
.sf-collage-1 { grid-template-columns: 1fr; }
.sf-collage-2 { grid-template-columns: 1fr 1fr; max-height: 400px; }
.sf-collage-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; max-height: 400px; }
.sf-collage-3 .sf-collage-item:first-child { grid-row: span 2; }
.sf-collage-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; max-height: 400px; }
.sf-collage-item { overflow: hidden; position: relative; }
.sf-collage-item img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; }
.sf-collage-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 32px; font-weight: 700;
}

/* ── Link Preview in Post Cards ── */
.sf-post-link-preview {
    border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08);
    overflow: hidden; cursor: pointer; transition: background 0.2s;
}
.sf-post-link-preview:hover { background: rgba(0,0,0,0.02); }
.dark .sf-post-link-preview { border-color: rgba(255,255,255,0.06); }
.sf-post-link-preview img { width: 100%; max-height: 300px; object-fit: cover; }
.sf-post-link-preview .sf-plp-info { padding: 12px 16px; }
.dark .sf-post-link-preview .sf-plp-info { background: rgba(0,0,0,0.15); }
.sf-lp-domain { font-size: 12px; color: #65676b; text-transform: uppercase; letter-spacing: 0.5px; }
.sf-lp-title { font-size: 16px; font-weight: 600; color: #050505; margin-top: 4px; line-height: 1.25; }
.dark .sf-lp-title { color: #e4e6eb; }
.sf-lp-desc { font-size: 14px; color: #65676b; margin-top: 4px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Poll ── */
.sf-poll-option {
    display: flex; align-items: center; position: relative; width: 100%;
    padding: 10px 14px; border: 1px solid #e4e6eb; border-radius: 8px;
    margin-top: 8px; cursor: pointer; background: white;
    transition: all 0.2s; overflow: hidden; text-align: left;
}
.sf-poll-option:first-child { margin-top: 0; }
.dark .sf-poll-option { border-color: #3a3b3c; background: #242526; }
.sf-poll-option:hover { border-color: #1877f2; }
.sf-poll-bar {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: rgba(24,119,242,0.1); transition: width 0.5s ease; border-radius: 8px;
}
.sf-poll-voted .sf-poll-bar { background: rgba(24,119,242,0.2); }
.sf-poll-text { position: relative; z-index: 1; flex: 1; font-size: 14px; font-weight: 500; color: #050505; }
.dark .sf-poll-text { color: #e4e6eb; }
.sf-poll-pct { position: relative; z-index: 1; font-size: 14px; font-weight: 700; color: #1877f2; margin-left: 8px; }
.sf-poll-voted { border-color: #1877f2; }

/* ── Comment Section ── */
.sf-comment-section { background: #f0f2f5; }
.dark .sf-comment-section { background: rgba(0,0,0,0.15); }

.sf-textarea {
    background: #f0f2f5; border: none; border-radius: 50px; transition: all 0.2s;
}
.sf-textarea:focus { background: white; box-shadow: 0 0 0 2px rgba(24,119,242,0.3); outline: none; }
.dark .sf-textarea { background: rgba(30,41,59,0.5); }
.dark .sf-textarea:focus { background: rgba(30,41,59,0.8); box-shadow: 0 0 0 2px rgba(24,119,242,0.2); }

.sf-send-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: #1877f2; border: none; color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.sf-send-btn:hover { background: #166fe5; }

/* ── Image Viewer ── */
.sf-image-viewer {
    position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 90;
    display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.sf-image-viewer img { max-width: 90%; max-height: 90vh; object-fit: contain; border-radius: 4px; }

.sf-fade-in { animation: sf-fade-in 0.4s ease forwards; opacity: 0; }
@keyframes sf-fade-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Badge ── */
.sf-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 100px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.3px; text-transform: uppercase;
}
.sf-badge-public { background: rgba(34,197,94,0.10); color: #16a34a; }
.dark .sf-badge-public { background: rgba(34,197,94,0.08); color: #4ade80; }
.sf-badge-followers { background: rgba(59,130,246,0.10); color: #2563eb; }
.dark .sf-badge-followers { background: rgba(59,130,246,0.08); color: #60a5fa; }
.sf-badge-private { background: rgba(100,116,139,0.10); color: #64748b; }
.dark .sf-badge-private { background: rgba(100,116,139,0.08); color: #94a3b8; }

/* ── Time ── */
.sf-time { font-size: 12px; color: #94a3b8; }

/* ── Action buttons (legacy compat) ── */
.sf-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
    color: #64748b; background: transparent;
    border: none; cursor: pointer; transition: all 0.2s;
}
.sf-action-btn:hover { background: rgba(0,0,0,0.04); color: #374151; }
.dark .sf-action-btn { color: #94a3b8; }
.dark .sf-action-btn:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.sf-action-btn.sf-liked { color: #ef4444; }
.sf-action-btn.sf-liked:hover { background: rgba(239,68,68,0.06); }