/* -----------------------------------------
   TFH COMMUNITY FEED – 2025 GLASS EDITION
   Updated with:
   - Media polish
   - Active reactions
   - Friends & Family / social graph hooks
   - Safety & creator micro-UI
   - Subtle animations
   - Comment emoji reactions + creator answer visuals
   - Keyboard / focus states
   ----------------------------------------- */

:root {
    --bg:#020617;
    --bg-alt:#020617;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --accent:#38bdf8;
    --accent-2:#6366f1;
    --accent-soft:#0ea5e9;
    --danger:#f97316;
    --panel:#020617;
    --border:rgba(148,163,184,0.25);
    --radius:20px;
    --shadow-soft:0 24px 60px rgba(15,23,42,0.9);
    --shadow-subtle:0 14px 35px rgba(15,23,42,0.75);
    --glass:rgba(15,23,42,0.82);
    --glass-strong:rgba(15,23,42,0.96);

    /* New accents / effects */
    --accent-friends:#22c55e;
    --accent-family:#f97316;
    --glow-strong:0 0 26px rgba(56,189,248,.80);

    /* Focus */
    --focus-ring:0 0 0 1px rgba(148,163,184,.8),0 0 0 4px rgba(56,189,248,.45);
}

/* RESET/BASICS ---------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing:border-box;
}

html, body {
    height:100%;
}

body {
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 0% 0%,rgba(59,130,246,.50),transparent 55%),
        radial-gradient(circle at 100% 0%,rgba(45,212,191,.40),transparent 55%),
        radial-gradient(circle at 50% 100%,rgba(236,72,153,.28),transparent 55%),
        linear-gradient(160deg,#020617,#020617 50%,#020617);
    background-attachment:fixed;
}

a {
    color:var(--accent-soft);
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

/* Global focus for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:none;
    box-shadow:var(--focus-ring);
}

/* WRAPPER / HEADER ------------------------------------------------ */

.wrap {
    max-width:1120px;
    margin:0 auto;
    padding:24px 18px 40px;
}

header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
    position:relative;
}

header::after {
    content:"";
    position:absolute;
    inset:auto 0 -4px;
    height:1px;
    opacity:.4;
    background:linear-gradient(90deg,transparent,rgba(148,163,184,.3),transparent);
    pointer-events:none;
}

.logo {
    display:flex;
    align-items:center;
    gap:12px;
}

.logo-badge {
    width:44px;
    height:44px;
    border-radius:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:17px;
    color:#0b1120;
    background:
        radial-gradient(circle at 0% 0%,#f97316,transparent 55%),
        radial-gradient(circle at 100% 0%,#22d3ee,transparent 55%),
        linear-gradient(135deg,#0ea5e9,#6366f1);
    box-shadow:
        0 0 0 1px rgba(15,23,42,.8),
        0 18px 45px rgba(15,23,42,.95);
}

.logo-main {
    display:flex;
    flex-direction:column;
    gap:3px;
}

.logo-title {
    font-size:20px;
    font-weight:600;
    letter-spacing:.02em;
}

.logo-sub {
    font-size:13px;
    color:var(--muted);
}

/* BUTTONS --------------------------------------------------------- */

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:999px;
    padding:8px 14px;
    font-size:13px;
    border:1px solid rgba(148,163,184,.35);
    background:linear-gradient(135deg,rgba(15,23,42,.82),rgba(15,23,42,.96));
    color:var(--text);
    cursor:pointer;
    box-shadow:var(--shadow-subtle);
    backdrop-filter:blur(16px) saturate(130%);
    -webkit-backdrop-filter:blur(16px) saturate(130%);
    transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease,filter .15s ease;
}
.btn:hover {
    background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(15,23,42,1));
    border-color:rgba(148,163,184,.9);
    transform:translateY(-1px);
    box-shadow:0 18px 45px rgba(15,23,42,.98);
    filter:brightness(1.05);
}
.btn-primary {
    border-color:rgba(59,130,246,1);
    background:
        radial-gradient(circle at 0% 0%,rgba(248,250,252,.2),transparent 55%),
        linear-gradient(135deg,#0ea5e9,#6366f1);
}
.btn-primary:hover {
    border-color:#38bdf8;
    background:
        radial-gradient(circle at 0% 0%,rgba(248,250,252,.25),transparent 55%),
        linear-gradient(135deg,#38bdf8,#4f46e5);
}
.btn-small {
    padding:6px 11px;
    font-size:11px;
}

.btn-link {
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-size:11px;
    color:var(--accent-soft);
    cursor:pointer;
}
.btn-link-danger {
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-size:11px;
    color:var(--danger);
    cursor:pointer;
}

/* TOP TEXT + FILTERS ---------------------------------------------- */

.feed-toggle {
    font-size:13px;
    color:var(--muted);
    margin:12px 0 4px;
}

.page-title {
    font-size:23px;
    font-weight:650;
    margin:4px 0 2px;
    letter-spacing:.02em;
}

.page-sub {
    font-size:13px;
    color:var(--muted);
    margin:0 0 14px;
}

/* FEED TABS ------------------------------------------------------- */

.feed-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:12px;
}

.feed-tab {
    padding:7px 13px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.28);
    font-size:12px;
    color:var(--muted);
    background:radial-gradient(circle at 0% 0%,rgba(30,64,175,.45),transparent 55%),rgba(15,23,42,.78);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 10px 24px rgba(15,23,42,.8);
    transition:all .14s ease;
}
.feed-tab:hover {
    border-color:rgba(148,163,184,.7);
    color:#e5e7eb;
}
.feed-tab.active {
    background:
        radial-gradient(circle at 0% 0%,rgba(248,250,252,.3),transparent 55%),
        linear-gradient(135deg,#38bdf8,#6366f1);
    color:#020617;
    border-color:transparent;
    box-shadow:0 16px 40px rgba(15,23,42,1);
}

/* Optional secondary row (Friends, Family, Following etc.) */
.feed-tabs-secondary {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:-4px 0 12px;
    font-size:11px;
}

.feed-tab-pill {
    padding:4px 9px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.30);
    background:rgba(15,23,42,.88);
    color:var(--muted);
    cursor:pointer;
    transition:all .14s ease;
}
.feed-tab-pill:hover {
    border-color:rgba(148,163,184,.7);
    color:#e5e7eb;
}
.feed-tab-pill.is-active {
    background:radial-gradient(circle at 0% 0%,rgba(56,189,248,.30),transparent 55%),rgba(15,23,42,1);
    color:#e5e7eb;
    border-color:rgba(56,189,248,.9);
    box-shadow:0 14px 30px rgba(15,23,42,.95);
}
.feed-tab-pill--friends {
    border-color:rgba(34,197,94,.7);
}
.feed-tab-pill--family {
    border-color:rgba(249,115,22,.7);
}

/* LAYOUT SWITCHER ------------------------------------------------- */

.feed-style-bar {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 16px;
}

.feed-style-button {
    border-radius:999px;
    border:1px solid rgba(148,163,184,.3);
    padding:5px 12px;
    font-size:12px;
    background:radial-gradient(circle at 100% 0%,rgba(56,189,248,.35),transparent 50%),rgba(15,23,42,.78);
    color:var(--muted);
    cursor:pointer;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 26px rgba(15,23,42,.85);
    transition:all .14s ease;
}
.feed-style-button:hover {
    color:#e5e7eb;
    border-color:rgba(148,163,184,.7);
}
.feed-style-button.active {
    background:
        radial-gradient(circle at 0% 0%,rgba(248,250,252,.35),transparent 55%),
        linear-gradient(135deg,#38bdf8,#6366f1);
    color:#020617;
    border-color:transparent;
    box-shadow:0 18px 40px rgba(15,23,42,1);
}

/* MAIN CARD ------------------------------------------------------- */

.card {
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:
        linear-gradient(135deg,rgba(15,23,42,.92),rgba(15,23,42,.97));
    background-clip:padding-box;
    position:relative;
    padding:18px 18px 20px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    overflow:hidden;
}

.card::before {
    content:"";
    position:absolute;
    inset:-40%;
    background:
        radial-gradient(circle at 0% 0%,rgba(56,189,248,.25),transparent 60%),
        radial-gradient(circle at 100% 0%,rgba(129,140,248,.25),transparent 60%);
    opacity:.22;
    pointer-events:none;
}

/* STORIES --------------------------------------------------------- */

.stories {
    position:relative;
    z-index:1;
    display:flex;
    gap:10px;
    margin-bottom:14px;
    overflow-x:auto;
    padding-bottom:4px;
}

.story {
    text-align:center;
    font-size:11px;
    color:var(--muted);
    min-width:64px;
}

.story-avatar {
    width:44px;
    height:44px;
    border-radius:999px;
    border:2px solid rgba(56,189,248,.9);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:600;
    background:
        radial-gradient(circle at 0% 0%,#38bdf8,#0f172a);
    margin:0 auto 4px;
    position:relative;
    box-shadow:0 14px 30px rgba(15,23,42,.9);
}

.story-avatar .plus {
    position:absolute;
    bottom:-4px;
    right:-4px;
    width:18px;
    height:18px;
    border-radius:999px;
    background:#22c55e;
    color:#022c22;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #020617;
}

/* COMPOSER -------------------------------------------------------- */

.composer {
    position:relative;
    z-index:1;
    border-radius:18px;
    border:1px solid rgba(31,41,55,.9);
    background:radial-gradient(circle at 0% 0%,rgba(56,189,248,.20),transparent 60%),rgba(15,23,42,.9);
    padding:12px 12px 10px;
    margin-bottom:16px;
    box-shadow:0 16px 40px rgba(15,23,42,.95);
    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
}

.composer-main {
    display:flex;
    gap:11px;
}

.composer-avatar {
    width:38px;
    height:38px;
    border-radius:999px;
    background:
        radial-gradient(circle at 0% 0%,#22c55e,#14532d);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:600;
    color:#ecfdf5;
    box-shadow:0 12px 28px rgba(15,23,42,.95);
}

.composer-body {
    flex:1;
}

.composer-input {
    width:100%;
    border-radius:14px;
    border:1px solid rgba(31,41,55,1);
    background:rgba(15,23,42,.98);
    padding:9px 11px;
    font-size:13px;
    color:var(--text);
    min-height:64px;
    resize:vertical;
    box-shadow:inset 0 0 0 1px rgba(15,23,42,.8);
}
.composer-input::placeholder {
    color:rgba(148,163,184,.85);
}

.chips {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:7px 0 6px;
}

.chip {
    border-radius:999px;
    border:1px solid rgba(55,65,81,1);
    padding:4px 8px;
    font-size:11px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--muted);
    background:rgba(15,23,42,.98);
}
.chip-dot {
    width:8px;
    height:8px;
    border-radius:999px;
}
.chip-dot.green { background:#22c55e; }
.chip-dot.amber { background:#facc15; }
.chip-dot.red   { background:#f97316; }

.composer-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:8px;
    gap:10px;
}

.composer-filters {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.select-pill {
    border-radius:999px;
    border:1px solid rgba(55,65,81,1);
    background:rgba(15,23,42,.98);
    padding:5px 9px;
    font-size:11px;
    color:var(--text);
}

/* POSTS WRAPPER --------------------------------------------------- */

.posts {
    margin-top:8px;
}

/* POST BASE ------------------------------------------------------- */

@keyframes post-pop {
    from {
        opacity:0;
        transform:translateY(6px) scale(.99);
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* Small pulse for reactions (JS adds .tfh-react-pulse) */
@keyframes tfh-react-pulse-keyframes {
    0%   { transform:translateY(0) scale(1);   filter:brightness(1);   }
    50%  { transform:translateY(-1px) scale(1.09); filter:brightness(1.15); }
    100% { transform:translateY(0) scale(1);   filter:brightness(1);   }
}
.tfh-react-pulse {
    animation:tfh-react-pulse-keyframes .22s ease-out;
}

/* Each chunk wrapper (for load more / infinite scroll) */
.post-chunk {
    animation:post-pop .18s ease-out;
}

.post {
    position:relative;
    border-radius:18px;
    border:1px solid rgba(31,41,55,1);
    background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(15,23,42,.99));
    padding:14px 14px 10px;
    margin-bottom:14px;
    box-shadow:0 18px 45px rgba(15,23,42,.98);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    overflow:hidden;
    transition:transform .12s ease,box-shadow .14s ease,border-color .14s ease;
}
.post::before {
    content:"";
    position:absolute;
    inset:-40%;
    background:
        radial-gradient(circle at 0% 0%,rgba(56,189,248,.25),transparent 60%),
        radial-gradient(circle at 100% 0%,rgba(96,165,250,.20),transparent 60%);
    mix-blend-mode:soft-light;
    opacity:.16;
    pointer-events:none;
}
.post:hover {
    transform:translateY(-1px);
    border-color:rgba(148,163,184,.5);
    box-shadow:0 22px 60px rgba(15,23,42,1);
}

.post-header {
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:8px;
}

.post-meta {
    display:flex;
    gap:10px;
}

/* TFH feed avatar sizing – keep profile photos inside a circle */
.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e5e7eb;
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

/* Smaller avatar used in compact cards */
.post-avatar.small {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* Make sure actual profile images stay inside the circle */
.post-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
}

.post-name {
    font-size:14px;
    font-weight:600;
}
.post-tag {
    font-size:11px;
    color:var(--muted);
}
.post-badges {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-top:3px;
}

.badge {
    border-radius:999px;
    border:1px solid rgba(55,65,81,1);
    padding:2px 7px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.badge-pro {
    border-color:#a855f7;
    color:#e9d5ff;
}
.badge-kids {
    border-color:#22c55e;
    color:#bbf7d0;
}
.badge-18 {
    border-color:#f97316;
    color:#fed7aa;
}

/* New: relationship / social-graph badges */
.badge-friends {
    border-color:var(--accent-friends);
    color:#bbf7d0;
}
.badge-family {
    border-color:var(--accent-family);
    color:#fed7aa;
}

/* Optional badge for pinned creator answer banner on a post */
.badge-answer {
    border-color:#38bdf8;
    color:#bae6fd;
}

.post-time {
    font-size:11px;
    color:var(--muted);
}

/* POST BODY + MEDIA ----------------------------------------------- */

.post-body {
    position:relative;
    z-index:1;
    font-size:13px;
    color:var(--text);
    margin-bottom:8px;
}
.post-body p {
    margin:0 0 4px;
}

/* AI summary + topics (classic) */
.post-ai-summary {
    font-size:12px;
    color:var(--muted);
    background:rgba(15,23,42,.92);
    border-radius:10px;
    border:1px solid rgba(148,163,184,.35);
    padding:6px 9px;
    margin-bottom:6px;
}
.post-tags {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:6px;
}
.pill-topic {
    font-size:11px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(15,23,42,.88);
    border:1px solid rgba(56,189,248,.45);
}

/* AI mini summary (compact / tiktok) */
.ai-mini-summary {
    font-size:12px;
    color:var(--muted);
    margin-bottom:4px;
}

/* Shared topic pills (compact / tiktok) */
.compact-topics {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:4px;
}
.topic-pill {
    font-size:11px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(15,23,42,.92);
    border:1px solid rgba(148,163,184,.5);
}

/* Media gallery (classic) */
.media-gallery {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:6px 0;
}
.tfh-gallery-item {
    cursor:pointer;
}

/* Classic media container */
.media-image {
    border-radius:12px;
    max-width:100%;
    height:auto;
    display:block;
    margin:6px 0;
    box-shadow:0 18px 40px rgba(15,23,42,.95);
}
.media-image--rounded {
    border-radius:18px;
}
.media-video {
    width:100%;
    border-radius:12px;
    overflow:hidden;
    margin:6px 0;
    background:#000;
    box-shadow:0 18px 40px rgba(15,23,42,.98);
}
.media-video video {
    width:100%;
    height:auto;
    max-height:70vh;
    display:block;
    border-radius:12px;
}

/* Classic: keep media comfy size */
.post--classic .media-image,
.post--classic .media-video,
.post--classic .embed,
.post--classic .embed-card {
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
}
.post--classic .media-video video,
.post--classic .embed-youtube iframe {
    max-height:60vh;
}

/* Downloads / embeds */
.file-download {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    border:1px solid rgba(30,64,175,.7);
    background:radial-gradient(circle at 0% 0%,rgba(56,189,248,.15),transparent 55%),rgba(15,23,42,.96);
    margin:6px 0;
}

/* Link wrappers + trust badges */
.link-wrapper {
    margin:6px 0;
}
.trust-badge {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:2px 7px;
    border-radius:999px;
    margin-top:4px;
}
.trust-safe {
    border:1px solid rgba(34,197,94,.7);
    color:#bbf7d0;
    background:rgba(22,163,74,.16);
}
.trust-warn {
    border:1px solid rgba(234,179,8,.8);
    color:#fef9c3;
    background:rgba(202,138,4,.18);
}
.trust-danger {
    border:1px solid rgba(248,113,113,.9);
    color:#fecaca;
    background:rgba(127,29,29,.55);
}

.embed {
    margin:8px 0;
    border-radius:12px;
    overflow:hidden;
}
.embed-youtube iframe {
    width:100%;
    height:360px;
    border:0;
}
.embed-card {
    display:block;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(30,64,175,.7);
    background:radial-gradient(circle at 0% 0%,rgba(59,130,246,.15),transparent 55%),rgba(15,23,42,.96);
    margin:6px 0;
    box-shadow:0 16px 36px rgba(15,23,42,.96);
}
.embed-title {
    font-size:12px;
    font-weight:500;
    margin-bottom:2px;
    color:#e5e7eb;
}
.embed-url {
    font-size:11px;
    color:var(--muted);
    word-break:break-all;
}
.embed-tiktok {
    border-color:#ec4899;
}

/* FOOTER / REACTIONS / COMMENTS ---------------------------------- */

.post-footer {
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:11px;
    color:var(--muted);
    margin-bottom:6px;
    gap:8px;
}

.post-actions {
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}
.post-actions form {
    display:inline;
}

.reaction-btn {
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-size:11px;
    color:var(--muted);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:3px;
    transition:color .12s ease,transform .12s ease,text-shadow .12s ease;
}
.reaction-btn:hover {
    color:#f97316;
    transform:translateY(-1px);
}
.reaction-btn.is-active {
    color:#fb923c;
    text-shadow:0 0 10px rgba(249,115,22,.9);
}

/* Pill summary (kids-only / creator view) */
.reaction-summary-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
}

/* Vote chip style if you want up/down counts to pop a bit more */
.reaction-count-pill {
    border-radius:999px;
    border:1px solid rgba(31,41,55,1);
    padding:2px 7px;
    font-size:10px;
    background:rgba(15,23,42,.94);
    display:inline-flex;
    align-items:center;
    gap:4px;
}

/* Emoji bar ------------------------------------------------------- */

.emoji-bar {
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    font-size:13px;
    margin:4px 0 6px;
}
.emoji-btn {
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-size:13px;
    cursor:pointer;
    color:#e5e7eb;
    display:inline-flex;
    align-items:center;
    gap:2px;
    transition:transform .12s ease,filter .12s ease,text-shadow .12s ease;
}
.emoji-btn:hover {
    transform:translateY(-1px) scale(1.05);
    filter:drop-shadow(0 4px 6px rgba(15,23,42,.9));
}
.emoji-btn.is-active {
    text-shadow:var(--glow-strong);
    transform:translateY(-1px) scale(1.08);
}
.emoji-count {
    font-size:11px;
    color:var(--muted);
}

/* For per-comment emoji strip (slightly smaller) */
.comment-reactions .emoji-btn {
    font-size:12px;
}
.comment-reactions .emoji-count {
    font-size:10px;
}

/* Creator / safety micro-row (small text under actions) */
.creator-view {
    font-size:10px;
    color:rgba(148,163,184,.95);
    letter-spacing:.04em;
    text-transform:uppercase;
}

/* Creator insights (classic) */
.creator-insights {
    font-size:10px;
    color:var(--muted);
    margin:4px 0 2px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* Admin/creator actions row (classic) */
.post-actions-admin {
    font-size:11px;
    color:var(--muted);
    margin-top:2px;
    display:flex;
    gap:8px;
    align-items:center;
}

/* Boost hint under classic posts */
.boost-hint {
    margin-top:4px;
    font-size:11px;
    color:#fed7aa;
    background:rgba(248,250,252,.02);
    padding:4px 8px;
    border-radius:10px;
    border:1px dashed rgba(248,181,108,.7);
}

/* Kids-only highlight strip */
.post--kids-only {
    border-color:rgba(34,197,94,.9);
}
.post--kids-only::after {
    content:"Kids-only safety view";
    position:absolute;
    top:10px;
    right:12px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:3px 7px;
    border-radius:999px;
    background:rgba(22,163,74,.16);
    border:1px solid rgba(34,197,94,.6);
    color:#bbf7d0;
}

/* COMMENTS -------------------------------------------------------- */

.post-comments {
    position:relative;
    z-index:1;
    margin-top:4px;
    padding-top:7px;
    border-top:1px dashed rgba(30,64,175,.7);
}

/* Little header line: “Replies (3)” */
.post-comments-header {
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.9;
}

.post-comment {
    font-size:11px;
    color:var(--muted);
    margin-bottom:5px;
}
.post-comment strong {
    color:#e5e7eb;
}
.comment-meta {
    display:inline-flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
}

/* Body + inline edit states */
.comment-body {
    margin-top:1px;
}

/* Inline edit form styling (flex row) */
.comment-edit-form {
    display:flex;
    gap:6px;
    margin-top:4px;
}
.comment-edit-form .comment-input {
    flex:1;
}

.comment-form {
    margin-top:6px;
    display:flex;
    gap:6px;
}
.comment-input {
    flex:1;
    border-radius:999px;
    border:1px solid rgba(30,64,175,.7);
    background:rgba(15,23,42,.96);
    padding:5px 10px;
    font-size:11px;
    color:var(--text);
}
.comment-input::placeholder {
    color:rgba(148,163,184,.9);
}
.comment-btn {
    border-radius:999px;
    border:1px solid rgba(30,64,175,.7);
    background:radial-gradient(circle at 0% 0%,rgba(56,189,248,.20),transparent 55%),rgba(15,23,42,1);
    padding:5px 9px;
    font-size:11px;
    color:var(--text);
    cursor:pointer;
}

/* FLASH MESSAGES -------------------------------------------------- */

.flash {
    margin:0 0 10px;
    font-size:13px;
    border-radius:999px;
    padding:8px 14px;
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.flash-error {
    color:#fecaca;
    background:linear-gradient(135deg,rgba(127,29,29,.75),rgba(127,29,29,.92));
    border:1px solid rgba(248,113,113,.9);
}
.flash-success {
    color:#bbf7d0;
    background:linear-gradient(135deg,rgba(6,78,59,.75),rgba(6,95,70,.95));
    border:1px solid rgba(45,212,191,.9);
}

/* LAYOUT VARIANTS ------------------------------------------------- */

/* Immersive layout – media-first */
.post--tiktok {
    position:relative;
    border-radius:22px;
    overflow:hidden;
    padding:0 0 12px;
    background:linear-gradient(145deg,rgba(15,23,42,.98),rgba(15,23,42,1));
}

.post-tiktok-media {
    background:#000;
    max-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
.post-tiktok-media img,
.post-tiktok-media video {
    display:block;
    max-height:70vh;
    max-width:100%;
    width:auto;
    height:auto;
}

/* Optional sensitive state */
.post-tiktok-media--sensitive img,
.post-tiktok-media--sensitive video {
    filter:blur(16px) brightness(.6);
}
.post-tiktok-sensitive-label {
    position:absolute;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(15,23,42,.88);
    border:1px solid rgba(248,113,113,.9);
    color:#fecaca;
    box-shadow:0 10px 28px rgba(0,0,0,.75);
}

.post-tiktok-overlay {
    padding:12px 16px 12px;
}

.post-text--tiktok {
    font-size:14px;
    margin-top:10px;
}

.post-reactions--vertical {
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:flex-start;
    margin-top:10px;
}

/* Pinned creator reply teaser */
.pinned-reply-teaser {
    margin-top:8px;
    font-size:11px;
    color:var(--muted);
    display:flex;
    gap:6px;
    align-items:flex-start;
}
.pinned-icon {
    font-size:12px;
    margin-top:1px;
}
.pinned-text {
    line-height:1.4;
}
.pinned-cta {
    color:var(--accent-soft);
    cursor:pointer;
}

/* Compact layout – creator dashboard */
.post--compact {
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.post-compact-main {
    display:flex;
    gap:8px;
}

.post-text--compact {
    font-size:13px;
    line-height:1.45;
}

.badge-small {
    font-size:11px;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid var(--border);
    margin-left:4px;
}

.pill {
    font-size:11px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(15,23,42,.88);
    border:1px solid rgba(148,163,184,.45);
}

/* Compact media pill */
.compact-media-pill {
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
}
.compact-media-pill::before {
    content:"▸";
    font-size:10px;
    opacity:.9;
}
.compact-media-pill:hover {
    border-color:rgba(56,189,248,.85);
    background:radial-gradient(circle at 0% 0%,rgba(56,189,248,.22),transparent 55%),rgba(15,23,42,.98);
}

/* Compact micro stats + emoji bar */
.micro-stats {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
    font-size:11px;
    color:var(--muted);
}
.stat {
    display:inline-flex;
    align-items:center;
    gap:3px;
}

.compact-emoji-bar {
    margin-top:2px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.emoji-btn-small {
    font-size:11px;
    display:inline-flex;
    align-items:center;
    gap:3px;
    opacity:.9;
}
.emoji-count-small {
    font-size:10px;
    color:var(--muted);
}

/* Hint line under compact card */
.compact-switch-hint {
    font-size:10px;
    color:var(--muted);
}

/* Centered media modal */
.tfh-media-modal-backdrop {
    position:fixed;
    inset:0;
    background:radial-gradient(circle at 0% 0%,rgba(15,23,42,.6),transparent 55%),
               rgba(15,23,42,.92);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
}

.tfh-media-modal-backdrop.is-open {
    display:flex;
}

.tfh-media-modal {
    position:relative;
    max-width:min(900px, 92vw);
    max-height:80vh;
    border-radius:20px;
    border:1px solid rgba(148,163,184,.45);
    background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(15,23,42,1));
    box-shadow:0 24px 70px rgba(0,0,0,.9);
    padding:12px 12px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.tfh-media-modal-inner img,
.tfh-media-modal-inner video {
    max-width:100%;
    max-height:70vh;
    border-radius:14px;
    display:block;
    background:#000;
}

.tfh-media-modal-close {
    position:absolute;
    top:8px;
    right:10px;
    width:26px;
    height:26px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.65);
    background:rgba(15,23,42,.92);
    color:var(--text);
    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(15,23,42,.95);
}
.tfh-media-modal-close:hover {
    background:rgba(15,23,42,1);
}

/* RESPONSIVE ------------------------------------------------------ */

@media (max-width:700px){
    header {
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    header::after {
        display:none;
    }
    .composer-actions {
        flex-direction:column;
        align-items:flex-start;
    }
    .post-footer {
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }
}

/* ==========================================================================
   TFH NEXTGEN POLISH PACK (V1)
   - Better perceived performance (skeleton / shimmer)
   - Busy states for reactions.js
   - Toast styling hook (optional)
   - Reduced-motion + high-contrast affordances
   ========================================================================== */

:root { color-scheme: dark; }

::selection {
    background: rgba(56,189,248,.28);
    color: var(--text);
}

.reaction-btn.is-busy,
.emoji-btn.is-busy {
    opacity: .65;
    pointer-events: none;
    filter: saturate(.9);
}

.reaction-btn.is-busy {
    transform: none !important;
}

.tfh-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.35);
    background: rgba(15,23,42,.92);
    color: var(--text);
    font-size: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    z-index: 10000;
}

.tfh-toast--error {
    border-color: rgba(248,113,113,.9);
    background: rgba(127,29,29,.65);
}

.tfh-toast--info {
    border-color: rgba(56,189,248,.85);
}

.tfh-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(148,163,184,.08);
}

.tfh-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(248,250,252,.14), transparent);
    animation: tfh-shimmer 1.2s infinite;
}

@keyframes tfh-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Scrollbar polish (Chromium/WebKit) */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.25);
    border-radius: 999px;
    border: 2px solid rgba(2,6,23,.85);
}
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.40); }