/* SocialApp global stylesheet */
:root {
    --primary: #1877f2;
    --primary-dark: #166fe5;
    --text: #1c1e21;
    --muted: #65676b;
    --border: #e4e6eb;
    --surface: #ffffff;
    --page: #f0f2f5;
    --success: #2e7d32;
}

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

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page);
    color: var(--text);
    font-family: "Noto Sans Georgian", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.5;
}

img,
video {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

main {
    width: 100%;
    min-height: calc(100vh - 60px);
    padding: 1px 16px 40px;
}

/* Header / navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.nav-container {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo {
    flex: 0 0 auto;
}

.logo a {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
}

.main-nav {
    min-width: 0;
}

.nav-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.nav-list > li {
    position: relative;
}

.nav-list > li > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 7px 10px;
    color: #3b3d40;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.nav-list > li > a:not(.btn):hover {
    color: var(--primary);
    background: #f0f2f5;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    transition: background .15s ease, transform .05s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--primary);
    color: #fff !important;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

/* Messenger dropdown */
.messenger-nav-item {
    position: relative;
}

.messenger-dropdown {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    right: 0 !important;
    width: min(340px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.15);
    flex-direction: column;
    z-index: 1100;
    overflow: hidden;
}

.messenger-dropdown input {
    max-width: 150px;
}

/* Forms */
.form-control {
    width: 100%;
    min-height: 42px;
    margin: 0 0 15px;
    padding: 10px 12px;
    border: 1px solid #ccd0d5;
    border-radius: 7px;
    outline: none;
    background: #fff;
    color: var(--text);
    font-size: 14px;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(24,119,242,.12);
}

label {
    display: block;
    margin: 0 0 6px;
    color: #444;
    font-size: 13px;
    font-weight: 600;
}

/* Generic page layouts */
.page-container {
    width: 100%;
    margin: 20px auto;
}

.feed-container,
.profile-page {
    max-width: 600px;
}

.friends-page {
    max-width: 800px;
}

.friends-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 15px !important;
}

.friend-card {
    min-width: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}

.friend-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
}

.auth-card {
    width: min(400px, 100%);
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.09);
}

.auth-card h2 {
    color: var(--text);
}

/* Chat page (the full chat screen, not floating messenger) */
.chat-page-container {
    display: flex !important;
    width: 100% !important;
    max-width: 950px !important;
    height: 550px !important;
    margin: 20px auto !important;
    gap: 0 !important;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    overflow: hidden;
}

.chat-page-container > div:first-child {
    width: 30% !important;
    min-width: 220px;
    flex: 0 0 30%;
}

.chat-page-container > div:last-child {
    width: 70% !important;
    min-width: 0;
    flex: 1 1 auto;
}

.chat-page-container textarea {
    min-width: 0;
}

.chat-page-container img,
.chat-page-container video {
    max-width: 100%;
}

/* Better scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #c7c9cc transparent;
}

@media (max-width: 760px) {
    main {
        padding: 1px 10px 28px;
    }

    .container {
        padding: 0 10px;
    }

    .nav-container {
        min-height: 56px;
        padding-top: 7px;
        padding-bottom: 7px;
        align-items: center;
        flex-wrap: nowrap;
        gap: 7px;
    }

    .logo a {
        font-size: 19px;
    }

    .nav-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 3px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .nav-list::-webkit-scrollbar { display:none; }
    .main-nav { flex: 0 0 auto; min-width: 0; }
    .global-user-search { width: min(170px, 34vw); margin-left: auto; margin-right: 0; flex: 0 1 170px; }

    .nav-list > li > a:not(.btn) {
        min-height: 34px;
        padding: 6px 7px;
        font-size: 12px;
    }

    .nav-list .btn {
        min-height: 34px;
        padding: 6px 9px !important;
        font-size: 12px !important;
    }

    .messenger-dropdown {
        right: -4px !important;
        width: min(340px, calc(100vw - 20px)) !important;
    }

    .messenger-dropdown > div:first-child {
        gap: 7px;
        padding: 10px !important;
    }

    .messenger-dropdown input {
        width: 120px !important;
        max-width: 120px;
    }

    .page-container {
        margin: 12px auto;
    }

    .feed-container,
    .profile-page,
    .friends-page {
        max-width: 100%;
    }

    .friends-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .friend-card {
        padding: 15px !important;
    }

    .auth-card {
        margin: 20px auto;
        padding: 20px 16px;
    }

    .chat-page-container {
        height: calc(100vh - 115px) !important;
        min-height: 480px;
        margin: 10px auto !important;
        border-radius: 8px;
    }

    .chat-page-container > div:first-child {
        min-width: 0;
        flex-basis: 36%;
    }

    .chat-page-container > div:last-child {
        flex-basis: 64%;
    }

    .chat-page-container > div:first-child a {
        padding: 10px !important;
    }

    .chat-page-container > div:first-child a span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 520px) {
    .nav-container {
        gap: 5px;
    }
    .global-user-search { width: min(135px, 31vw); flex-basis: 135px; }

    .main-nav {
        flex: 1;
    }

    .nav-list > li > a:not(.btn) {
        font-size: 11px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .nav-list {
        gap: 1px;
    }

    .friends-grid {
        grid-template-columns: 1fr !important;
    }

    .friend-card {
        padding: 18px !important;
    }

    .chat-page-container {
        height: calc(100vh - 105px) !important;
        min-height: 0;
        margin: 6px -4px !important;
        width: calc(100% + 8px) !important;
        border-radius: 0;
    }

    .chat-page-container > div:first-child {
        flex-basis: 34%;
    }

    .chat-page-container > div:last-child {
        flex-basis: 66%;
    }

    .chat-page-container > div:last-child > div:last-child {
        padding: 7px !important;
        gap: 5px !important;
    }

    .chat-page-container textarea {
        font-size: 13px !important;
        padding: 7px 10px !important;
    }

    .chat-page-container button {
        flex-shrink: 0;
    }

    .messenger-dropdown {
        right: -8px !important;
    }
}

@media (max-width: 380px) {
    .logo {
        display: none;
    }

    .nav-container {
        justify-content: center;
    }

    .nav-list {
        justify-content: center;
    }

    .chat-page-container > div:first-child {
        flex-basis: 40%;
    }

    .chat-page-container > div:last-child {
        flex-basis: 60%;
    }
}

/* Friends / social feed */
.friends-page { max-width: 980px; }
.friends-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:20px 0; padding:24px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.friends-hero h2 { margin:0 0 5px; font-size:28px; }
.friends-hero p, .section-heading p { margin:0; color:var(--muted); font-size:14px; }
.friends-count { min-width:90px; padding:12px 16px; border-radius:12px; background:#f0f6ff; text-align:center; color:var(--primary); }
.friends-count strong { display:block; font-size:24px; line-height:1; }
.friends-count span { font-size:12px; }
.social-section { margin:0 0 18px; padding:20px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.section-heading h3 { margin:0; font-size:19px; }
.section-badge { min-width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; border-radius:20px; background:#e8f1ff; color:var(--primary); font-weight:700; font-size:12px; }
.avatar-circle { width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; border-radius:50%; background:#e4e6eb; color:#4b4f56; font-size:23px; font-weight:700; }
.small-avatar { width:44px; height:44px; flex:0 0 44px; margin:0; font-size:18px; }
.friend-card { min-width:0; padding:20px; background:#fff; border:1px solid var(--border); border-radius:12px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.friend-card h4 { margin:0 0 7px; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.relation-label { display:inline-block; margin-bottom:12px; font-size:12px; font-weight:700; }
.accepted-label { color:var(--success); }
.pending-label { color:#b36b00; }
.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.card-actions form:first-child, .card-actions > .btn:first-child { grid-column:1 / -1; }
.card-actions .btn { width:100%; min-width:0; padding:8px 7px; font-size:12px; }
.btn-light { background:#f0f2f5; color:#333 !important; border:1px solid #d7d9dc; }
.btn-danger { background:#fff0f0; color:#c62828 !important; border:1px solid #ffcdd2; }
.full-btn { width:100%; }
.empty-state, .search-hint { padding:25px; text-align:center; color:var(--muted); background:#f8f9fa; border-radius:10px; }
.friend-search { display:flex; gap:10px; margin-bottom:15px; }
.friend-search input { flex:1; min-width:0; min-height:42px; border:1px solid #ccd0d5; border-radius:8px; padding:10px 12px; outline:none; }
.friend-search input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(24,119,242,.12); }
.search-result-title { margin:10px 0 14px; color:#555; font-size:14px; }
.outgoing-list { display:grid; gap:8px; }
.outgoing-item { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:8px; background:#f7f8fa; font-size:14px; }
.outgoing-item small { color:var(--muted); }

.composer-card, .post-card { background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.composer-card { padding:18px; margin-bottom:20px; }
.composer-title { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.composer-title h3 { margin:0 0 2px; font-size:17px; }
.composer-title span { color:var(--muted); font-size:12px; }
.post-textarea { min-height:90px; margin-bottom:10px; resize:vertical; }
.composer-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.media-picker { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:7px 12px; border:1px solid #d6d9dd; border-radius:8px; background:#f7f8fa; color:#333; cursor:pointer; font-size:13px; }
.media-picker input { display:none; }
.media-help { flex:1; color:var(--muted); font-size:12px; }
.post-media-preview { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.preview-chip { display:flex; align-items:center; gap:7px; max-width:100%; padding:7px 9px; background:#f0f2f5; border-radius:8px; font-size:12px; }
.preview-chip span:nth-child(2) { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-chip small { color:var(--muted); }
.feed-heading { display:flex; justify-content:space-between; align-items:center; margin:0 0 12px; }
.feed-heading h2 { margin:0; font-size:20px; }
.feed-heading span { color:var(--muted); font-size:12px; }
.post-feed { display:flex; flex-direction:column; gap:15px; }
.post-card { overflow:hidden; }
.post-header { display:flex; align-items:center; gap:10px; padding:16px 18px 10px; }
.post-header .avatar-circle { width:42px; height:42px; flex:0 0 42px; margin:0; font-size:16px; background:#1877f2; color:#fff; }
.post-header strong { display:block; font-size:14px; }
.post-header time, .comment-bubble time { display:block; margin-top:2px; color:var(--muted); font-size:10px; }
.post-content { padding:5px 18px 15px; font-size:14px; line-height:1.6; word-break:break-word; }
.post-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; background:#eee; max-height:500px; overflow:hidden; }
.gallery-count-1 { grid-template-columns:1fr; }
.gallery-tile { position:relative; padding:0; border:0; min-width:0; min-height:180px; overflow:hidden; background:#111; cursor:pointer; }
.gallery-tile img, .gallery-tile video { display:block; width:100%; height:100%; min-height:180px; max-height:500px; object-fit:cover; }
.gallery-count-1 .gallery-tile img, .gallery-count-1 .gallery-tile video { max-height:520px; object-fit:contain; background:#111; }
.video-overlay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:22px; pointer-events:none; }
.post-actions { display:flex; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:2px 8px; }
.post-actions form { flex:1; }
.post-action { width:100%; min-height:40px; border:0; background:transparent; color:#65676b; font-weight:600; cursor:pointer; border-radius:7px; }
.post-action:hover { background:#f0f2f5; }
.post-action.liked { color:#1877f2; }
.comments-area { padding:10px 14px 14px; }
.comment-item { display:flex; align-items:flex-start; gap:8px; margin-bottom:9px; }
.comment-avatar { width:30px; height:30px; flex:0 0 30px; margin:0; font-size:12px; }
.comment-bubble { max-width:calc(100% - 38px); padding:7px 10px; border-radius:12px; background:#f0f2f5; }
.comment-bubble strong { font-size:12px; }
.comment-bubble p { margin:2px 0 0; font-size:12px; word-break:break-word; }
.comment-form { display:flex; gap:7px; margin-top:10px; }
.comment-form input { flex:1; min-width:0; border:1px solid #ccd0d5; border-radius:18px; padding:8px 12px; outline:none; }
.comment-form .btn { min-height:34px; padding:7px 12px; }
.post-lightbox { display:none; position:fixed; inset:0; z-index:20000; background:rgba(8,10,14,.96); align-items:center; justify-content:center; padding:34px 64px; }
.post-lightbox.open { display:flex; }
body.lightbox-open { overflow:hidden; }
.lightbox-shell { width:min(1240px,96vw); height:min(88vh,860px); display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr); gap:0; background:#111; border-radius:14px; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.45); }
.lightbox-media-column { min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; background:#080808; }
.lightbox-media-stage { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; padding:24px; }
.lightbox-media-stage img, .lightbox-media-stage video { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:#000; border-radius:4px; }
.lightbox-media-stage video { display:none; }
#lightboxCounter { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); color:#fff; background:rgba(0,0,0,.55); padding:4px 9px; border-radius:12px; font-size:12px; }
.lightbox-post-panel { min-width:0; min-height:0; overflow-y:auto; background:#fff; color:var(--text); -webkit-overflow-scrolling:touch; }
.lightbox-post-panel .post-card { border:0; border-radius:0; box-shadow:none; overflow:visible; contain:none; }
.lightbox-post-panel .post-header { position:static!important; }
.lightbox-post-panel .comments-list { max-height:300px; }
.lightbox-panel-loading { min-height:220px; display:flex; align-items:center; justify-content:center; color:#777; font-size:14px; padding:25px; text-align:center; }
.lightbox-external-actions { display:flex; gap:7px; padding:10px 12px; border-bottom:1px solid #eee; background:#fff; position:sticky; top:0; z-index:5; }
.lightbox-external-actions button { flex:1; min-height:36px; border:1px solid #dfe3e8; background:#f7f8fa; border-radius:8px; color:#344054; cursor:pointer; font-weight:700; font-size:12px; }
.lightbox-external-actions button:hover { background:#eef3f9; }
.lightbox-close, .lightbox-prev, .lightbox-next { position:fixed; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; z-index:20002; }
.lightbox-close { top:12px; right:14px; width:42px; height:42px; border-radius:50%; font-size:30px; }
.lightbox-prev, .lightbox-next { top:50%; transform:translateY(-50%); width:48px; height:64px; font-size:45px; line-height:1; border-radius:8px; }
.lightbox-prev { left:10px; } .lightbox-next { right:10px; }
.external-share-menu { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(420px,calc(100vw - 28px)); background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35); z-index:20010; overflow:hidden; color:#1c1e21; }
.external-share-menu[hidden] { display:none; }
.external-share-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee; }
.external-share-head button { border:0; background:#f0f2f5; border-radius:50%; width:30px; height:30px; font-size:20px; cursor:pointer; }
.external-share-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; }
.external-share-grid button { min-height:50px; border:1px solid #e4e6eb; background:#fff; border-radius:10px; cursor:pointer; font-weight:700; display:flex; align-items:center; gap:8px; padding:8px 10px; }
.external-share-grid button:hover { background:#f5f7fa; }
.external-share-grid button span { font-size:12px; }
.lightbox-share-toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:20020; background:rgba(20,24,30,.94); color:#fff; padding:9px 14px; border-radius:18px; font-size:13px; transition:opacity .18s ease,transform .18s ease; }
.lightbox-share-toast.show { opacity:1; transform:translate(-50%,0); }
.notif-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:4px; padding:0 5px; border-radius:20px; background:#e53935; color:#fff; font-size:10px; font-weight:800; line-height:1; }

@media (max-width:760px) {
    .friends-hero { padding:18px; }
    .friends-hero h2 { font-size:23px; }
    .social-section { padding:15px; }
    .card-actions { grid-template-columns:1fr 1fr; }
    .composer-card { padding:14px; }
    .media-help { width:100%; order:3; }
    .post-gallery { max-height:380px; }
    .gallery-tile, .gallery-tile img, .gallery-tile video { min-height:140px; }
    .post-lightbox { padding:0; align-items:stretch; }
    .lightbox-shell { width:100vw; height:100vh; border-radius:0; display:flex; flex-direction:column; }
    .lightbox-media-column { flex:0 0 52vh; min-height:260px; }
    .lightbox-media-stage { padding:48px 34px 18px; }
    .lightbox-post-panel { flex:1 1 auto; min-height:0; }
    .lightbox-post-panel .comments-list { max-height:190px; }
    .lightbox-prev,.lightbox-next { top:26vh; width:38px; height:52px; font-size:38px; }
    .lightbox-prev { left:4px; } .lightbox-next { right:4px; }
    .lightbox-close { top:8px; right:8px; }
    .lightbox-external-actions { position:sticky; top:0; }
}
@media (max-width:520px) {
    .friends-hero { align-items:flex-start; }
    .friends-count { min-width:70px; padding:10px; }
    .friends-count strong { font-size:20px; }
    .friend-search { flex-direction:column; }
    .friend-search .btn { width:100%; }
    .card-actions { grid-template-columns:1fr; }
    .card-actions form:first-child, .card-actions > .btn:first-child { grid-column:auto; }
    .composer-toolbar { align-items:stretch; }
    .media-picker, .composer-toolbar > .btn { flex:1; justify-content:center; }
    .post-actions { padding:1px 3px; }
    .post-action { font-size:12px; }
    .post-gallery { max-height:300px; }
    .gallery-tile, .gallery-tile img, .gallery-tile video { min-height:120px; }
    .gallery-count-1 .gallery-tile img, .gallery-count-1 .gallery-tile video { min-height:220px; }
    .comment-form { align-items:center; }
    .comment-form .btn { padding-left:9px; padding-right:9px; }
}

/* Global people search + notification badges */
.friends-nav-item > a { position: relative; }
.notif-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:999px; background:#e53935; color:#fff; font-size:10px; font-weight:700; line-height:1; vertical-align:middle; box-sizing:border-box; }
.nav-unread { animation: navBadgePulse 1.5s infinite; }
/* v96: the same unread pulse must be visible on the fixed mobile bottom nav. */
.mobile-nav-unread { animation: mobileNavUnreadPulse 1s infinite; }
@keyframes navBadgePulse { 0%,100%{filter:none;} 50%{filter:drop-shadow(0 0 4px rgba(229,57,53,.55));} }
@keyframes mobileNavUnreadPulse { 0%,100%{filter:none;transform:translateZ(0);} 50%{filter:drop-shadow(0 0 6px rgba(229,57,53,.85));} }
.global-user-search { position:relative; width:min(280px, 28vw); margin-left:auto; margin-right:10px; z-index:10020; }
.global-search-form { display:flex; align-items:center; background:#fff; border:1px solid #d8dce2; border-radius:999px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.global-search-form input { width:100%; min-width:0; border:0; outline:0; padding:9px 12px; background:transparent; color:#222; font-size:13px; }
.global-search-form button { width:38px; height:36px; border:0; background:transparent; color:#68707a; cursor:pointer; font-size:20px; }
.global-search-results { position:absolute; top:calc(100% + 7px); left:0; right:0; background:#fff; border:1px solid #e1e4e8; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.14); overflow:hidden; }
.global-search-item { display:flex; align-items:center; gap:10px; padding:10px 12px; text-decoration:none; color:#222; border-bottom:1px solid #f1f2f4; }
.global-search-item:last-child { border-bottom:0; }
.global-search-item:hover { background:#f6f8fb; }
.global-search-avatar { width:36px; height:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#e9edf3; color:#58606a; font-weight:700; }
.global-search-name { display:flex; min-width:0; flex-direction:column; gap:2px; font-size:13px; }
.search-relation { font-size:11px; color:#737b85; }
.search-relation.accepted { color:#2e7d32; }
.search-relation.pending { color:#b26a00; }
.global-search-empty { padding:14px; text-align:center; color:#737b85; font-size:13px; }

/* Post composer rich editor + upload progress */
.post-editor-wrap { border:1px solid var(--border,#ddd); border-radius:12px; overflow:hidden; background:#fff; }
.post-editor-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:7px; background:#f7f8fa; border-bottom:1px solid var(--border,#ddd); }
.editor-tool { min-width:32px; height:30px; border:1px solid transparent; background:#fff; border-radius:7px; cursor:pointer; font-weight:600; color:#343a40; }
.editor-tool:hover { border-color:#ccd2d8; background:#eef2f6; }
.post-rich-editor { min-height:115px; padding:12px; outline:0; font-size:15px; line-height:1.5; }
.post-rich-editor:empty:before { content:attr(data-placeholder); color:#8a929b; pointer-events:none; }
.post-upload-status { display:none; margin-top:10px; padding:10px 12px; border:1px solid #e3e7eb; border-radius:10px; background:#f8fafc; }
.post-upload-status.active { display:block; }
.post-upload-status-head { display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:6px; }
.post-progress-track { height:7px; border-radius:99px; background:#e5e8ec; overflow:hidden; }
.post-progress-bar { width:0%; height:100%; background:#1683ff; transition:width .15s ease; }
.post-progress-meta { margin-top:5px; font-size:11px; color:#69727d; }
.post-edit-box { display:none; margin:10px 0; padding:10px; border:1px solid #dce1e6; border-radius:10px; background:#fafbfc; }
.post-edit-box.open { display:block; }
.post-edit-actions { display:flex; gap:7px; margin-top:8px; }
.post-manage { display:flex; align-items:center; gap:5px; margin-left:auto; }
.post-manage button { border:0; background:transparent; color:#68707a; cursor:pointer; font-size:12px; padding:4px 6px; border-radius:6px; }
.post-manage button:hover { background:#f0f2f5; }
.post-manage .danger:hover { background:#fff0f0; color:#c62828; }

@media (max-width: 900px) {
  .global-user-search { width:220px; }
}
@media (max-width: 760px) {
  .global-user-search { order:3; width:100%; margin:5px 0 0; }
  .nav-container { flex-wrap:wrap; }
  .main-nav { order:2; width:100%; }
  .global-search-results { max-height:55vh; overflow:auto; }
}
@media (max-width: 520px) {
  .global-search-form input { font-size:12px; padding:8px 10px; }
  .global-search-form button { height:34px; }
  .post-editor-toolbar { gap:3px; }
  .editor-tool { min-width:30px; height:29px; }
  .post-rich-editor { min-height:100px; }
}
.new-posts-notice{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:9998;border:0;border-radius:20px;padding:10px 18px;background:#1877f2;color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.2);cursor:pointer;font-weight:700}.reaction-wrap{position:relative;display:inline-flex}.reaction-picker{display:none;position:absolute;bottom:40px;left:0;background:#fff;border:1px solid #ddd;border-radius:22px;padding:5px;box-shadow:0 5px 18px rgba(0,0,0,.15);gap:3px;z-index:20}.reaction-picker button{border:0;background:none;font-size:22px;cursor:pointer;padding:3px}.comment-actions{display:flex;gap:8px;margin-top:5px}.comment-actions button{border:0;background:none;color:#666;font-size:12px;cursor:pointer;padding:0}.comment-reply{margin-left:38px}.post-action.reacted{font-weight:700;color:#1877f2}

.comment-reaction-wrap{position:relative}.comment-reaction-picker{display:none;position:absolute;bottom:22px;left:0;background:#fff;border:1px solid #ddd;border-radius:18px;padding:4px;box-shadow:0 4px 15px rgba(0,0,0,.15);white-space:nowrap}.comment-reaction-picker button{font-size:18px!important;margin:0 1px!important}

/* Icons-only navigation: labels remain available through title/ARIA. */
.icon-nav-link { position:relative; width:42px; min-width:42px; padding:7px 8px !important; justify-content:center; }
.icon-nav-link .nav-icon { display:inline-flex; align-items:center; justify-content:center; font-size:20px; line-height:1; }
.icon-nav-link:hover .nav-icon { transform:translateY(-1px); }
.nav-list .icon-nav-link .notif-badge { position:absolute; top:-2px; right:-2px; margin:0; }
@media (max-width:760px){
  .nav-list { gap:4px; }
  .icon-nav-link { width:38px; min-width:38px; min-height:36px !important; padding:5px !important; }
  .icon-nav-link .nav-icon { font-size:18px; }
  .logo a { font-size:18px; }
}
@media (max-width:430px){
  .nav-container { gap:7px; }
  .nav-list { justify-content:flex-start; width:100%; overflow-x:auto; scrollbar-width:none; }
  .nav-list::-webkit-scrollbar { display:none; }
  .nav-list > li { flex:0 0 auto; }
  .global-user-search { margin-top:4px; }
  .global-search-form { width:100%; }
}

/* Mobile-safe navigation dropdowns: keep them inside the viewport and above the sticky header. */
@media (max-width: 760px) {
  .site-header { z-index: 20000; }
  .main-nav { position: relative; z-index: 20001; }
  .messenger-nav-item, .notifications-nav-item { position: static; }
  .messenger-dropdown, .notifications-dropdown {
    position: fixed !important;
    top: 64px !important;
    right: 10px !important;
    left: auto !important;
    width: min(380px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 82px);
    overflow: hidden;
    z-index: 30000 !important;
  }
  .messenger-dropdown > div:last-child,
  #notificationsList { max-height: calc(100vh - 150px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 430px) {
  .messenger-dropdown, .notifications-dropdown { top: 60px !important; right: 8px !important; width: calc(100vw - 16px) !important; }
  .messenger-dropdown > div:first-child { flex-wrap: wrap; }
  .messenger-dropdown input { width: 100% !important; max-width: none !important; }
}


/* ---------- Profile / presence / gallery ---------- */
.header-avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:#e4e6eb;font-size:15px}
.header-avatar img{width:100%;height:100%;object-fit:cover}
.profile-modern{max-width:900px}
.profile-hero{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);margin:20px 0}
.profile-cover{height:120px;background:linear-gradient(135deg,#1877f2,#6aa9ff)}
.profile-main{display:flex;align-items:center;gap:18px;padding:0 24px 24px;margin-top:-42px;position:relative}
.profile-avatar-wrap{position:relative;flex:0 0 auto}
.profile-avatar{width:96px;height:96px;border-radius:50%;border:4px solid #fff;object-fit:cover;background:#e4e6eb}
.profile-avatar-fallback{display:flex;align-items:center;justify-content:center;color:#fff;background:#1877f2;font-size:34px;font-weight:700}
.presence-dot{position:absolute;right:5px;bottom:7px;width:18px;height:18px;border-radius:50%;border:3px solid #fff;background:#9e9e9e}
.presence-dot.online{background:#2eaf4a}.presence-dot.offline{background:#e53935}
.profile-identity{min-width:0;flex:1}.profile-identity h1{margin:45px 0 2px;font-size:25px}.profile-identity p{margin:5px 0;color:var(--muted)}
.online-label{font-size:12px;font-weight:700}.is-online{color:#2eaf4a}.is-offline{color:#e53935}
.profile-bio{margin-top:8px;white-space:normal;color:#444}
.profile-stats{min-width:70px;text-align:center;color:var(--muted)}.profile-stats strong{display:block;font-size:25px;color:var(--text)}
.profile-settings-grid{display:grid;grid-template-columns:220px 1fr;gap:24px}
.avatar-actions{display:grid;gap:9px}.avatar-actions form{display:grid;gap:7px}.avatar-actions input{max-width:100%;font-size:12px}
.profile-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}.form-grid .full{grid-column:1/-1}.profile-form textarea{resize:vertical}
.gallery-upload-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center}.gallery-upload-form .form-control{margin:0}
.user-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.user-gallery-item{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;min-width:0}.user-gallery-item>img,.user-gallery-item>video{width:100%;height:220px;object-fit:cover;display:block;background:#111}.user-gallery-item h4{font-size:13px;margin:10px 12px}
.gallery-actions{display:flex;align-items:center;gap:12px;padding:8px 12px;border-top:1px solid #eee}.gallery-actions button{border:0;background:none;cursor:pointer}.gallery-like-btn.active{color:#e53935}.gallery-delete{margin-left:auto;color:#c62828}
.gallery-comment-form{display:flex;gap:6px;padding:9px 12px;border-top:1px solid #eee}.gallery-comment-form input{min-width:0;flex:1;border:1px solid #ccd0d5;border-radius:8px;padding:7px}.gallery-comment-form button{border:0;background:#1877f2;color:#fff;border-radius:7px;padding:7px 10px}
.profile-post{padding:15px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;background:#fff}.profile-post time{display:block;color:var(--muted);font-size:11px;margin-bottom:7px}.profile-post img{max-height:350px;max-width:100%;border-radius:8px}
@media(max-width:700px){.profile-main{padding:0 14px 18px;gap:12px}.profile-avatar{width:76px;height:76px}.profile-identity h1{margin-top:35px;font-size:20px}.profile-settings-grid{grid-template-columns:1fr}.profile-form .form-grid{grid-template-columns:1fr}.gallery-upload-form{grid-template-columns:1fr}.user-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.user-gallery-item>img,.user-gallery-item>video{height:170px}}
@media(max-width:430px){.profile-main{align-items:flex-start}.profile-stats{display:none}.user-gallery{grid-template-columns:1fr}.user-gallery-item>img,.user-gallery-item>video{height:240px}}
/* Presence dots in social cards */
.presence-inline{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:4px;vertical-align:middle}.presence-inline.online{background:#2eaf4a}.presence-inline.offline{background:#e53935}

/* Social reaction/avatar/presence polish */
.avatar-image { object-fit: cover; display: block; }
.post-reaction-summary, .comment-reaction-summary { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px; font-size:13px; color:#667085; }
.post-reaction-summary span, .comment-reaction-summary span { white-space:nowrap; }
.comment-reaction-summary { margin:3px 0 2px; }
.comment-reply { margin-left: 34px; }
@media (max-width:700px){ .comment-reply{margin-left:18px;} .post-reaction-summary,.comment-reaction-summary{font-size:12px;} }

/* Profile navigation and author links */
.post-author-link,.comment-author-link{display:inline-flex;text-decoration:none;color:inherit;flex:0 0 auto}
.post-author-link .avatar-circle,.comment-author-link .avatar-circle{cursor:pointer}
.post-author-name,.comment-author-name{color:inherit;text-decoration:none}
.post-author-name:hover,.comment-author-name:hover{text-decoration:underline}
.profile-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);margin-bottom:18px}
.profile-tab{appearance:none;border:0;background:transparent;padding:12px 18px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;border-radius:8px 8px 0 0}
.profile-tab:hover{background:#f5f6f7;color:var(--text)}
.profile-tab.active{color:#1877f2;border-bottom-color:#1877f2;background:#f5f8ff}
.profile-tab span{font-size:12px;margin-left:4px}
.profile-tab-panel[hidden]{display:none!important}
.profile-post-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.profile-post-media-grid img,.profile-post-media-grid video{width:100%;height:260px;object-fit:cover;border-radius:10px;background:#111}
.reply-indicator{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 0;padding:8px 12px;background:#f0f5ff;border:1px solid #d8e5ff;border-radius:8px;color:#36517a;font-size:13px}
.reply-indicator button{border:0;background:transparent;color:#555;cursor:pointer;font-weight:600}
@media(max-width:700px){.profile-tabs{overflow-x:auto}.profile-tab{white-space:nowrap;padding:11px 14px}.profile-post-media-grid{grid-template-columns:1fr}.profile-post-media-grid img,.profile-post-media-grid video{height:230px}}

/* Feed stability and mobile performance */
.post-card > .post-header { position:static; z-index:auto; }
.post-card, .post-feed, .post-gallery, .comments-area { contain: layout paint; }
.post-gallery { content-visibility:auto; contain-intrinsic-size: 260px; }
.post-gallery img, .post-gallery video { content-visibility:auto; }
.comments-list { max-height: 380px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; contain:content; padding-right:2px; }
.comments-list .comment-item { content-visibility:auto; contain-intrinsic-size: 58px; }
@media (max-width:700px){
  .comments-list { max-height:320px; }
  .post-card > .post-header { position:static !important; top:auto !important; }
  .post-gallery { max-height:360px; }
  .gallery-tile img, .gallery-tile video { min-height:120px; }
}
@media (max-width:430px){
  .comments-list { max-height:280px; }
  .post-card { border-radius:10px; }
  .post-header { padding:12px 12px 8px; }
  .post-content { padding-left:12px; padding-right:12px; }
}

/* Phase 3 feed performance / reply UX */
.feed-load-status{min-height:42px;display:flex;align-items:center;justify-content:center;color:#777;font-size:13px;padding:12px}.feed-load-status.loading{color:#1877f2}.comment-reply-btn.reply-selected{font-weight:700;color:#1877f2;background:#eef5ff;border-radius:6px;padding:3px 7px}.comment-item.reply-target{outline:2px solid #d8e5ff;border-radius:10px}
@media(max-width:700px){.feed-load-status{padding:10px;font-size:12px}}

.comment-reply-mention{font-weight:700;color:#1877f2;text-decoration:none}.comment-reply-mention:hover{text-decoration:underline}.show-hidden-posts{display:block;margin:0 auto 10px;border:1px solid #d8e5ff;background:#f0f5ff;color:#36517a;border-radius:18px;padding:8px 14px;font-weight:700;cursor:pointer}.show-hidden-posts:hover{background:#e5efff}

/* Facebook-style inline comment replies and emoji input */
.comment-input-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:0}.comment-input-wrap input{width:100%;padding-right:42px}.comment-emoji-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;font-size:19px;padding:2px 4px;z-index:2}.comment-emoji-picker{position:absolute;right:0;bottom:calc(100% + 7px);display:flex;flex-wrap:wrap;gap:2px;max-width:290px;padding:8px;background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 7px 22px rgba(0,0,0,.16);z-index:50}.comment-emoji-picker[hidden]{display:none}.comment-emoji-picker button{border:0;background:transparent;cursor:pointer;font-size:21px;line-height:1;padding:4px;border-radius:7px}.comment-emoji-picker button:hover{background:#f0f2f5}.inline-reply-slot{width:100%;margin-top:7px}.inline-reply-form{display:flex;align-items:center;gap:7px;margin-top:5px}.inline-reply-form .btn{min-height:32px;padding:6px 11px}.inline-reply-cancel{border:0;background:transparent;color:#65676b;cursor:pointer;font-size:12px}.comment-item{flex-wrap:wrap}.comment-item>.comment-author-link{flex:0 0 auto}.comment-item>.comment-bubble{min-width:0;flex:1}.comment-reply{margin-left:38px}.reply-target .comment-bubble{box-shadow:0 0 0 2px #d8e5ff}.comment-form{align-items:center}.comment-form .comment-input-wrap{min-width:0}.comment-form .btn{flex:0 0 auto}

/* Stable Facebook-style inline comment replies. Keep the editor inside the comment and visible. */
.inline-reply-slot{display:block;position:relative;clear:both;width:100%;padding:2px 0 0 0;}
.inline-reply-form{display:flex !important;align-items:center;gap:7px;width:100%;margin-top:7px;padding:6px 0;}
.inline-reply-form .comment-input-wrap{flex:1;min-width:0;}
.inline-reply-form input[name="comment"]{min-width:0;}
.inline-reply-form .comment-emoji-picker{z-index:100;}

/* Refined mobile header/search overlay */
.mobile-search-toggle,.mobile-search-close{display:none}
@media(max-width:760px){
  .nav-container{position:relative;min-height:58px;flex-wrap:nowrap;gap:8px;padding:0 10px}
  .logo{flex:0 0 auto}
  .global-user-search{order:initial!important;width:auto!important;flex:1 1 auto;margin:0!important}
  .global-search-form{width:100%}
  .global-user-search .global-search-form input{min-width:0}
  .mobile-search-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;border:0;border-radius:50%;background:#f0f2f5;color:#333;font-size:22px;cursor:pointer}
  .mobile-search-close{display:none}
  .main-nav{order:initial!important;width:auto;flex:0 0 auto}
  .nav-list{width:auto!important;overflow:visible!important;justify-content:flex-end}
  .global-user-search{display:none}
  .global-user-search.mobile-search-open{display:block;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;margin:0!important;padding:10px 12px!important;background:rgba(255,255,255,.98);z-index:40000!important}
  .global-user-search.mobile-search-open .global-search-form{display:flex;align-items:center;gap:8px;margin-top:2px}
  .global-user-search.mobile-search-open .global-search-form input{display:block!important;flex:1;height:46px;border-radius:24px;font-size:16px;padding:0 16px}
  .global-user-search.mobile-search-open .global-search-form>button[type="submit"]{display:inline-flex!important;width:44px;height:44px;border-radius:50%}
  .global-user-search.mobile-search-open .mobile-search-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:#eef0f2;color:#333;font-size:28px;cursor:pointer}
  body.mobile-search-active{overflow:hidden}
  .global-user-search.mobile-search-open #globalSearchResults{display:block!important;position:fixed;top:68px;left:10px;right:10px;max-height:calc(100vh - 80px);overflow:auto;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.16);z-index:40001}
}
@media(max-width:430px){
  .nav-container{padding:0 8px;gap:5px}
  .logo a{font-size:17px}
  .mobile-search-toggle{width:36px;height:36px;flex-basis:36px}
  .icon-nav-link{width:35px;min-width:35px}
  .icon-nav-link .nav-icon{font-size:17px}
}

/* Share + link preview */
.post-link-preview{display:flex;align-items:stretch;margin:0 18px 14px;border:1px solid #dfe3e8;border-radius:12px;overflow:hidden;background:#f8fafc;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.post-link-preview:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.post-link-preview img{width:150px;height:110px;object-fit:cover;background:#eef1f4;flex:0 0 150px}
.post-link-preview-body{padding:11px 13px;min-width:0}
.post-link-preview-domain{font-size:11px;color:#667085;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-link-preview-title{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:4px;word-break:break-word;overflow-wrap:anywhere;unicode-bidi:plaintext}
.post-link-preview-description{font-size:12px;color:#667085;line-height:1.5;unicode-bidi:plaintext;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-share-meta{padding:9px 18px 0;color:#667085;font-size:12px;font-weight:600}
.shared-post-card{margin:8px 18px 14px;border:1px solid #e1e5ea;border-radius:12px;overflow:hidden;background:#fafbfc}
.shared-post-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e7e9ec;font-size:12px;color:#667085}
.shared-post-author{font-weight:700;color:#1c1e21}
.shared-post-content{padding:10px 12px;font-size:13px;line-height:1.5;word-break:break-word}
.shared-post-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:#111}.shared-post-media.media-count-1{grid-template-columns:1fr}.shared-post-media.media-count-1 img,.shared-post-media.media-count-1 video{height:auto;max-height:520px;object-fit:contain;background:#111}.shared-post-media img,.shared-post-media video{display:block;width:100%;height:220px;object-fit:cover}

.share-composer-body{padding:14px 16px 16px}.share-composer-label{font-size:13px;font-weight:800;color:#344054;margin-bottom:7px}.share-composer-label span{font-weight:500;color:#98a2b3}.share-composer-text{display:block;width:100%;min-height:92px;resize:vertical;border:1px solid #d0d5dd;border-radius:12px;padding:11px 12px;font:inherit;line-height:1.5;box-sizing:border-box;outline:none;margin-bottom:12px}.share-composer-text:focus{border-color:#1877f2;box-shadow:0 0 0 3px rgba(24,119,242,.10)}.share-composer-preview{border:1px solid #e4e7ec;border-radius:12px;background:#f8fafc;overflow:hidden;max-height:430px;overflow-y:auto}.share-composer-preview .post-card{margin:0;border:0;box-shadow:none;border-radius:0}.share-composer-preview .post-gallery{max-height:330px}.share-composer-preview .post-gallery img,.share-composer-preview .post-gallery video{max-height:330px}.share-composer-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.share-composer-actions .btn{min-width:110px}.share-composer-modal{z-index:16000}
.post-action.share-action{font-weight:600}
@media(max-width:600px){
  .post-link-preview{margin:0 10px 10px}
  .post-link-preview img{width:100px;height:92px;flex-basis:100px}
  .post-link-preview-title{font-size:13px}
  .post-link-preview-description{font-size:11px;-webkit-line-clamp:2}
  .shared-post-card{margin:7px 10px 11px}
  .shared-post-media img,.shared-post-media video{height:150px}.shared-post-media.media-count-1 img,.shared-post-media.media-count-1 video{height:auto;max-height:360px}
}
@media(max-width:760px){
  .global-user-search.mobile-search-open ~ .main-nav .nav-list > li:first-child{position:relative;z-index:40002}
  .global-user-search.mobile-search-open ~ .main-nav .nav-list > li:first-child > a{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
  .post-content-linkable{cursor:pointer}
  .post-content-linkable:hover{text-decoration:underline;text-decoration-color:#98a2b3}
}

/* Final mobile visual polish */
@media(max-width:760px){
  body{background:#eef1f5}
  main{padding:0 8px 28px}
  .feed-container{margin-top:8px}
  .composer-card,.post-card{border-radius:12px;box-shadow:0 1px 5px rgba(16,24,40,.07)}
  .composer-card{padding:11px;margin-bottom:10px}
  .post-header{padding:12px 12px 8px}
  .post-content{padding:5px 12px 11px;font-size:14px}
  .comments-area{padding:8px 9px 11px}
  .post-actions{position:relative}
  .post-action{min-height:38px;font-size:11px}
  .feed-heading{margin:8px 3px 9px}
  .feed-heading h2{font-size:18px}
  .post-link-preview{min-height:92px}
  .shared-post-card{border-radius:10px}
}
@media(max-width:430px){
  .post-actions{gap:0}
  .post-action{padding:0 3px;white-space:nowrap}
  .post-header strong{font-size:13px}
  .post-header time{font-size:9px}
  .comments-list{max-height:280px}
}

@media (max-width:430px){.lightbox-media-column{flex-basis:47vh}.lightbox-media-stage{padding-left:28px;padding-right:28px}.lightbox-external-actions button{font-size:11px;padding:6px 4px}}

/* Public post / external share page */
.public-post-page{max-width:920px;margin:28px auto;padding:0 14px;box-sizing:border-box}.public-post-shell{max-width:760px;margin:0 auto}.public-post-note{margin:0 0 10px;color:#667085;font-size:13px;font-weight:700}.public-post-card{background:#fff;border:1px solid #e4e7ec;border-radius:16px;overflow:hidden;box-shadow:0 4px 22px rgba(16,24,40,.09)}.public-post-card .post-header{padding:16px 18px 12px}.public-post-card .post-content{padding:4px 18px 16px;font-size:15px;line-height:1.65}.public-post-media{display:block!important;grid-template-columns:1fr!important;max-height:none!important;background:#111;overflow:hidden}.public-post-media .gallery-tile{min-height:0;max-height:none}.public-post-media img,.public-post-media video{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:720px!important;min-height:0!important;object-fit:contain!important;background:#111;margin:0 auto}.public-post-media .media-video-tile{min-height:0!important;background:#111}.public-post-share-row{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid #eee;flex-wrap:wrap}.public-post-share-row button{border:1px solid #dfe3e8;background:#f8fafc;border-radius:9px;padding:9px 12px;cursor:pointer;font-weight:700;color:#344054}.public-post-card .post-actions .post-action{font-size:13px}.public-post-card .comment-form{padding:10px 14px}.public-post-card .post-reaction-summary{padding:9px 14px}.public-post-card .post-link-preview{margin:0 14px 14px}.public-post-page .public-media-lightbox{z-index:20000}@media(max-width:700px){.public-post-page{margin:10px auto;padding:0 8px}.public-post-card{border-radius:12px}.public-post-card .post-header{padding:12px 12px 9px}.public-post-card .post-content{padding:3px 12px 12px;font-size:14px}.public-post-media img,.public-post-media video{max-height:70vh!important}.public-post-share-row button{flex:1;min-width:130px}}


/* v14 profile / business / settings / apps */
.apps-nav-link .nav-icon{font-size:21px;font-weight:800;line-height:1}
.profile-modern{max-width:960px}
.profile-hero{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 3px 18px rgba(16,24,40,.07);margin:18px 0 14px}
.profile-cover{height:175px;background:linear-gradient(135deg,#0f4fa8 0%,#1877f2 55%,#7bb6ff 100%);position:relative}
.profile-cover:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 22%,rgba(255,255,255,.22),transparent 28%),linear-gradient(120deg,transparent 45%,rgba(255,255,255,.08) 46%,transparent 60%)}
.profile-main{display:flex;align-items:flex-end;gap:18px;padding:0 24px 18px;margin-top:-52px;position:relative;z-index:2}
.profile-avatar-wrap{position:relative;flex:0 0 auto}.profile-avatar{width:112px;height:112px;border-radius:50%;border:5px solid #fff;object-fit:cover;background:#e4e6eb;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.profile-avatar-fallback{display:flex;align-items:center;justify-content:center;color:#fff;background:#1877f2;font-size:38px;font-weight:800}
.profile-identity{min-width:0;flex:1;padding-bottom:2px}.profile-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.profile-name-row h1{margin:0;font-size:28px;line-height:1.2}.account-pill{font-size:10px;font-weight:800;letter-spacing:.05em;padding:4px 8px;border-radius:999px;background:#eef2f6;color:#667085}.account-pill.business{background:#e8f2ff;color:#1877f2}
.profile-subtitle{font-size:13px;font-weight:700;color:#475467;margin-top:5px}.profile-identity p{margin:4px 0;color:var(--muted);font-size:12px}.profile-bio{margin-top:8px;color:#344054;max-width:700px}.profile-interest-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.profile-interest-chips span{background:#f2f6fb;border:1px solid #e1e8f0;border-radius:999px;padding:4px 8px;font-size:11px;color:#475467}
.profile-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.profile-actions .btn{white-space:nowrap}.profile-summary-bar{display:flex;gap:0;border-top:1px solid #eef0f2;background:#fff}.profile-summary-bar>div{flex:1;text-align:center;padding:10px 6px;border-right:1px solid #eef0f2}.profile-summary-bar>div:last-child{border-right:0}.profile-summary-bar strong{display:block;font-size:17px}.profile-summary-bar span{display:block;color:var(--muted);font-size:11px}
.profile-content-section{border-radius:16px}.profile-tabs{margin:0 0 14px;padding:0 4px}.profile-tab{padding:12px 16px}.profile-post{padding:0 0 12px;border:1px solid var(--border);border-radius:13px;margin-bottom:12px;background:#fff;overflow:hidden;box-shadow:0 1px 5px rgba(16,24,40,.04)}.profile-post-head{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #f0f1f3;color:var(--muted);font-size:11px}.profile-post-head span{font-weight:800;color:#344054}.profile-post-text{padding:12px 14px;line-height:1.6;word-break:break-word}.profile-post-media-grid{margin:0;gap:3px}.profile-post-media-grid img,.profile-post-media-grid video{border-radius:0;height:280px}.profile-video-tile{position:relative;min-width:0;background:#111;overflow:hidden}.profile-video-tile video{width:100%;height:280px;object-fit:cover;display:block}.profile-video-tile .video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}.profile-video-tile video{position:relative;z-index:1}.profile-post-open{display:block;margin:10px 14px 0;color:#1877f2;font-weight:700;font-size:12px}.profile-private-box{text-align:center;background:#fff;border:1px solid var(--border);border-radius:14px;padding:42px 22px;color:#667085}.private-icon{font-size:35px;margin-bottom:8px}.profile-private-box h3{margin:0 0 6px;color:#1c1e21}.profile-private-box p{margin:0 auto;max-width:520px;font-size:13px}.profile-friends-placeholder{background:#fff;border:1px solid var(--border);border-radius:12px;padding:30px;text-align:center;color:#667085}.profile-friends-placeholder a{color:#1877f2;font-weight:700}
.profile-settings-page,.apps-page{max-width:960px;margin:20px auto}.settings-page-head,.apps-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:#1877f2}.settings-page-head h2,.apps-hero h2{margin:2px 0 4px;font-size:26px}.settings-page-head p,.apps-hero p{margin:0;color:#667085;font-size:13px}.settings-message{background:#ecfdf3;color:#16794a;border:1px solid #b7ebcd;border-radius:10px;padding:10px 13px;margin-bottom:12px;font-size:13px;font-weight:700}.settings-grid{display:grid;gap:14px}.settings-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(16,24,40,.04)}.settings-card-head{margin-bottom:14px}.settings-card-head h3{margin:0 0 3px;font-size:17px}.settings-card-head p{margin:0;color:#667085;font-size:12px}.settings-card .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-card .form-grid .full{grid-column:1/-1}.settings-card label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}.settings-card textarea{resize:vertical}.account-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.account-choice{display:flex!important;align-items:flex-start;gap:9px;border:1px solid #dfe3e8;border-radius:11px;padding:12px;cursor:pointer}.account-choice:has(input:checked){border-color:#1877f2;background:#f4f8ff}.account-choice input{margin-top:3px}.account-choice b,.account-choice small{display:block}.account-choice b{font-size:13px}.account-choice small{color:#667085;font-size:11px;margin-top:3px}.business-fields{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.interest-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.interest-option{display:inline-flex!important;align-items:center;gap:7px;border:1px solid #dfe3e8;border-radius:999px;padding:8px 11px;cursor:pointer;background:#fafbfc}.interest-option:has(input:checked){border-color:#1877f2;background:#edf5ff;color:#1557a6}.interest-option input{accent-color:#1877f2}.interest-option span{font-size:12px}.interest-note{font-size:11px;color:#667085;background:#f7f8fa;border-radius:9px;padding:9px 10px;margin-bottom:12px}.apps-hero{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 2px 10px rgba(16,24,40,.05)}.apps-hero-icon{width:64px;height:64px;border-radius:16px;background:#edf5ff;color:#1877f2;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800}.apps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.app-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px}.app-icon{font-size:26px}.app-card h3{margin:10px 0 5px}.app-card p{margin:0;color:#667085;font-size:12px;min-height:38px}.app-card span{display:inline-block;margin-top:12px;font-size:10px;font-weight:800;color:#1877f2;background:#edf5ff;padding:4px 8px;border-radius:999px}
@media(max-width:760px){.profile-cover{height:135px}.profile-main{align-items:flex-start;padding:0 14px 14px;margin-top:-38px;gap:11px;flex-wrap:wrap}.profile-avatar{width:82px;height:82px;border-width:4px}.profile-identity{flex:1;min-width:calc(100% - 105px)}.profile-name-row h1{font-size:20px}.profile-actions{width:100%;padding-left:0}.profile-actions .btn{flex:1}.profile-summary-bar strong{font-size:15px}.profile-settings-page,.apps-page{margin:10px auto}.settings-page-head,.apps-hero{align-items:flex-start;flex-direction:column}.settings-page-head h2,.apps-hero h2{font-size:21px}.settings-card{padding:14px}.settings-card .form-grid,.account-choice-grid,.business-fields,.apps-grid{grid-template-columns:1fr}.profile-post-media-grid{grid-template-columns:1fr}.profile-post-media-grid img,.profile-post-media-grid video,.profile-video-tile video{height:230px}.profile-summary-bar>div{padding:8px 3px}.profile-tabs{overflow-x:auto}.profile-tab{white-space:nowrap}.apps-hero-icon{display:none}}
@media(max-width:430px){.profile-main{padding-left:10px;padding-right:10px}.profile-actions .btn{font-size:12px;padding:8px 9px}.profile-summary-bar span{font-size:10px}.profile-post-media-grid img,.profile-post-media-grid video,.profile-video-tile video{height:220px}}

.profile-relation-pill{display:inline-flex;align-items:center;padding:8px 11px;border-radius:8px;background:#eef7ef;color:#26733a;font-size:12px;font-weight:700}.profile-relation-pill.pending{background:#fff6e6;color:#8a5a00}
@media(max-width:430px){
  .nav-container{gap:3px}.logo a{font-size:16px}.mobile-search-toggle{width:32px;height:32px;flex-basis:32px;font-size:19px}.nav-list{gap:2px}.icon-nav-link,.nav-list > li > a:not(.btn){width:30px;min-width:30px;padding:4px}.icon-nav-link .nav-icon{font-size:15px}.header-avatar{width:26px;height:26px}.apps-nav-link .nav-icon{font-size:18px}.nav-list > li > a.btn{padding:4px 6px;min-height:30px}
}

/* SocialApp v15 profile refinements */
.profile-cover{background-size:cover;background-position:center;position:relative}
.profile-cover-default{background:linear-gradient(135deg,#0f4fa8 0%,#1877f2 55%,#7bb6ff 100%)}
.cover-upload-form{position:absolute;right:18px;top:16px;z-index:4}
.cover-upload-form label{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.48);color:#fff;border:1px solid rgba(255,255,255,.45);padding:8px 11px;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;backdrop-filter:blur(5px)}
.avatar-upload-form{position:absolute;right:1px;bottom:4px;z-index:4}.avatar-upload-form label{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1877f2;color:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:13px;cursor:pointer}
.profile-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.about-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 1px 6px rgba(16,24,40,.04)}.about-card h3{margin:0 0 12px;font-size:16px}.about-wide{grid-column:1/-1}.about-row{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid #eef0f2;font-size:12px}.about-row:last-child{border-bottom:0}.about-row span{color:#667085}.about-row strong{color:#1d2939;text-align:right;word-break:break-word}.about-row a{color:#1877f2}.about-muted{margin:0;color:#667085;font-size:13px}.about-bio{margin:0;line-height:1.7;color:#344054;white-space:pre-wrap}
.profile-post-stream{display:grid;gap:12px}.profile-post-actions{border-top:1px solid #eef0f2;margin-top:0}.profile-post-actions .post-action{flex:1;text-align:center;text-decoration:none}.profile-stream-sentinel{min-height:44px;display:flex;align-items:center;justify-content:center;color:#667085;font-size:12px;font-weight:700;padding:14px;text-align:center}.profile-stream-sentinel span{display:inline-flex;padding:8px 12px;border-radius:999px;background:#f5f7fa}.profile-gallery-stream{margin-top:0}.gallery-media-open{display:block;width:100%;height:100%;background:#111}.gallery-media-open img,.gallery-media-open video{display:block;width:100%;height:100%;object-fit:cover}.profile-friends-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.profile-friend-card{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;text-decoration:none;color:inherit}.profile-friend-card img,.profile-friend-card>span{width:48px;height:48px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:#e9f1fb;color:#1877f2;font-weight:800}.profile-friend-card strong,.profile-friend-card small{display:block}.profile-friend-card strong{font-size:12px}.profile-friend-card small{font-size:10px;color:#667085;margin-top:3px}
.user-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.user-gallery-item{min-width:0;background:#fff;border:1px solid var(--border);border-radius:11px;overflow:hidden}.user-gallery-item>.gallery-media-open{height:180px}.user-gallery-item h4{margin:7px 9px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-gallery-item .gallery-actions{padding:6px 9px;border-top:1px solid #eef0f2;font-size:11px;color:#667085}
@media(max-width:760px){.profile-about-grid{grid-template-columns:1fr}.about-wide{grid-column:auto}.profile-friends-grid{grid-template-columns:1fr 1fr}.user-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.user-gallery-item>.gallery-media-open{height:125px}.cover-upload-form{right:9px;top:9px}.cover-upload-form label{font-size:10px;padding:7px 8px}.profile-summary-bar>div{min-width:0}.profile-summary-bar{overflow:hidden}.profile-summary-bar strong{font-size:14px}.profile-summary-bar span{font-size:9px}.profile-tab{padding:10px 12px}}
@media(max-width:430px){.profile-friends-grid{grid-template-columns:1fr}.user-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.user-gallery-item>.gallery-media-open{height:105px}.profile-name-row h1{font-size:19px}.profile-avatar{width:78px;height:78px}.avatar-upload-form label{width:29px;height:29px;font-size:11px}}

/* v16 profile readability: keep identity readable over any cover image and keep long bio out of the hero. */
.profile-name-row{display:inline-flex;max-width:100%;padding:7px 11px;border-radius:11px;background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(16,24,40,.10);border:1px solid rgba(255,255,255,.85)}
.profile-name-row h1{color:#101828;text-shadow:none;overflow-wrap:break-word;word-break:normal;hyphens:none;min-width:0}.profile-name-row{max-width:100%;align-items:flex-start}.profile-name-row h1{white-space:normal}
.profile-subtitle{color:#344054}
@media(max-width:760px){.profile-name-row{padding:5px 8px}.profile-name-row h1{font-size:19px}}

/* v17: fast media previews + action feedback */
.post-gallery .media-video-tile{background:#111;overflow:hidden}
.post-gallery .media-video-tile video{display:block;width:100%;height:100%;object-fit:cover;background:#111}
.post-gallery .media-video-tile video[poster]{background:#111}
.social-action-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,18px);opacity:0;pointer-events:none;z-index:70000;background:rgba(20,24,30,.95);color:#fff;padding:10px 15px;border-radius:999px;font-size:13px;font-weight:700;transition:.18s ease}
.social-action-toast.show{opacity:1;transform:translate(-50%,0)}
.optimistic-comment{opacity:.82}
@media(max-width:760px){.social-action-toast{bottom:16px;max-width:calc(100vw - 30px);text-align:center}}

/* v17 composer: write a post without losing the reader's scroll position */
.floating-compose-button{position:fixed;right:24px;bottom:24px;z-index:15000;border:0;border-radius:999px;background:#1877f2;color:#fff;padding:11px 16px;font-weight:800;box-shadow:0 8px 24px rgba(24,119,242,.28);cursor:pointer}
.floating-compose-button span{font-size:13px;margin-left:5px}
.compose-modal[hidden]{display:none}
.compose-modal{position:fixed;inset:0;z-index:14990;display:flex;align-items:center;justify-content:center;padding:18px}
.compose-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(2px)}
.compose-modal-dialog{position:relative;width:min(680px,100%);max-height:min(90vh,760px);overflow:auto;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.compose-modal-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid #edf0f3;background:#fff}
.compose-modal-head button{border:0;background:#f0f2f5;border-radius:50%;width:32px;height:32px;font-size:20px;cursor:pointer}
.compose-modal-dialog .composer-card{margin:0;border:0;box-shadow:none;border-radius:0}
.compose-media-card{position:relative;width:145px;height:145px;border-radius:10px;overflow:hidden;background:#eef1f4;border:1px solid #e0e4e8}
.compose-media-card img,.compose-media-card video{display:block;width:100%;height:100%;object-fit:cover}
.composer-media-status{position:absolute;left:0;right:0;bottom:0;padding:5px 7px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:11px;font-weight:700;padding-top:18px}
.post-media-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:760px){.floating-compose-button{right:14px;bottom:16px;padding:10px 13px}.floating-compose-button span{font-size:12px}.compose-modal{padding:8px;align-items:flex-end}.compose-modal-dialog{max-height:94vh;border-radius:14px 14px 0 0}.post-media-preview{grid-template-columns:repeat(3,minmax(0,1fr))}.compose-media-card{width:auto;height:110px}}

/* v18 UX refinements */
.floating-compose-button{left:12px;right:auto;bottom:24px;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:20px;z-index:1200;box-shadow:0 5px 18px rgba(24,119,242,.25)}
.floating-compose-button span{display:none!important}
.floating-compose-button.is-hidden{opacity:0;pointer-events:none;transform:scale(.8)}
.composer-media-status{display:none!important}
.post-upload-status{display:none!important}
.post-upload-status.active{display:block}
.post-upload-status .post-upload-status-head{font-size:11px}
.search-page{max-width:960px;margin:20px auto}.search-hero-card{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.search-page-form{display:flex;gap:8px;min-width:min(480px,100%)}.search-page-form input{flex:1}.empty-search-state{text-align:center;padding:55px 20px}.search-big-icon{font-size:46px;color:#1877f2}.search-results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.search-profile-card{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px}.search-profile-main{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none;color:inherit}.search-profile-main img,.search-profile-avatar-fallback{width:52px;height:52px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:#eaf2ff;color:#1877f2;font-weight:800;font-size:18px;flex:0 0 52px}.search-profile-info{min-width:0;position:relative;padding-right:8px}.search-profile-info strong,.search-profile-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-profile-info strong{font-size:14px}.search-profile-info small{font-size:10px;color:#667085;margin-top:3px}.search-profile-info .presence-inline{display:inline-block;margin-left:4px}.search-profile-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.profile-delete-form{display:inline-flex;margin:0}.danger-action{color:#d92d20!important}.gallery-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.gallery-delete-btn{border:0;background:#fff1f0;color:#d92d20;border-radius:8px;padding:5px 8px;cursor:pointer}.search-profile-card .btn{white-space:nowrap}
.composer-title .small-avatar{overflow:hidden}.composer-title .small-avatar .avatar-image{width:100%;height:100%;object-fit:cover;border-radius:50%}
@media(max-width:760px){
  /*
     v20 mobile composer: the New Post action now belongs to the fixed bottom
     navigation. Hide only the old floating trigger on phones so there is no
     duplicate button; desktop keeps its existing floating composer trigger.
  */
  .floating-compose-button{display:none !important;}
  .search-hero-card{display:block}.search-page-form{margin-top:12px;min-width:0}.search-results-grid{grid-template-columns:1fr}.search-profile-card{align-items:flex-start}.search-profile-actions{flex-direction:column;align-items:stretch}.search-profile-actions .btn{padding:7px 9px;font-size:11px}
}

/* v20: friend tagging + birthday greeting */
.composer-tag-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;border:1px solid #e4e8ef;border-radius:10px;background:#f8fafc;font-size:12px;color:#687385}
.composer-tag-row label{font-weight:800;color:#334155}
.composer-tag-row select{min-width:220px;max-width:100%;min-height:34px;max-height:110px;border:1px solid #ccd5e1;border-radius:8px;background:#fff;padding:4px 8px;font:inherit;color:#1f2937}
.composer-tag-row select option{padding:4px}
.birthday-greeting-modal{position:fixed;inset:0;z-index:30000;display:flex;align-items:center;justify-content:center;padding:18px}
.birthday-greeting-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(2px)}
.birthday-greeting-dialog{position:relative;width:min(520px,100%);background:#fff;border-radius:18px;padding:26px;box-shadow:0 22px 70px rgba(0,0,0,.25);text-align:center}
.birthday-greeting-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f5f9;font-size:22px;cursor:pointer}
.birthday-greeting-icon{font-size:42px;margin-bottom:5px}.birthday-greeting-dialog h2{margin:4px 35px 8px;font-size:21px}.birthday-greeting-dialog p{margin:0 auto 15px;color:#6b7280;font-size:13px;line-height:1.5}
.birthday-greeting-dialog textarea{width:100%;min-height:130px;resize:vertical;border:1px solid #d8dee8;border-radius:12px;padding:12px;font:inherit;box-sizing:border-box}.birthday-greeting-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
@media(max-width:700px){.composer-tag-row{align-items:stretch}.composer-tag-row select{width:100%;height:42px}.birthday-greeting-modal{padding:10px;align-items:flex-end}.birthday-greeting-dialog{border-radius:18px 18px 0 0;padding:22px 16px}}

/* v21: compact @mentions, readable profile identity, and expandable comment inputs */
.composer-mention-hint{margin-top:9px;padding:8px 10px;border:1px dashed #d8e2ef;border-radius:9px;background:#f8fbff;color:#667085;font-size:11px}
.composer-mention-hint strong{color:#1877f2}
.post-mention-suggestions{position:relative;z-index:12000;margin-top:5px;max-width:420px;background:#fff;border:1px solid #dfe3e8;border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.16);overflow:hidden}
.post-mention-suggestions[hidden]{display:none}
.mention-suggestion{display:flex;width:100%;align-items:center;gap:9px;padding:9px 11px;border:0;border-bottom:1px solid #f0f2f5;background:#fff;text-align:left;cursor:pointer}
.mention-suggestion:last-child{border-bottom:0}
.mention-suggestion:hover{background:#f5f8ff}
.mention-suggestion img,.mention-avatar-fallback{width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover;background:#eaf2ff;color:#1877f2;display:flex;align-items:center;justify-content:center;font-weight:800}
.mention-suggestion span:not(.mention-avatar-fallback){min-width:0}
.mention-suggestion strong,.mention-suggestion small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mention-suggestion strong{font-size:12px;color:#1d2939}
.mention-suggestion small{font-size:10px;color:#667085;margin-top:2px}
.post-mention{display:inline-block;padding:1px 4px;border-radius:5px;background:#edf5ff;color:#1769d2;font-weight:700;white-space:nowrap}
.shared-post-head{flex-wrap:wrap}
.shared-post-with{font-size:11px;color:#7a8697;font-weight:500;flex-basis:100%;padding-left:0;line-height:1.35}
.comment-input-wrap{min-width:0}
.comment-input-wrap textarea,.inline-reply-form textarea{
  flex:1;width:100%;min-width:0;min-height:38px;max-height:132px;box-sizing:border-box;
  resize:none;overflow-y:hidden;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;
  border:1px solid #ccd0d5;border-radius:18px;padding:8px 42px 8px 12px;outline:none;font:inherit;line-height:1.4;
}
.comment-input-wrap textarea:focus,.inline-reply-form textarea:focus{border-color:#1877f2;box-shadow:0 0 0 2px rgba(24,119,242,.10)}
.inline-reply-form .comment-input-wrap{flex:1;min-width:0}
.profile-main{align-items:flex-end;flex-wrap:wrap}
.profile-identity{flex:1 1 300px;min-width:260px;max-width:none}
.profile-name-row{max-width:100%;width:fit-content}
.profile-name-row h1{font-size:clamp(20px,2.4vw,28px);line-height:1.22;overflow-wrap:anywhere;word-break:normal;white-space:normal}
.profile-actions{flex:0 1 auto;min-width:0;max-width:100%}
.profile-actions .btn{max-width:100%}
@media(max-width:760px){
  .profile-identity{flex:1 1 calc(100% - 96px);min-width:0}
  .profile-name-row{max-width:100%}
  .profile-name-row h1{font-size:20px}
  .profile-actions{width:100%;flex:0 0 100%}
}
@media(max-width:430px){
  .profile-identity{flex-basis:calc(100% - 92px)}
  .profile-name-row h1{font-size:18px}
}


/* v22 — compact media composer + safe multiline editors */
.composer-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.composer-toolbar .media-picker{
  flex:0 0 auto !important;
  width:auto;
  min-height:36px;
  height:36px;
  box-sizing:border-box;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:10px;
  white-space:nowrap;
}
.media-picker-icon{font-size:17px;line-height:1}
.media-picker-label{font-size:12px;font-weight:600}
.composer-toolbar .media-help{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  order:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
}
.composer-toolbar #postSubmitBtn{
  flex:0 0 auto !important;
  min-width:118px;
  transition:opacity .15s ease,filter .15s ease;
}
.composer-toolbar #postSubmitBtn:disabled{
  opacity:.48;
  filter:grayscale(.45);
  cursor:not-allowed;
}
.post-upload-status{
  display:none;
  margin-top:8px;
  padding:7px 9px;
  border:1px solid #e2e7ed;
  border-radius:9px;
  background:#f8fafc;
}
.post-upload-status.active{display:block}
.post-upload-status-head{font-size:11px;line-height:1.3}
.post-progress-track{height:5px}
.post-progress-meta{font-size:10px;margin-top:4px}
.post-media-preview{margin-top:7px}

/* Every long message/comment must wrap instead of running outside its field. */
textarea,
.chat-popup-footer textarea,
.comment-input-wrap textarea,
.inline-reply-form textarea{
  white-space:pre-wrap !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  max-width:100%;
  box-sizing:border-box;
}
.comment-input-wrap textarea,
.inline-reply-form textarea{
  min-height:38px;
  max-height:132px;
  overflow-y:auto;
  resize:none;
}
@media(max-width:760px){
  .composer-toolbar{gap:6px}
  .composer-toolbar .media-picker{width:42px;padding:0}
  .media-picker-label{display:none}
  .composer-toolbar #postSubmitBtn{min-width:104px}
}

/* v23 notification lightbox + true multiline submit behavior */
.lightbox-media-stage.lightbox-no-media{min-height:180px;display:flex;align-items:center;justify-content:center}
.lightbox-media-stage.lightbox-no-media::after{content:'პოსტს მედია არ აქვს';color:#98a2b3;font-size:13px}
.chat-popup-footer textarea{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.4}
.comment-input-wrap textarea,.inline-reply-form textarea{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}


/* v27 mobile lightbox comment UX
   Keep the composer reachable after opening a post from notifications and
   anchor the emoji picker to the actual control. */
.lightbox-post-panel .comment-form{
    position:sticky;
    bottom:0;
    z-index:20;
    margin:8px -1px 0;
    padding:8px 0 calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98);
    border-top:1px solid #e7e9ed;
}
.lightbox-post-panel .comments-area{padding-bottom:0}
.lightbox-post-panel .comments-list{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.comment-emoji-picker{
    max-height:min(220px,42vh);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}
@media(max-width:760px){
    .lightbox-post-panel .post-card{min-height:100%}
    .lightbox-post-panel .comments-area{padding-left:10px;padding-right:10px}
    .lightbox-post-panel .comment-form{padding-left:2px;padding-right:2px}
    .lightbox-post-panel .comments-list{max-height:150px}
    .lightbox-post-panel .comment-form textarea{max-height:96px}
    .comment-emoji-picker{max-width:min(292px,calc(100vw - 16px));}
}
@media(max-width:430px){
    .lightbox-post-panel .comments-list{max-height:130px}
    .lightbox-post-panel .comment-form{gap:5px}
    .lightbox-post-panel .comment-form .btn{padding:7px 10px}
}

/* v28 — reaction picker works on touch devices as well as hover. */
.reaction-wrap.is-open .reaction-picker{display:flex}
.reaction-picker{touch-action:manipulation}
.reaction-picker button{min-width:34px;min-height:34px}
/* v29 registration / language helpers */
.register-captcha-box{margin-top:14px;padding:12px;border:1px solid #d9e1ec;border-radius:12px;background:#f8fafc}.captcha-row{display:flex;align-items:center;gap:8px;margin:7px 0}.captcha-row img{width:280px;max-width:calc(100% - 48px);height:90px;border-radius:9px;border:1px solid #d9e1ec;background:#fff}.register-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.terms-check{display:flex;gap:8px;align-items:flex-start;margin:14px 0;font-size:13px;line-height:1.5}.terms-check input{margin-top:3px}.terms-check a{font-weight:700}
.language-bar{display:flex;align-items:center;gap:5px;margin-left:8px}.language-bar button{border:0;background:#f2f4f7;border-radius:8px;padding:5px 7px;font-size:11px;cursor:pointer}.language-bar button.active{background:#1677ef;color:#fff}
.profile-tutorial-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px}.profile-tutorial{width:min(520px,100%);background:#fff;border-radius:20px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.25)}.profile-tutorial h2{margin:0 0 8px}.profile-tutorial p{color:#667085;line-height:1.55}.profile-tutorial-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.public-media-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:12000;display:none;align-items:center;justify-content:center;padding:20px}.public-media-lightbox.open{display:flex}.public-media-lightbox img,.public-media-lightbox video{max-width:94vw;max-height:82vh;object-fit:contain}.public-media-lightbox .lb-close{position:absolute;right:18px;top:14px;border:0;background:#fff;color:#111;border-radius:50%;width:44px;height:44px;font-size:26px;cursor:pointer}.public-media-lightbox .lb-login{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#1677ef;color:#fff;border-radius:12px;padding:10px 16px;text-decoration:none;font-weight:700}
@media(max-width:700px){.language-bar{display:none}.register-captcha-box{padding:10px}.captcha-row img{height:76px}.profile-tutorial-backdrop{align-items:flex-end}.profile-tutorial{border-radius:20px 20px 0 0}.public-media-lightbox{padding:10px}}

/* v30 privacy selector + viewport-anchored mention suggestions. */
.post-privacy-control{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 8px;border:1px solid #d8dee8;border-radius:10px;background:#fff;color:#475467;box-sizing:border-box;white-space:nowrap}
.post-privacy-control select,.share-privacy-control select{border:0;background:transparent;font:inherit;font-size:12px;font-weight:700;color:#344054;outline:0;cursor:pointer}
.share-privacy-control{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc;color:#475467;font-size:12px;font-weight:700}
.post-mention-suggestions{position:fixed!important;margin:0!important;width:min(360px,calc(100vw - 20px));max-width:none;max-height:240px;overflow:auto;z-index:40000}
@media(max-width:700px){.post-privacy-control{height:34px;padding:0 7px}.post-privacy-control select{max-width:88px}.share-privacy-control{width:100%;justify-content:space-between;box-sizing:border-box}.share-privacy-control select{flex:1;text-align:right}}


/* v32: language persistence / non-intrusive Google translation UI */
html body .goog-te-banner-frame, html body iframe.goog-te-banner-frame { display:none !important; }
html body { top:0 !important; }
.goog-te-gadget { font-size:0 !important; }
.goog-te-gadget .goog-te-combo { display:none !important; }
.language-bar button.active { background:#1677ef; color:#fff; }

/* v32: real upload progress and Android camera capture */
.post-upload-status.active { display:block !important; }
.media-camera-picker { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #d8dee8; border-radius:10px; background:#fff; cursor:pointer; font-size:17px; box-sizing:border-box; }
.media-camera-picker:hover { background:#f4f7fb; }
.media-camera-picker input { display:none; }
.chat-camera-label { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#e4e6eb; cursor:pointer; flex:0 0 36px; }
.chat-camera-label:hover { background:#d8dadf; }
@media(max-width:700px){ .media-camera-picker{width:34px;height:34px}.chat-camera-label{width:34px;height:34px;flex-basis:34px} }

/* v33: unified post media picker + edit privacy control */
.media-picker-unified{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.media-picker-unified .media-picker-label{white-space:nowrap}
.post-edit-privacy-row{display:flex;align-items:center;gap:8px;margin:8px 0}
@media(max-width:700px){
  .media-picker-unified{min-height:38px;padding:0 11px}
  .post-edit-privacy-row{width:100%;overflow:hidden}
  .post-edit-privacy-row .post-privacy-control{max-width:100%}
}


.media-picker-menu-wrap{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;overflow:visible;z-index:30}
.media-picker-trigger{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d0d5dd;background:#fff;color:#344054;border-radius:10px;padding:8px 11px;min-height:36px;font-weight:700;cursor:pointer;white-space:nowrap;box-sizing:border-box}
.media-picker-trigger:hover{background:#f7f8fa;border-color:#c7ccd4}
.media-picker-trigger:focus-visible{outline:2px solid rgba(24,119,242,.35);outline-offset:2px}
/* v43 Android-safe media dropdown.
   Do not position this menu inside the flex composer: some Android WebViews/Chrome
   layouts can clip/reflow absolutely-positioned descendants of the toolbar.
   JavaScript anchors the fixed menu to the trigger's viewport coordinates. */
.media-source-menu{position:fixed !important;top:0;left:0;right:auto;bottom:auto;transform:none !important;width:240px;max-width:calc(100vw - 16px);box-sizing:border-box;background:#fff;border:1px solid #d9dee7;border-radius:14px;box-shadow:0 14px 36px rgba(16,24,40,.20);padding:6px;z-index:2147483000;overflow:hidden}
.media-source-menu[hidden]{display:none !important}
.media-picker-menu-wrap > input[type="file"]{display:none !important;position:absolute !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important}
.media-source-menu button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;padding:11px 12px;border-radius:10px;font-size:13px;line-height:1.3;cursor:pointer;color:#1d2939;min-height:44px;box-sizing:border-box}
.media-source-menu button:hover,.media-source-menu button:focus-visible{background:#f2f4f7}
.media-source-menu button:active{background:#eaf2ff}
.media-source-menu button span{min-width:0;white-space:normal}
@media(max-width:600px){
  .media-picker-menu-wrap{z-index:100}
  .media-picker-trigger{width:42px;height:42px;min-height:42px;padding:0;border-radius:11px;font-size:19px}
  .media-picker-label{display:none}
  .media-source-menu{width:240px;max-width:calc(100vw - 16px);border-radius:14px}
}
.settings-danger-card{border-color:#fecdca}.danger-settings-note{padding:11px 13px;border-radius:10px;background:#fff6f5;border:1px solid #fecdca;color:#7a271a;font-size:13px;line-height:1.55;margin-bottom:12px}
/* v45 composer media removal */
.composer-media-card{position:relative}
.composer-media-remove{position:absolute;right:6px;top:6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(17,24,39,.82);color:#fff;font-size:20px;line-height:26px;text-align:center;cursor:pointer;z-index:4;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.composer-media-remove:hover,.composer-media-remove:focus{background:#d92d20;outline:none}
.composer-media-card.uploaded .composer-media-status{display:block!important;position:absolute;left:6px;right:6px;bottom:6px;padding:4px 7px;border-radius:7px;background:rgba(16,24,40,.72);color:#fff;font-size:11px;font-weight:700}

/* v49 translation administration */
.admin-translation-page .settings-card{margin-bottom:14px;}
.admin-translation-table th{background:#f8fafc;color:#344054;font-size:12px;text-align:left;padding:10px;border-bottom:1px solid #e4e7ec;position:sticky;top:0;z-index:1;}
.admin-translation-table td{padding:8px;border-bottom:1px solid #eef1f4;vertical-align:top;}
.admin-translation-table textarea{min-width:250px;resize:vertical;}
.translation-suggestions-list{display:grid;gap:10px;}
.translation-suggestion-card{border:1px solid #e4e7ec;border-radius:12px;background:#f8fafc;padding:12px 14px;}
.translation-suggestion-card p{margin:5px 0;font-size:13px;line-height:1.45;overflow-wrap:anywhere;}
@media(max-width:700px){
 .admin-translation-page .settings-page-head{align-items:flex-start;}
 .admin-translation-table{min-width:760px!important;}
 .translation-suggestion-card{padding:11px;}
}

/* v51 reporting + feed break */
.post-header{position:relative;}
.post-more-wrap{margin-left:auto;position:relative;align-self:flex-start;}
.post-more-btn{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#667085;font-size:25px;line-height:1;cursor:pointer;}
.post-more-btn:hover{background:#f1f3f5;}
.post-more-menu{position:absolute;right:0;top:40px;z-index:80;min-width:250px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:6px;}
.post-more-menu[hidden]{display:none!important;}
.post-more-menu button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;font:inherit;color:#273142;}
.post-more-menu button:hover{background:#f5f7fa;}
.post-more-menu button.danger-menu-item{color:#c62828;}
.post-more-menu button.danger-menu-item:hover{background:#fff1f1;color:#b71c1c;}
.post-more-menu button:disabled{opacity:.6;cursor:wait;}
.comment-report-btn{border:0;background:transparent;color:#667085;cursor:pointer;font-size:13px;margin-left:4px;}
.social-report-modal{position:fixed;inset:0;z-index:2147483600;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:18px;}
.social-report-modal[hidden]{display:none!important;}
.social-report-dialog{position:relative;width:min(520px,100%);background:#fff;border-radius:18px;box-shadow:0 20px 70px rgba(0,0,0,.25);padding:22px;}
.social-report-dialog h3{margin:0 35px 7px 0;font-size:21px;}
.social-report-dialog p{color:#667085;margin:0 0 15px;}
.social-report-dialog label{display:block;font-weight:600;margin:12px 0;}
.social-report-dialog select,.social-report-dialog textarea{display:block;width:100%;box-sizing:border-box;margin-top:7px;border:1px solid #d0d5dd;border-radius:10px;padding:10px;background:#fff;font:inherit;}
.social-report-close{position:absolute;right:12px;top:10px;border:0;background:#f2f4f7;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer;}
.social-report-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
body.social-report-open{overflow:hidden;}
@media(max-width:700px){
 .post-more-menu{right:-4px;min-width:235px;}
 .social-report-modal{align-items:flex-end;padding:10px;}
 .social-report-dialog{border-radius:18px 18px 10px 10px;padding:18px;max-height:88vh;overflow:auto;}
}
.friends-page .friend-card .avatar-circle{overflow:hidden;display:flex;align-items:center;justify-content:center;}
.friends-page .friend-card .avatar-circle img.friend-avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}


/* SocialApp v3 global navigation polish */
.site-header{position:sticky;top:0;z-index:10000;backdrop-filter:saturate(150%) blur(14px);background:rgba(255,255,255,.88)!important;border-bottom:1px solid rgba(214,222,234,.8);box-shadow:0 4px 18px rgba(16,24,40,.05);}
.main-nav .icon-nav-link{transition:transform .15s ease,background .15s ease,box-shadow .15s ease;color:#344054;border-radius:12px;}
.main-nav .icon-nav-link:hover{transform:translateY(-1px);background:#f1f5ff;box-shadow:0 4px 12px rgba(16,24,40,.08);}
.global-user-search input{transition:border-color .15s,box-shadow .15s;background:rgba(248,250,252,.92);}
.global-user-search input:focus{border-color:#7c6cff!important;box-shadow:0 0 0 3px rgba(124,108,255,.10);background:#fff;}
.notifications-dropdown{border:1px solid #dbe3ec!important;border-radius:16px!important;box-shadow:0 18px 55px rgba(16,24,40,.16)!important;}
.notification-item{transition:background .15s ease,padding-left .15s ease;}
.notification-item:hover{background:#f7f9fc;padding-left:15px;}

/* v13: let the page continue scrolling when the pointer reaches the edge of the comments scroller. */
.comments-list{overscroll-behavior:auto;scrollbar-gutter:stable;}
.comment-reaction-main.reacted{font-weight:700;color:#1877f2;background:#eef6ff!important;border-radius:999px!important}
.reaction-self{font-weight:700}

/* v13.8 — click-to-open social reactions, no hover dependency. */
.reaction-wrap,.comment-reaction-wrap{position:relative;display:inline-flex;align-items:center;max-width:100%;}
.reaction-picker,.comment-reaction-picker{display:none;position:fixed;z-index:210000;box-sizing:border-box;width:320px;max-width:calc(100vw - 20px);padding:7px;background:#fff;border:1px solid #dfe4ec;border-radius:14px;box-shadow:0 10px 28px rgba(16,24,40,.18);gap:3px;grid-template-columns:repeat(5,minmax(0,1fr));flex-wrap:wrap;overflow:hidden;white-space:normal;}
.reaction-wrap.is-open .reaction-picker,.comment-reaction-wrap.is-open .comment-reaction-picker{display:grid;}
.reaction-picker button,.comment-reaction-picker button{border:0;background:transparent;width:auto;height:40px;min-width:0;min-height:40px;padding:0;margin:0;border-radius:9px;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.reaction-picker button:hover,.comment-reaction-picker button:hover{background:#f2f4f7;}
.reaction-main,.comment-reaction-main{touch-action:manipulation;}
@media(max-width:520px){
  .reaction-picker,.comment-reaction-picker{width:min(320px,calc(100vw - 16px));max-width:calc(100vw - 16px);padding:6px;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;}
  .reaction-picker button,.comment-reaction-picker button{height:42px;min-height:42px;font-size:24px;}
}
/* v13.9 — reaction picker is click-only; hover never opens/closes it. Position is
   calculated from the trigger in JS so the full grid remains inside the viewport. */
.reaction-wrap:hover .reaction-picker,.comment-reaction-wrap:hover .comment-reaction-picker{display:none;}
.reaction-wrap.is-open:hover .reaction-picker,.comment-reaction-wrap.is-open:hover .comment-reaction-picker{display:grid;}

/* v13.9 — mobile notification/post viewer follows the real visual viewport when
   the software keyboard is open, preventing the composer from being covered. */
:root{--app-visual-vh:100vh;}
@supports (height:100dvh){:root{--app-visual-vh:100dvh;}}
@media(max-width:760px){
  .post-lightbox{height:var(--app-visual-vh);min-height:0;}
  .post-lightbox .lightbox-shell{height:100%;min-height:0;}
  .post-lightbox .lightbox-post-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;}
  .post-lightbox.keyboard-open .lightbox-post-panel{padding-bottom:4px;}
  .lightbox-post-panel .comment-form,.lightbox-post-panel .inline-reply-form{scroll-margin-bottom:18px;}
  .lightbox-post-panel textarea{scroll-margin-bottom:28px;}
}
@media(max-width:430px){
  .reaction-picker,.comment-reaction-picker{width:calc(100vw - 16px);max-width:calc(100vw - 16px);grid-template-columns:repeat(5,minmax(0,1fr));}
}

/*
 * v77 — FULLSCREEN VIDEO/REELS PICKER STACK FIX.
 *
 * Both comment emoji and comment reaction pickers are portaled to <body>.
 * Reels uses z-index: 2147483640, so the older portal values placed the
 * pickers UNDER the fullscreen video layer. Keep them above Reels while
 * leaving the app's absolute-priority system modals above them.
 */
.comment-emoji-picker.is-floating,
.comment-emoji-picker[style*="position: fixed"]{
    z-index:2147483646!important;
}
.reaction-picker.is-floating,
.comment-reaction-picker.is-floating,
.reaction-picker[style*="position: fixed"],
.comment-reaction-picker[style*="position: fixed"]{
    z-index:2147483646!important;
}

/* v13.10 — social reaction picker portal UX. The picker is temporarily moved
   to <body> while open so post/comment containers can never clip it. */
.reaction-picker,.comment-reaction-picker{
  position:fixed!important;
  z-index:2147483000!important;
  box-sizing:border-box!important;
  width:320px!important;
  max-width:calc(100vw - 16px)!important;
  min-width:0!important;
  display:none;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:42px;
  gap:3px;
  padding:7px!important;
  overflow:visible!important;
  white-space:normal!important;
  transform:none!important;
}
.reaction-wrap.is-open .reaction-picker,.comment-reaction-wrap.is-open .comment-reaction-picker{display:grid!important;}
.reaction-picker button,.comment-reaction-picker button{
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  font-size:24px!important;
  line-height:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:10px!important;
}
.reaction-picker button:hover,.comment-reaction-picker button:hover{background:#f2f4f7!important;}
.reaction-picker button:active,.comment-reaction-picker button:active{transform:scale(.94);}
/* Never let a hover state control visibility. */
.reaction-wrap:hover .reaction-picker,.comment-reaction-wrap:hover .comment-reaction-picker{display:none!important;}
.reaction-wrap.is-open .reaction-picker,.comment-reaction-wrap.is-open .comment-reaction-picker{display:grid!important;}

@media(max-width:520px){
  .reaction-picker,.comment-reaction-picker{
    width:min(304px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-auto-rows:40px;
    gap:2px;
    padding:6px!important;
  }
  .reaction-picker button,.comment-reaction-picker button{height:40px!important;font-size:23px!important;}
}

/* v13.10 — notification -> post lightbox -> comment/reply mobile flow.
   When the keyboard opens, turn the viewer into a focused comment surface so
   the editor and the conversation stay visible above the keyboard. */
:root{--app-visual-vh:100vh;--app-visual-vw:100vw;}
@media(max-width:760px){
  .post-lightbox{height:var(--app-visual-vh)!important;min-height:0!important;align-items:stretch!important;}
  .post-lightbox .lightbox-shell{height:100%!important;max-height:100%!important;min-height:0!important;}
  .post-lightbox .lightbox-post-panel{min-height:0!important;overflow-y:auto!important;overscroll-behavior:auto!important;}
  .post-lightbox.keyboard-open .lightbox-shell{height:100%!important;}
  .post-lightbox.keyboard-open .lightbox-media-column{flex:0 0 30vh;min-height:150px;max-height:30vh;}
  .post-lightbox.keyboard-open .lightbox-media-stage{padding:34px 28px 10px;}
  .post-lightbox.keyboard-open .lightbox-post-panel{flex:1 1 auto;min-height:0!important;}
  .post-lightbox.keyboard-open .lightbox-post-panel .comments-list{max-height:none!important;height:auto;min-height:160px;overflow-y:auto!important;}
  .post-lightbox.keyboard-open .lightbox-post-panel .comment-form{position:sticky!important;bottom:0!important;z-index:100!important;}
  .post-lightbox.keyboard-open .lightbox-post-panel .inline-reply-form{scroll-margin-bottom:80px;}
  .post-lightbox.keyboard-open .lightbox-post-panel textarea{scroll-margin-bottom:90px;}
}

/* v13.11 — in-page notification post detail (no lightbox, no full refresh). */
.post-detail-view{max-width:920px;margin:0 auto;padding:18px 14px 48px;box-sizing:border-box;min-height:calc(var(--social-visible-vh, 100vh) - 76px)}
.post-detail-view[hidden]{display:none!important}
.post-detail-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0 12px;background:linear-gradient(#fff 82%,rgba(255,255,255,0));}
.post-detail-head strong{font-size:17px;color:#1d2939}.post-detail-head>span{flex:1}
.post-detail-back{width:40px;height:40px;border:1px solid #dbe2ea;border-radius:12px;background:#fff;color:#344054;font-size:23px;line-height:1;cursor:pointer;box-shadow:0 3px 12px rgba(16,24,40,.07)}
.post-detail-view>.post-card{width:min(920px,calc(100vw - 28px));max-width:920px;margin:0 auto;box-shadow:0 5px 26px rgba(16,24,40,.08)}
.post-detail-view>.post-card .post-gallery{max-width:100%;max-height:620px;overflow:hidden}
.post-detail-view>.post-card .post-gallery img,.post-detail-view>.post-card .post-gallery video{max-width:100%;max-height:620px;object-fit:contain}
.post-detail-view>.post-card .shared-post-media{max-width:100%;overflow:hidden}
.post-detail-view .comments-area{max-height:none!important;overflow:visible!important;border-top:1px solid #eef1f5}
.post-detail-view .comments-list{max-height:calc(100vh - 330px);min-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:auto}
.post-detail-view .comment-form{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid #e8edf3;padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-top:0}
.post-detail-view .comment-form .comment-input-wrap{min-width:0;flex:1}.post-detail-view .comment-form textarea{min-height:42px}
.post-detail-loading,.post-detail-error{max-width:760px;margin:80px auto;padding:30px;text-align:center;color:#667085;background:#fff;border:1px solid #e4e7ec;border-radius:16px;box-shadow:0 4px 18px rgba(16,24,40,.06)}
.post-detail-error{display:flex;flex-direction:column;gap:14px;align-items:center}.post-detail-error button{border:1px solid #d0d5dd;background:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:700}
.notification-target-comment{outline:3px solid rgba(22,119,239,.22);box-shadow:0 0 0 5px rgba(22,119,239,.08);border-radius:12px;animation:notificationCommentPulse 1.8s ease 1}
@keyframes notificationCommentPulse{0%{background:#eaf3ff}100%{background:transparent}}
body.post-detail-open{overflow-x:hidden}
@media(max-width:700px){
  .post-detail-view{padding:6px 8px 18px;min-height:calc(var(--social-visible-vh, 100dvh) - 58px)}
  .post-detail-head{padding:4px 0 8px;min-height:46px}
  .post-detail-view>.post-card{border-radius:12px}
  .post-detail-view .comments-list{max-height:calc(var(--social-visible-vh, 100dvh) - 300px);min-height:180px}
  .post-detail-view .comment-form{position:sticky;bottom:0;padding:8px 2px calc(8px + env(safe-area-inset-bottom));}
  .post-detail-view .comment-form textarea{font-size:16px;max-height:112px}
}

/* ========================================================================
   SocialApp 2026 — polished product layer
   ------------------------------------------------------------------------
   The rules below are intentionally additive. Existing feature selectors
   continue to work, while this layer gives the whole product one visual
   language and a consistent mobile-first interaction model.
   ======================================================================== */
:root {
    --sa-bg: #f4f7fb;
    --sa-surface: rgba(255,255,255,.96);
    --sa-surface-solid: #fff;
    --sa-text: #152033;
    --sa-muted: #667085;
    --sa-border: #e4e9f0;
    --sa-border-strong: #d6dde8;
    --sa-primary: #3568f5;
    --sa-primary-2: #5b4df6;
    --sa-primary-soft: #eef3ff;
    --sa-success: #16845a;
    --sa-danger: #d92d20;
    --sa-warning: #b54708;
    --sa-shadow-sm: 0 2px 10px rgba(16,24,40,.045);
    --sa-shadow-md: 0 10px 30px rgba(16,24,40,.075);
    --sa-shadow-lg: 0 22px 70px rgba(16,24,40,.14);
    --sa-radius-sm: 10px;
    --sa-radius: 16px;
    --sa-radius-lg: 22px;
    --sa-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at 5% -10%, rgba(91,77,246,.08), transparent 28rem),
        radial-gradient(circle at 95% 0%, rgba(53,104,245,.08), transparent 25rem),
        var(--sa-bg);
    color: var(--sa-text);
}
body.social-keyboard-open { overflow-x: hidden; }

main {
    padding-bottom: max(48px, calc(48px + var(--sa-safe-bottom)));
}

.site-header {
    background: rgba(255,255,255,.82) !important;
    border-bottom-color: rgba(214,221,232,.78) !important;
    box-shadow: 0 1px 0 rgba(16,24,40,.03), 0 8px 28px rgba(16,24,40,.045) !important;
}
.nav-container { min-height: 68px; gap: 14px; }
.logo a {
    font-size: 21px;
    font-weight: 850;
    letter-spacing: -.035em;
    background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.global-user-search { position: relative; flex: 1 1 360px; max-width: 430px; }
.global-search-form { position: relative; }
.global-search-form input {
    min-height: 42px;
    border: 1px solid var(--sa-border) !important;
    border-radius: 14px !important;
    padding: 0 42px 0 14px !important;
    background: #f7f9fc !important;
    color: var(--sa-text);
    outline: none;
}
.global-search-form > button:first-of-type {
    position: absolute;
    right: 6px;
    top: 5px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #667085;
    cursor: pointer;
}
.global-search-results {
    top: calc(100% + 8px) !important;
    border: 1px solid var(--sa-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--sa-shadow-lg) !important;
    overflow: hidden;
    background: #fff;
}
.global-search-item { padding: 11px 13px !important; }
.global-search-item:hover { background: #f7f9fd !important; }
.global-search-avatar { width: 42px !important; height: 42px !important; border-radius: 13px !important; }

.language-bar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--sa-border);
    border-radius: 11px;
    background: #f8fafc;
}
.language-bar button {
    min-width: 32px;
    height: 29px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.language-bar button.active { background: #fff; color: var(--sa-primary); box-shadow: 0 2px 7px rgba(16,24,40,.07); }

.nav-list { gap: 4px; }
.nav-list > li > a:not(.btn), .main-nav .icon-nav-link {
    min-width: 42px;
    min-height: 42px;
    justify-content: center;
    border-radius: 13px !important;
}
.nav-list > li > a:not(.btn):hover, .main-nav .icon-nav-link:hover {
    color: var(--sa-primary) !important;
    background: var(--sa-primary-soft) !important;
    box-shadow: none !important;
    transform: none !important;
}
.nav-list .profile-nav-link { padding: 3px !important; }
.header-avatar, .header-avatar img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
}
.header-avatar { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: #eef3ff; }
.notif-badge, .mobile-bottom-nav__badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 9px;
    line-height: 14px;
    font-weight: 850;
    box-shadow: 0 3px 8px rgba(229,57,53,.25);
}

.btn {
    min-height: 40px;
    border-radius: 12px;
    padding: 9px 15px;
    font-weight: 750;
    box-shadow: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--sa-primary), var(--sa-primary-2));
    box-shadow: 0 6px 16px rgba(53,104,245,.18);
}
.btn-primary:hover { filter: brightness(1.03); box-shadow: 0 8px 20px rgba(53,104,245,.22); }
.btn-light { background: #f7f9fc; border: 1px solid var(--sa-border); color: #344054; }
.btn-danger { background: #fff1f0; color: var(--sa-danger) !important; border: 1px solid #ffd3cf; }

.page-container, .feed-container, .friends-page, .search-page, .apps-page, .profile-modern, .profile-settings-page, .chat-page-container {
    max-width: 1120px;
}
.feed-container { margin-left: auto; margin-right: auto; }

.card, .post-card, .composer-card, .settings-card, .apps-hero, .app-card, .friend-card, .search-profile-card, .about-card, .profile-hero, .profile-content-section {
    border-color: var(--sa-border) !important;
    box-shadow: var(--sa-shadow-sm) !important;
}
.post-card, .composer-card, .settings-card, .app-card, .friend-card, .search-profile-card, .about-card {
    border-radius: var(--sa-radius) !important;
}
.post-card:hover, .friend-card:hover, .search-profile-card:hover, .app-card:hover { box-shadow: var(--sa-shadow-md) !important; }

.form-control, input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    border-color: var(--sa-border-strong) !important;
    border-radius: 12px;
    background: #fff;
}
.form-control:focus, input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
    border-color: rgba(53,104,245,.7) !important;
    box-shadow: 0 0 0 4px rgba(53,104,245,.10) !important;
    outline: none;
}

.auth-card {
    width: min(460px, calc(100vw - 32px));
    margin: 38px auto;
    padding: 28px;
    border: 1px solid var(--sa-border) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: var(--sa-shadow-lg) !important;
}
.auth-card h2 { letter-spacing: -.02em; }

/* Messenger shell */
.messenger-dropdown {
    width: min(380px, calc(100vw - 24px)) !important;
    border: 1px solid var(--sa-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--sa-shadow-lg) !important;
    overflow: hidden;
    background: rgba(255,255,255,.98) !important;
}
.messenger-dropdown > div:first-child {
    padding: 12px 14px !important;
    background: linear-gradient(180deg,#fff,#f8faff) !important;
    border-bottom: 1px solid var(--sa-border) !important;
}
#messengerSearchInput { width: 150px !important; min-height: 34px; border-radius: 10px !important; background: #fff !important; }
.messenger-person-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 68px;
    padding: 9px 13px;
    border: 0;
    border-bottom: 1px solid #f0f2f6;
    background: #fff;
    color: var(--sa-text);
    text-align: left;
    cursor: pointer;
}
.messenger-person-row:hover, .messenger-person-row:focus-visible { background: #f7f9fd; outline: none; }
.messenger-person-row.unread { background: #f5f8ff; }
.messenger-list-avatar {
    width: 43px; height: 43px; flex: 0 0 43px; display:flex; align-items:center; justify-content:center;
    border-radius: 14px; overflow:hidden; background:#edf2ff; color:var(--sa-primary); font-weight:850;
}
.messenger-list-avatar img { width:100%; height:100%; object-fit:cover; }
.messenger-person-copy { min-width:0; flex:1; }
.messenger-person-copy strong, .messenger-person-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.messenger-person-copy strong { font-size:13px; }
.messenger-person-copy small { margin-top:3px; color:#667085; font-size:11px; }
.messenger-unread-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--sa-primary); box-shadow:0 0 0 4px #e8efff; }

/* Mobile bottom navigation */
.mobile-bottom-nav {
    display: none;
}

/* Tables/forms on admin pages stay usable on narrow screens. */
.admin-translation-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Touch and accessibility */
button, a, input, textarea, select { touch-action: manipulation; }
:focus-visible { outline: 3px solid rgba(53,104,245,.28); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 900px) {
    .language-bar { display:none; }
    .nav-container { gap: 8px; }
    .global-user-search { max-width: 330px; }
    .main-nav .apps-nav-link, .main-nav .admin-nav-link { display:none !important; }
    .profile-settings-grid, .profile-about-grid { grid-template-columns: 1fr !important; }
    .apps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .search-results-grid, .profile-friends-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
    main { padding-left: 9px; padding-right: 9px; padding-bottom: calc(88px + var(--sa-safe-bottom)); }
    .container { padding-left: 10px; padding-right: 10px; }
    .site-header { z-index: 10000; }
    .nav-container { min-height: 60px; }
    .logo a { font-size: 19px; }
    .main-nav { margin-left:auto; }
    .main-nav .friends-nav-item, .main-nav .notifications-nav-item, .main-nav .messenger-nav-item, .main-nav .profile-nav-link { display:none !important; }
    .main-nav .nav-list > li:has(.apps-nav-link), .main-nav .nav-list > li:has(.admin-nav-link) { display:none !important; }
    .global-user-search { position: fixed; inset: 0; z-index: 10020; display:none; max-width:none; padding:10px; background:rgba(15,23,42,.36); backdrop-filter:blur(6px); }
    .global-user-search.is-mobile-open { display:block; }
    .global-search-form { margin-top:4px; background:#fff; padding:7px; border-radius:17px; box-shadow:var(--sa-shadow-lg); }
    .global-search-form input { min-height:46px; background:#f7f9fc !important; }
    .mobile-search-toggle { display:inline-flex !important; }
    .mobile-search-close { display:inline-flex !important; }
    .auth-card { margin:18px auto; padding:22px 18px; border-radius:20px !important; }
    .friends-hero, .apps-hero, .settings-page-head, .apps-hero { align-items:flex-start; flex-direction:column; }
    .apps-grid { grid-template-columns:1fr; }
    .settings-card .form-grid, .business-fields, .account-choice-grid { grid-template-columns:1fr !important; }
    .profile-cover { height:150px; }
    .profile-main { padding:0 14px 14px !important; margin-top:-42px; }
    .profile-avatar { width:88px; height:88px; }
    .profile-identity { min-width:0 !important; flex-basis:100% !important; }
    .profile-name-row h1 { font-size:22px !important; }
    .profile-actions { width:100%; }
    .profile-actions .btn { flex:1 1 auto; }
    .post-card, .composer-card { border-radius:14px !important; }
    .post-actions { gap:3px; }
    .post-action { min-height:40px; }
    .comments-list { max-height: none; }
    .messenger-dropdown { position: fixed !important; top: 62px !important; left: 8px !important; right: 8px !important; width:auto !important; max-width:none !important; border-radius:20px !important; }
    .notifications-dropdown { position:fixed !important; top:62px !important; left:8px !important; right:8px !important; width:auto !important; max-width:none !important; border-radius:20px !important; }
    .mobile-bottom-nav {
        position:fixed;
        left:0; right:0; bottom:0;
        z-index:10001;
        display:grid;
        /* Six equal actions: Home, Friends, New Post, Notifications, Chat, Profile. */
        grid-template-columns:repeat(6,1fr);
        gap:2px;
        padding:7px 6px calc(7px + var(--sa-safe-bottom));
        background:rgba(255,255,255,.94);
        border-top:1px solid rgba(214,221,232,.92);
        box-shadow:0 -8px 28px rgba(16,24,40,.08);
        backdrop-filter:blur(18px) saturate(150%);
    }
    .mobile-bottom-nav__item {
        position:relative;
        min-width:0;
        min-height:56px;
        padding:6px 2px;
        border:0;
        border-radius:14px;
        background:transparent;
        color:#667085;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        font-size:9px;
        font-weight:800;
        cursor:pointer;
    }
    .mobile-bottom-nav__item:hover, .mobile-bottom-nav__item.is-active { background:var(--sa-primary-soft); color:var(--sa-primary); }

    /*
       The New Post action is a normal bottom-nav item rather than a floating
       button. It is therefore always visible at the same place as the other
       mobile actions and cannot disappear while scrolling.
    */
    .mobile-bottom-nav__compose {
        color:#1877f2;
        background:#eef5ff;
    }
    .mobile-bottom-nav__compose .mobile-bottom-nav__icon {
        width:29px;
        height:29px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background:#1877f2;
        color:#fff;
        font-size:24px;
        line-height:1;
        font-weight:500;
    }
    .mobile-bottom-nav__compose:active { transform:scale(.96); }
    .mobile-bottom-nav__icon { font-size:22px; line-height:1; font-weight:500; }
    .mobile-bottom-nav__badge { position:absolute; top:2px; right:calc(50% - 20px); border-width:2px; z-index:2; }
    .mobile-bottom-nav__item.mobile-nav-unread .mobile-bottom-nav__icon { filter:drop-shadow(0 0 5px rgba(229,57,53,.8)); }
    .mobile-bottom-nav__badge[hidden] { display:none; }
}

@media (min-width: 701px) {
    .mobile-search-toggle, .mobile-search-close { display:none !important; }
}

@media (max-width: 420px) {
    .logo a { font-size:18px; }
    .nav-container { min-height:57px; }
    main { padding-left:6px; padding-right:6px; }
    .profile-actions .btn { padding-left:10px; padding-right:10px; font-size:12px; }
    .mobile-bottom-nav__item { min-height:54px; font-size:8px; }
    .mobile-bottom-nav__icon { font-size:20px; }
    .mobile-bottom-nav__compose .mobile-bottom-nav__icon { width:27px; height:27px; font-size:22px; }
}


/* ========================================================================
   SocialApp polish v2026-10-06b — focused reading width + unified mobile UX
   ------------------------------------------------------------------------
   Large displays should not stretch social posts across the whole viewport.
   The feed remains fluid on tablets/phones, while desktop gets a comfortable
   reading width that keeps text, media and comments visually grouped.
   ======================================================================== */
@media (min-width: 1101px) {
  .feed-container { max-width: 900px !important; }
  .feed-container > .post-card,
  .feed-container > .composer-card { max-width: 860px; margin-left:auto; margin-right:auto; }
}
@media (min-width: 1500px) {
  .feed-container { max-width: 920px !important; }
  .feed-container > .post-card,
  .feed-container > .composer-card { max-width: 880px; }
}

/* Compact comment composer: the send action is an icon, not a text button. */
.comment-form,
.inline-reply-form { align-items:flex-end; }
.comment-send-btn {
  flex:0 0 42px;
  width:42px;
  height:42px;
  min-width:42px;
  border:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#1877f2,#3b82f6);
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(24,119,242,.22);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.comment-send-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(24,119,242,.28); }
.comment-send-btn:active { transform:translateY(0); }
.comment-send-btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.inline-reply-form .inline-reply-cancel { min-height:38px; border-radius:10px; }

/* Unified post media presentation. Videos are visually actionable instead of
   looking like a passive thumbnail. */
.post-gallery .media-video-tile,
.shared-post-media video,
.public-post-media video { cursor:pointer; }
.post-gallery .media-video-tile::after {
  content:'▶';
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.72);
  color:#fff; font-size:19px; padding-left:2px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  pointer-events:none;
  transition:transform .16s ease, background .16s ease;
}
.post-gallery .media-video-tile:hover::after { transform:translate(-50%,-50%) scale(1.06); background:rgba(24,119,242,.88); }
.post-gallery .media-video-tile[data-playing-preview="1"]::after { content:'❚❚'; font-size:15px; }

/* Lightbox: media-first, scrollable post panel, safe-area aware. */
.post-lightbox { overscroll-behavior:contain; }
.lightbox-shell { max-width:1320px; grid-template-columns:minmax(0,1.7fr) minmax(340px,.78fr); }
.lightbox-media-stage { touch-action:pinch-zoom; }
.lightbox-media-stage img,
.lightbox-media-stage video { max-width:100%; max-height:calc(100% - 10px); }
.lightbox-media-stage video { cursor:pointer; }
.lightbox-post-panel { overscroll-behavior:contain; }

/* Public/shared post view uses the same visual width and media rules. */
.public-post-shell { max-width:880px !important; }
.public-post-card { max-width:860px; margin:0 auto; }

/* Mobile Messenger: it must sit ABOVE the bottom navigation and behave like a
   focused chat surface rather than an off-screen desktop popup. */
@media (max-width:760px) {
  #multiChatContainer {
    left:8px !important;
    right:8px !important;
    bottom:calc(74px + env(safe-area-inset-bottom)) !important;
    z-index:10040 !important;
    display:flex !important;
    justify-content:center;
    overflow:visible !important;
    padding:0 !important;
  }
  .floating-chat-box {
    width:100% !important;
    min-width:0 !important;
    max-width:520px !important;
    height:min(70vh,620px) !important;
    max-height:calc(var(--app-visual-vh,100vh) - 92px) !important;
    border-radius:20px !important;
    box-shadow:0 20px 55px rgba(16,24,40,.28) !important;
  }
  .floating-chat-box.chat-minimized { height:52px !important; }
  .chat-popup-header { min-height:52px !important; border-radius:19px 19px 0 0 !important; }
  .chat-popup-body { padding:12px !important; }
  .chat-popup-footer { padding:8px !important; padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important; }
  .chat-popup-footer textarea,
  .chat-popup-footer input[type="text"] { font-size:16px !important; }
  .chat-send-btn { width:38px !important; height:38px !important; }
}

/* Mobile notification/Messenger panels open above bottom navigation as a
   bottom sheet. This makes the navigation action visibly lead somewhere. */
@media (max-width:700px) {
  .notifications-dropdown,
  .messenger-dropdown {
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(76px + env(safe-area-inset-bottom)) !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(68vh,620px) !important;
    border-radius:22px !important;
    box-shadow:0 22px 70px rgba(16,24,40,.25) !important;
    z-index:10030 !important;
    overflow:hidden !important;
  }
  .notifications-dropdown::before,
  .messenger-dropdown::before {
    content:'';
    display:block;
    width:42px;
    height:4px;
    margin:8px auto 0;
    border-radius:99px;
    background:#d0d5dd;
  }
  .notifications-dropdown #notificationsList,
  .messenger-dropdown > div:last-child { max-height:calc(68vh - 70px) !important; }
  .messenger-dropdown > div:first-child { padding:10px 12px 12px !important; background:#fff !important; }
  .messenger-dropdown input { min-height:40px !important; font-size:16px !important; }
}

/* Keyboard-safe post detail/lightbox. */
@media (max-width:760px) {
  /* Comment/reply mode turns the mobile post viewer into a focused discussion
     surface. The photo/video is intentionally folded away while typing so
     the composer, the reply target and the surrounding comments remain visible. */
  .post-lightbox.mobile-comment-mode .lightbox-shell {
    display:flex !important;
    flex-direction:column !important;
  }
  .post-lightbox.mobile-comment-mode .lightbox-media-column {
    display:none !important;
  }
  .post-lightbox.mobile-comment-mode .lightbox-post-panel {
    flex:1 1 auto !important;
    width:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
  .post-lightbox.mobile-comment-mode .lightbox-post-panel .comments-area {
    min-height:calc(var(--app-visual-vh,100dvh) - 76px);
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .post-lightbox.mobile-comment-mode .lightbox-post-panel .comments-list {
    max-height:none !important;
    overflow:visible !important;
  }
  .post-lightbox.mobile-comment-mode .lightbox-post-panel .comment-form {
    position:sticky !important;
    bottom:0 !important;
    z-index:120 !important;
    background:#fff !important;
    box-shadow:0 -8px 24px rgba(16,24,40,.08);
  }

  .post-detail-view.mobile-comment-mode .post-gallery,
  .post-detail-view.mobile-comment-mode .shared-post-media {
    display:none !important;
  }
  .post-detail-view.mobile-comment-mode .post-card {
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .post-detail-view.mobile-comment-mode .comments-area {
    min-height:calc(var(--app-visual-vh,100dvh) - 72px);
  }
  .post-detail-view.mobile-comment-mode .comments-list {
    max-height:none !important;
    overflow:visible !important;
  }
  .post-detail-view.mobile-comment-mode .comment-form {
    position:sticky !important;
    bottom:0 !important;
    z-index:120 !important;
    background:#fff !important;
    box-shadow:0 -8px 24px rgba(16,24,40,.08);
  }

  .post-detail-view { padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
  .post-detail-view .comment-form { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .post-detail-view .comments-list { max-height:none !important; min-height:120px; }
  .post-lightbox .lightbox-shell { height:var(--app-visual-vh,100dvh) !important; }
  .post-lightbox .lightbox-media-column { flex:0 0 42vh !important; min-height:210px !important; max-height:48vh !important; }
  .post-lightbox .lightbox-post-panel { flex:1 1 auto !important; min-height:0 !important; }
  .post-lightbox .lightbox-post-panel .comments-list { max-height:none !important; min-height:120px; }
  .post-lightbox.keyboard-open .lightbox-media-column { flex:0 0 24vh !important; min-height:110px !important; max-height:24vh !important; }
  .post-lightbox.keyboard-open .lightbox-media-stage { padding-top:34px !important; }
  .post-lightbox.keyboard-open .lightbox-post-panel { padding-bottom:env(safe-area-inset-bottom); }
  .lightbox-post-panel .comment-form { padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important; }
  .lightbox-post-panel textarea,
  .post-detail-view textarea { font-size:16px !important; }
}
@media (max-width:430px) {
  .comment-send-btn { flex-basis:40px; width:40px; min-width:40px; height:40px; }
  .post-lightbox .lightbox-media-column { flex-basis:38vh !important; }
  .post-lightbox.keyboard-open .lightbox-media-column { flex-basis:21vh !important; }
}


@media(max-width:700px){
  .public-media-lightbox{height:var(--social-visible-vh,100dvh);box-sizing:border-box;padding:12px!important;}
  .public-media-lightbox img,.public-media-lightbox video{max-width:96vw!important;max-height:calc(var(--social-visible-vh,100dvh) - 86px)!important;}
  .public-media-lightbox .lb-close{right:10px;top:10px;width:42px;height:42px;z-index:2;}
}

/* Mobile interaction hardening — 2026-10-06 */
.mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.24);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9990;
    touch-action: manipulation;
}
.mobile-sheet-backdrop[hidden] { display:none !important; }
@media (max-width:700px) {
    .mobile-bottom-nav { z-index:10040 !important; pointer-events:auto !important; isolation:isolate; }
    .mobile-bottom-nav__item {
        z-index:10041; pointer-events:auto !important;
        -webkit-tap-highlight-color:transparent; touch-action:manipulation;
        user-select:none; -webkit-user-select:none;
    }
    .notifications-dropdown, .messenger-dropdown { z-index:10030 !important; }
    body.social-sheet-open { overflow:hidden; overscroll-behavior:none; }
}

/* v14.0 — mobile sheets are portaled to <body> to escape sticky-header stacking contexts. */
@media (max-width:700px) {
  body.social-sheet-open .notifications-dropdown,
  body.social-sheet-open .messenger-dropdown {
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(76px + env(safe-area-inset-bottom)) !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:min(68vh,620px) !important;
    display:block !important;
    z-index:2147483001 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }
  body.social-sheet-open .messenger-dropdown { display:flex !important; flex-direction:column !important; }
  body.social-sheet-open .notifications-dropdown { display:block !important; }
  .mobile-sheet-backdrop { z-index:2147483000 !important; }
  .mobile-bottom-nav { z-index:2147483002 !important; }
}

/* Reply composer disappears immediately after a successful send. */
.inline-reply-optimistic { margin-top:8px; }

/* v31: consistent avatar treatment for @mention suggestions inside edit forms. */
.mention-suggestion-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#eaf2ff;color:#1877f2;font-weight:800}
.mention-suggestion-avatar img{width:100%;height:100%;object-fit:cover}
.profile-edit-mention-suggestions{position:relative;z-index:12000}
@media (max-width:640px){
  .post-edit-mention-suggestions,.profile-edit-mention-suggestions{width:min(340px,calc(100vw - 16px))!important;max-height:210px!important}
  .mention-suggestion{min-height:48px;padding:8px 10px}
}

/* v53 — mobile edit/mention/report/post-menu ergonomics */
.post-detail-view > .post-card{overflow:visible !important;}
.post-detail-view .post-more-wrap{position:relative;z-index:500;}
.post-detail-view .post-more-menu{z-index:1000 !important;}
@media(max-width:700px){
  .post-detail-view .post-more-menu{position:fixed !important;right:10px !important;top:auto !important;max-width:calc(100vw - 20px);min-width:min(250px,calc(100vw - 20px));z-index:2147483500 !important;}
  .social-report-modal{align-items:flex-end !important;padding:8px !important;height:var(--social-visible-vh,100dvh) !important;max-height:var(--social-visible-vh,100dvh) !important;box-sizing:border-box;overflow:hidden;}
  .social-report-dialog{width:100% !important;max-width:560px !important;max-height:calc(var(--social-visible-vh,100dvh) - 16px) !important;height:auto !important;display:flex !important;flex-direction:column !important;box-sizing:border-box;padding:16px !important;overflow:hidden !important;}
  .social-report-dialog form{display:flex !important;flex-direction:column !important;min-height:0 !important;overflow:hidden !important;}
  .social-report-dialog form label{flex:0 0 auto;}
  .social-report-dialog form textarea{max-height:28vh !important;min-height:74px;}
  .social-report-actions{position:sticky !important;bottom:0 !important;flex:0 0 auto !important;padding-top:10px !important;padding-bottom:calc(4px + env(safe-area-inset-bottom)) !important;margin-top:8px !important;background:#fff !important;z-index:3;}
  .social-report-actions button{min-height:44px !important;}
}

/* ========================================================================
   SocialApp v12 — mobile Post menu + Report dialog hardening
   ------------------------------------------------------------------------
   Mobile post menus are portaled to <body> by home.php/post.php so they are
   not clipped by .post-card's paint containment. The rules below keep the
   menu compact and make the report dialog the highest interactive surface.
   ======================================================================== */
@media (max-width:700px){
  .post-more-menu[data-social-portaled="1"]{
    position:fixed !important;
    margin:0 !important;
    z-index:2147483500 !important;
    max-height:calc(var(--social-visible-vh,100dvh) - 20px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  /* While reporting, the bottom navigation must never sit above the modal's
     submit/cancel controls. The report dialog owns the complete mobile view. */
  body.social-report-open .mobile-bottom-nav{
    display:none !important;
    pointer-events:none !important;
  }
  body.social-report-open .social-report-modal{
    z-index:2147483600 !important;
  }
  body.social-report-open{
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  .social-report-modal{
    align-items:flex-end !important;
    justify-content:center !important;
    padding:8px !important;
    height:var(--social-visible-vh,100dvh) !important;
    max-height:var(--social-visible-vh,100dvh) !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .social-report-dialog{
    width:100% !important;
    max-width:560px !important;
    max-height:calc(var(--social-visible-vh,100dvh) - 16px) !important;
    min-height:0 !important;
    padding:16px !important;
    border-radius:20px 20px 12px 12px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .social-report-dialog form{
    min-height:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:0 !important;
  }
  .social-report-dialog textarea{
    min-height:74px !important;
    max-height:24vh !important;
    resize:vertical;
  }
  .social-report-actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:5 !important;
    flex:0 0 auto !important;
    margin-top:10px !important;
    padding:10px 0 calc(4px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff !important;
    border-top:1px solid #eef1f5 !important;
  }
  .social-report-actions button{
    min-height:46px !important;
    flex:1 1 0;
  }
}

/* =========================================================
   SocialApp Web Push permission prompt
   ========================================================= */
.social-push-prompt{position:fixed;right:18px;bottom:22px;width:min(440px,calc(100vw - 28px));display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;gap:4px 10px;padding:14px 14px 13px;background:rgba(255,255,255,.97);border:1px solid #dbe2ee;border-radius:18px;box-shadow:0 18px 55px rgba(15,23,42,.20);backdrop-filter:blur(14px);z-index:2147483600}.social-push-prompt__icon{grid-row:1/3;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#eef3ff;font-size:21px}.social-push-prompt__copy{min-width:0;display:flex;flex-direction:column;gap:3px;padding-right:22px}.social-push-prompt__copy strong{font-size:14px;line-height:1.25;color:#172033}.social-push-prompt__copy span{font-size:12px;line-height:1.4;color:#667085}.social-push-prompt__enable{grid-column:2/4;justify-self:end;border:0;border-radius:11px;padding:8px 14px;background:#4163f5;color:#fff;font-weight:700;cursor:pointer}.social-push-prompt__enable:disabled{opacity:.65;cursor:wait}.social-push-prompt__close{position:absolute;right:8px;top:7px;border:0;background:transparent;color:#667085;font-size:20px;line-height:1;cursor:pointer}.social-push-prompt.is-success{border-color:#b9e6d2}.social-push-prompt.is-success .social-push-prompt__enable{background:#169b62}@media(max-width:600px){.social-push-prompt{left:10px;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto;grid-template-columns:40px 1fr;grid-template-rows:auto auto}.social-push-prompt__icon{width:40px;height:40px}.social-push-prompt__enable{grid-column:2;justify-self:stretch}.social-push-prompt__copy{padding-right:18px}}

/* ========================================================================
   v22 — mobile composer clearance + centered mobile branding
   ------------------------------------------------------------------------
   1) The fixed bottom navigation must never cover the Post Composer.
   2) On phones the SocialApp logo is kept clearly visible in the top header,
      centered between the left content area and the right-side controls.
   ======================================================================== */
@media (max-width:760px){
    /* Reserve the full bottom-nav area when the composer modal is open. */
    .compose-modal{
        padding:10px 8px calc(82px + var(--sa-safe-bottom));
        align-items:flex-end;
        overflow-y:auto;
    }

    /* Keep the entire composer card above the fixed bottom navigation. */
    .compose-modal-dialog{
        width:min(680px,100%);
        max-height:calc(100vh - 92px - var(--sa-safe-bottom));
        margin:0;
        border-radius:16px;
        overflow:auto;
    }

    /* On very short phones, leave a little extra breathing room above the nav. */
    @media (max-height:700px){
        .compose-modal{
            padding-bottom:calc(88px + var(--sa-safe-bottom));
        }
        .compose-modal-dialog{
            max-height:calc(100vh - 98px - var(--sa-safe-bottom));
        }
    }

    /* Make the site logo a clear mobile header brand instead of letting it
       compete with the search control. The search button remains available
       on the right and still opens the existing search overlay. */
    .site-header .nav-container{
        min-height:58px;
        position:relative;
    }
    .site-header .logo{
        /* Explicitly restore display on small phones where older CSS hid .logo. */
        display:block !important;
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        z-index:2;
        margin:0;
        pointer-events:auto;
        visibility:visible !important;
        opacity:1 !important;
    }
    .site-header .logo a{
        display:block;
        font-size:19px;
        line-height:1;
        white-space:nowrap;
    }
    .site-header .mobile-search-toggle{
        margin-left:auto;
        position:relative;
        z-index:3;
    }
}

@media (max-width:430px){
    .site-header .logo{display:block !important;visibility:visible !important;opacity:1 !important;}
    .site-header .logo a{font-size:18px;}
}

/* v23 — keep the SocialApp brand visible even on very narrow phones.
   An older max-width:380px rule hid .logo; this override intentionally wins. */
@media (max-width:380px){
    .site-header .logo{display:block !important;visibility:visible !important;opacity:1 !important;}
    .site-header .logo a{font-size:16px;line-height:1;display:block;white-space:nowrap;}
}


/* ========================================================================
   v24 — robust mobile header branding + clearer people/business search
   ------------------------------------------------------------------------
   The mobile brand is intentionally a separate element from the desktop
   .logo. This prevents legacy mobile rules or layout reflows from hiding
   the site name on narrow phones.
   ======================================================================== */
.mobile-site-brand{display:none;}

@media (max-width:760px){
    .site-header .nav-container{
        min-height:58px !important;
        position:relative !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        padding:0 10px !important;
        gap:8px !important;
    }

    /* Desktop logo is replaced by the dedicated mobile brand. */
    .site-header .logo{display:none !important;}

    /* Always show the SocialApp name in the visual center of the mobile header. */
    .site-header .mobile-site-brand{
        display:block !important;
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        transform:translate(-50%,-50%) !important;
        z-index:20 !important;
        margin:0 !important;
        padding:0 !important;
        line-height:1 !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
    }
    .site-header .mobile-site-brand a{
        display:block !important;
        white-space:nowrap !important;
        text-decoration:none !important;
        font-size:19px !important;
        line-height:1 !important;
        font-weight:850 !important;
        letter-spacing:-.035em !important;
        color:#4163f5 !important;
        -webkit-text-fill-color:#4163f5 !important;
    }

    /* The search trigger is deliberately more visible on phones. */
    .site-header .mobile-search-toggle{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        flex:0 0 44px !important;
        margin:0 !important;
        border:1px solid #d5dcf0 !important;
        border-radius:50% !important;
        background:#eef3ff !important;
        color:#263b8f !important;
        font-size:27px !important;
        font-weight:800 !important;
        line-height:1 !important;
        box-shadow:0 3px 12px rgba(65,99,245,.16) !important;
        -webkit-tap-highlight-color:transparent !important;
        position:relative !important;
        z-index:21 !important;
    }
    .site-header .mobile-search-toggle:active{
        transform:scale(.94);
        background:#e4ebff !important;
    }

    /* Keep the existing desktop navigation icons on the right without letting
       them overlap the centered brand. */
    .site-header .main-nav{
        margin-left:auto !important;
        position:relative !important;
        z-index:21 !important;
    }
}

@media (max-width:430px){
    .site-header .mobile-site-brand a{font-size:17px !important;}
    .site-header .mobile-search-toggle{
        width:43px !important;
        height:43px !important;
        min-width:43px !important;
        flex-basis:43px !important;
        font-size:26px !important;
    }
}

@media (max-width:380px){
    .site-header .mobile-site-brand a{font-size:16px !important;}
}

/* v26 — Global search autocomplete reliability on mobile/iOS. */
.global-search-results:not([hidden]) { display:block; }
.global-search-results { min-height:0; z-index:40002; }
.global-search-item { min-height:62px; }
@media(max-width:760px){
  .global-user-search.mobile-search-open #globalSearchResults:not([hidden]) { display:block!important; }
  .global-search-item { min-height:66px; padding:12px 14px !important; }
  .global-search-name strong { font-size:15px; }
  .global-search-type, .search-relation { font-size:12px; }
}


/* ========================================================================
   v27 — Search suggestions must remain visible on both desktop and mobile.
   The result list uses a high stacking layer because the mobile search is a
   fixed overlay and iOS Safari can create unexpected stacking contexts.
   ======================================================================== */
.global-user-search{position:relative;}
#globalSearchResults.global-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:420px;overflow:auto;background:#fff;border:1px solid #dfe4ef;border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.16);z-index:40050;}
@media(max-width:760px){
  .global-user-search.mobile-search-open #globalSearchResults.global-search-results{position:fixed!important;top:72px!important;left:10px!important;right:10px!important;width:auto!important;max-height:calc(100vh - 90px)!important;z-index:50000!important;}
  #globalSearchResults .global-search-item{display:flex!important;visibility:visible!important;opacity:1!important;}
}

/* ========================================================================
   v28 — Mobile search suggestions are anchored directly under the search box.
   ------------------------------------------------------------------------
   The previous mobile rule positioned the result list with viewport-fixed
   coordinates. On iOS Safari that could place the suggestions far away from
   the input, especially when the browser's dynamic toolbar changed the
   visual viewport. This override keeps the list inside the mobile search
   overlay, directly below the input, while still allowing the user to scroll
   through many matching people/businesses.
   ======================================================================== */
@media (max-width:760px){
    /* The search overlay itself becomes the positioning context. */
    .global-user-search.mobile-search-open{
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100dvh !important;
        min-height:100dvh !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)) !important;
    }

    /* Keep the input row at the very top of the search overlay. */
    .global-user-search.mobile-search-open .global-search-form{
        position:relative !important;
        z-index:2 !important;
        margin-top:0 !important;
    }

    /*
       IMPORTANT: use absolute positioning relative to the search overlay,
       not fixed positioning relative to the browser viewport. This prevents
       iOS Safari from moving the suggestions away from the input.
    */
    .global-user-search.mobile-search-open #globalSearchResults.global-search-results{
        position:absolute !important;
        top:calc(10px + 60px) !important;
        left:12px !important;
        right:12px !important;
        width:auto !important;
        max-height:calc(100dvh - 84px - env(safe-area-inset-bottom,0px)) !important;
        height:auto !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;
        background:#fff !important;
        border:1px solid #dfe4ef !important;
        border-radius:16px !important;
        box-shadow:0 14px 42px rgba(15,23,42,.20) !important;
        z-index:50000 !important;
    }

    /* Make each person/business easy to identify by avatar while scrolling. */
    .global-user-search.mobile-search-open #globalSearchResults .global-search-item{
        min-height:68px !important;
        display:flex !important;
        align-items:center !important;
        gap:12px !important;
        padding:10px 14px !important;
        box-sizing:border-box !important;
    }

    .global-user-search.mobile-search-open #globalSearchResults .global-search-avatar{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        flex:0 0 46px !important;
        border-radius:50% !important;
        overflow:hidden !important;
    }

    .global-user-search.mobile-search-open #globalSearchResults .global-search-avatar img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }

    .global-user-search.mobile-search-open #globalSearchResults .global-search-name{
        min-width:0 !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        gap:2px !important;
    }

    .global-user-search.mobile-search-open #globalSearchResults .global-search-name strong{
        font-size:15px !important;
        line-height:1.25 !important;
    }

    .global-user-search.mobile-search-open #globalSearchResults .global-search-type,
    .global-user-search.mobile-search-open #globalSearchResults .search-relation{
        font-size:12px !important;
        line-height:1.25 !important;
    }
}

/* On very short phone screens, keep the list scrollable but leave the search
   field and close button permanently visible above it. */
@media (max-width:760px) and (max-height:620px){
    .global-user-search.mobile-search-open #globalSearchResults.global-search-results{
        top:calc(10px + 60px) !important;
        max-height:calc(100dvh - 78px - env(safe-area-inset-bottom,0px)) !important;
    }
}

/* =========================================================
   v14.0 — Compact post context controls.
   Location and mood are optional one-tap actions; people are selected only by
   the normal @mention flow inside the post editor, which supports multiple users.
   ========================================================= */
.post-context-panel{position:relative;margin:8px 0 8px;padding:0;display:flex;align-items:center;gap:7px;min-height:36px;background:transparent;border:0}
.post-context-action{display:inline-flex;align-items:center;gap:5px;border:1px solid #dce3ee;background:#f8fafc;color:#526176;border-radius:999px;padding:7px 11px;font:600 12px/1.1 inherit;cursor:pointer;white-space:nowrap}
.post-context-action:hover{background:#eef3ff;border-color:#cbd6ef;color:#3e58b6}
.post-context-action:disabled{opacity:.6;cursor:wait}
.post-context-panel-compact .post-mood-popover,.post-context-panel-compact .post-location-popover{position:absolute;left:0;top:calc(100% + 6px);z-index:4000;background:#fff;border:1px solid #dce3ee;border-radius:12px;box-shadow:0 12px 30px rgba(25,38,65,.16);padding:8px}
.post-mood-popover{display:grid;grid-template-columns:repeat(6,34px);gap:4px}
.post-mood-popover[hidden],.post-location-popover[hidden]{display:none!important}
.post-mood-popover button{width:34px;height:34px;border:0;background:#f8fafc;border-radius:8px;font-size:19px;cursor:pointer}
.post-mood-popover button:hover,.post-mood-popover button.selected{background:#e8edff;box-shadow:0 0 0 1px #8295ed}
.post-location-popover{width:min(310px,calc(100vw - 24px))}
.post-location-popover strong{display:block;font-size:13px;color:#334155;margin-bottom:7px}
.post-location-popover-row{display:flex;gap:6px}.post-location-popover-row input{flex:1;min-width:0;border:1px solid #d7deea;border-radius:8px;padding:7px 8px;outline:none;font:inherit;font-size:12px}.post-location-popover-row button{border:0;border-radius:8px;background:#5068d8;color:#fff;padding:7px 9px;font-size:11px;font-weight:700;cursor:pointer}.post-location-popover small{display:block;color:#7a8799;font-size:10px;margin-top:6px;line-height:1.35}
.post-location-suggestions{margin-top:5px;max-height:190px;overflow:auto;border:1px solid #e2e7ef;border-radius:9px;background:#fff}
.post-location-suggestions[hidden]{display:none!important}
.post-location-suggestion{display:flex;align-items:center;gap:7px;width:100%;padding:8px 9px;border:0;border-bottom:1px solid #f0f2f6;background:#fff;color:#344054;text-align:left;font:500 12px/1.25 inherit;cursor:pointer}
.post-location-suggestion:last-child{border-bottom:0}.post-location-suggestion:hover{background:#f3f6ff;color:#3f55b5}
.post-location-current{width:100%;margin-top:6px;padding:6px 8px;border:1px solid #dce3ee;border-radius:9px;background:#f8fafc;color:#526176;font:700 11px/1.2 inherit;cursor:pointer}
.post-location-current:hover{background:#eef3ff}.post-location-current:disabled{opacity:.6;cursor:wait}
@media(max-width:760px){.post-context-panel{margin:6px 0}.post-context-action{padding:6px 10px}.post-mood-popover{grid-template-columns:repeat(6,32px)}.post-mood-popover button{width:32px;height:32px;font-size:18px}.post-location-popover{left:0;max-width:calc(100vw - 24px)}}

/* v13.9 — distinguish media that arrived through a tagged post. */
.gallery-item-tagged{border-color:#dfe5f1}
.gallery-tagged-source{padding:7px 9px;font-size:11px;line-height:1.45;color:#68758a;background:#f7f9fc;border-top:1px solid #e8edf4}
.gallery-tagged-source a{color:#4665d8;font-weight:700;text-decoration:none}
.gallery-tagged-source a:hover{text-decoration:underline}

/* v36: post context display is intentionally small and muted so it feels like
   metadata, not a second headline. The location itself remains a clear link. */
.post-context-display{display:flex;align-items:center;flex-wrap:wrap;gap:3px 9px;margin:3px 0 6px;padding:0;color:#9aa3af;font-size:10px;line-height:1.25;font-weight:500;opacity:.78}
.post-context-display > span,.post-context-display > a{display:inline-flex;align-items:center;min-height:16px;white-space:nowrap}
.post-context-display .post-context-location-link{color:#8b95a3;text-decoration:none;cursor:pointer;max-width:min(70vw,360px);overflow:hidden;text-overflow:ellipsis}
.post-context-display .post-context-location-link:hover{color:#5f73a7;text-decoration:none;opacity:1}
.post-context-display > span + span:before,.post-context-display > a + span:before,.post-context-display > span + a:before{content:'·';margin-right:10px;color:#b2bac5}
.post-context-display a[href*="openstreetmap"]{font-weight:500}

/* Reused by post editing as well as the composer. */
.post-edit-context{margin:7px 0 8px!important}
.post-edit-context .post-context-action{font-size:11px;padding:6px 10px;color:#687587;background:#fbfcfd;border-color:#e2e7ef}
.post-edit-context .post-context-action:hover{background:#f3f6fb}
.post-context-panel .sa-location-suggestions{max-height:220px;overflow:auto}

@media(max-width:700px){
  .post-context-display{font-size:10.5px;gap:3px 8px;margin-top:3px}
  .post-context-display > span + span:before,.post-context-display > a + span:before,.post-context-display > span + a:before{margin-right:8px}
}

/* =========================================================
   v39 — Modern location picker
   The location UI behaves like a compact mobile-friendly sheet:
   current GPS action first, then a clean search field and results.
   ========================================================= */
.modern-location-picker{
  width:min(360px,calc(100vw - 24px))!important;
  padding:12px!important;
  border:1px solid #e5e9f0!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 18px 50px rgba(15,23,42,.16)!important;
}
.post-location-popover-head{display:flex;align-items:center;gap:9px;margin:0 2px 10px}
.post-location-head-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#eef3ff;font-size:18px}
.post-location-popover-head strong{display:block;color:#172033;font-size:13px;line-height:1.15}
.post-location-popover-head small{display:block;margin-top:2px;color:#8a94a6;font-size:10px;line-height:1.25}
.modern-location-picker .post-location-current{width:100%;display:flex;align-items:center;gap:10px;margin:0 0 9px;padding:10px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc;color:#253247;text-align:left;cursor:pointer;transition:.16s ease}
.modern-location-picker .post-location-current:hover{background:#f3f6ff;border-color:#ccd7f4;transform:translateY(-1px)}
.modern-location-picker .post-location-current:disabled{opacity:.65;cursor:wait;transform:none}
.post-location-current-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:0 0 34px;border-radius:10px;background:#e9efff;color:#4b63d7;font-size:20px;font-weight:700}
.post-location-current-copy{min-width:0;flex:1}
.post-location-current-copy strong{display:block;font-size:12px;line-height:1.2;font-weight:700;color:#253247}
.post-location-current-copy small{display:block;margin-top:3px;font-size:10px;line-height:1.3;color:#8993a5;white-space:normal}
.post-location-current-arrow{font-size:20px;color:#9aa4b2;line-height:1}
.post-location-search-box{display:flex;align-items:center;gap:6px;height:38px;padding:0 6px 0 10px;border:1px solid #e1e6ee;border-radius:12px;background:#fff;box-sizing:border-box}
.post-location-search-box>span{font-size:17px;color:#9aa4b2;line-height:1}
.post-location-search-box input{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0 3px!important;font:500 12px/1.2 inherit;color:#273449}
.post-location-search-box input::placeholder{color:#a1a9b6}
.post-location-search-box button{border:0;border-radius:8px;background:#5269dd;color:#fff;padding:7px 9px;font:700 10px/1 inherit;cursor:pointer;white-space:nowrap}
.post-location-search-box button:hover{background:#465dcc}
.modern-location-picker .post-location-suggestions{margin-top:7px;max-height:190px;border:1px solid #e7ebf1;border-radius:12px;overflow:auto;background:#fff}
.modern-location-picker .post-location-suggestion{padding:9px 10px;font-size:11px;line-height:1.3;border-bottom:1px solid #f0f2f5}
.modern-location-picker .post-location-suggestion span:first-child{width:20px;text-align:center}
@media(max-width:760px){
  .modern-location-picker{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;top:auto!important;width:auto!important;max-width:none!important;z-index:100000!important;padding:13px!important;border-radius:20px!important;box-shadow:0 24px 70px rgba(15,23,42,.22)!important}
  .modern-location-picker .post-location-suggestions{max-height:34vh}
  .modern-location-picker .post-location-current{padding:11px}
}

/* =========================================================
   v41 — compact Facebook-style location picker
   - Composer/edit actions are icon-first and intentionally small.
   - The picker itself is the only place where location text/details appear.
   - Search accepts country, city, street or place for old photos.
   ========================================================= */
.post-context-icon-only{
  width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:50%!important;font-size:17px!important;line-height:1!important;
}
.post-context-icon-only span{display:flex!important;align-items:center;justify-content:center}
.post-context-icon-only:hover{transform:translateY(-1px)}

.modern-location-picker{
  width:min(350px,calc(100vw - 24px))!important;
  padding:10px!important;border-radius:16px!important;
  background:#fff!important;border:1px solid #e4e8ef!important;
  box-shadow:0 18px 48px rgba(15,23,42,.18)!important;
}
.post-location-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px}
.post-location-picker-title{display:flex;align-items:center;gap:8px;min-width:0}
.post-location-picker-pin{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#f0f3ff;font-size:16px}
.post-location-picker-title strong{display:block;font-size:12px;line-height:1.15;color:#182235}
.post-location-picker-title small{display:block;margin-top:2px;font-size:9.5px;line-height:1.25;color:#8a94a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:245px}
.post-location-picker-close{width:28px;height:28px;border:0;border-radius:50%;background:#f4f5f7;color:#6b7280;font-size:20px;line-height:1;cursor:pointer}
.post-location-picker-close:hover{background:#e9edf2;color:#374151}
.modern-location-picker .post-location-search-box{height:40px;border-radius:11px;padding-left:10px}
.modern-location-picker .post-location-search-box input{font-size:12px!important}
.modern-location-picker .post-location-save-icon{width:28px;height:28px;padding:0!important;border-radius:50%!important;font-size:14px!important;display:flex;align-items:center;justify-content:center}
.modern-location-picker .post-location-current{display:flex!important;align-items:center;gap:9px;margin:8px 0 0!important;padding:8px 9px!important;border-radius:11px!important;background:#f8fafc!important}
.modern-location-picker .post-location-current-icon{width:29px;height:29px;flex:0 0 29px;border-radius:9px;font-size:17px}
.modern-location-picker .post-location-current-copy strong{font-size:11px}
.modern-location-picker .post-location-current-copy small{font-size:9.5px;margin-top:2px}
.modern-location-picker .post-location-current-arrow{display:none}
.modern-location-picker .post-location-suggestions{margin-top:7px!important;max-height:210px!important;border-radius:11px!important}
.modern-location-picker .post-location-suggestion{padding:8px 9px!important;font-size:11px!important}
@media(max-width:760px){
  .modern-location-picker{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;border-radius:18px!important;padding:11px!important}
  .modern-location-picker .post-location-suggestions{max-height:38vh!important}
  .post-context-icon-only{width:32px!important;height:32px!important;min-width:32px!important}
}

.post-context-icon-only.has-location{background:#edf8f1!important;border-color:#cfe9d7!important;color:#16834a!important}
.post-context-icon-only.has-location:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#22a55a;transform:translate(10px,-10px);box-shadow:0 0 0 2px #fff}
.post-context-icon-only{position:relative}

/* v42 — compact location controls: suggestions stay directly under the search field. */
.post-location-picker-head-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.post-location-picker-clear{width:28px;height:28px;border:0;border-radius:50%;background:#fff1f2;color:#b4233a;font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.post-location-picker-clear:hover{background:#ffe4e7;color:#991b2e}
.post-location-picker-clear[hidden]{display:none!important}
.modern-location-picker{overflow:visible!important}
.modern-location-picker .post-location-search-box{position:relative;z-index:3}
.modern-location-picker .post-location-suggestions{position:relative;z-index:4;margin-top:5px!important}
.modern-location-picker .post-location-current{position:relative;z-index:2}
@media(max-width:760px){
  .modern-location-picker{position:fixed!important;overflow:visible!important}
  .modern-location-picker .post-location-suggestions{max-height:36vh!important}
}

/* v43 — mobile location picker stays next to the 📍 button instead of the
   bottom of the viewport. This prevents the browser's bottom UI / composer
   controls from covering the search field or the current-location action. */
@media(max-width:760px){
  .modern-location-picker{
    width:min(320px,calc(100vw - 16px))!important;
    max-width:320px!important;
    padding:8px!important;
    border-radius:14px!important;
    bottom:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
  }
  .modern-location-picker .post-location-picker-head{margin-bottom:6px!important;gap:6px!important}
  .modern-location-picker .post-location-picker-pin{width:26px!important;height:26px!important;font-size:14px!important;border-radius:8px!important}
  .modern-location-picker .post-location-picker-title{gap:6px!important}
  .modern-location-picker .post-location-picker-title strong{font-size:11px!important}
  .modern-location-picker .post-location-picker-title small{font-size:8.5px!important;max-width:190px!important}
  .modern-location-picker .post-location-picker-close,
  .modern-location-picker .post-location-picker-clear{width:25px!important;height:25px!important;font-size:17px!important}
  .modern-location-picker .post-location-search-box{height:34px!important;border-radius:9px!important;padding-left:8px!important}
  .modern-location-picker .post-location-search-box>span{font-size:15px!important}
  .modern-location-picker .post-location-search-box input{font-size:11px!important}
  .modern-location-picker .post-location-save-icon{width:25px!important;height:25px!important;font-size:12px!important}
  .modern-location-picker .post-location-suggestions{margin-top:4px!important;max-height:150px!important;border-radius:9px!important}
  .modern-location-picker .post-location-suggestion{padding:7px 8px!important;font-size:10.5px!important;line-height:1.2!important}
  .modern-location-picker .post-location-current{gap:7px!important;margin-top:6px!important;padding:7px 8px!important;border-radius:9px!important}
  .modern-location-picker .post-location-current-icon{width:25px!important;height:25px!important;flex-basis:25px!important;font-size:15px!important;border-radius:7px!important}
  .modern-location-picker .post-location-current-copy strong{font-size:10.5px!important}
  .modern-location-picker .post-location-current-copy small{font-size:8.5px!important;margin-top:1px!important}
}

/* v44 — mobile edit safety: the location picker is portaled to <body> by JS,
   so it is never clipped by profile/feed edit containers or their scroll areas. */
@media(max-width:760px){
  body > .modern-location-picker{
    position:fixed!important;
    z-index:2147483000!important;
    pointer-events:auto!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* iPhone/iOS Safari location-picker safety: the popup is portaled to body and
   positioned from the visual viewport by socialapp_ui.js. Do not pin it to the
   bottom because the software keyboard can cover that area. */
@media (max-width:760px){
  body > .modern-location-picker{
    position:fixed !important;
    bottom:auto !important;
    max-height:min(360px,calc(100dvh - 16px)) !important;
    overflow:visible !important;
    z-index:2147483000 !important;
  }
  body > .modern-location-picker .post-location-suggestions{
    max-height:min(150px,30dvh) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* ================================================================
   v46 — Account security / remembered devices UI
   The security panel intentionally reuses the existing settings-card
   visual language so desktop and mobile remain consistent.
   ================================================================ */
.security-devices-card .settings-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.security-devices-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.security-devices-actions form{margin:0}
.security-device-list{display:grid;gap:9px}
.security-device-row{display:flex;align-items:center;gap:12px;border:1px solid #e3e7ed;border-radius:12px;padding:12px;background:#fff}
.security-device-row.is-current{border-color:#b8d2ff;background:#f7faff}
.security-device-icon{width:40px;height:40px;border-radius:11px;background:#f2f5f8;display:flex;align-items:center;justify-content:center;font-size:21px;flex:0 0 40px}
.security-device-main{min-width:0;flex:1}
.security-device-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.security-device-title strong{font-size:13px}
.security-current-badge{font-size:10px;font-weight:800;color:#1557a6;background:#eaf2ff;border:1px solid #cfe0ff;border-radius:999px;padding:3px 7px}
.security-device-meta{display:flex;gap:8px 14px;flex-wrap:wrap;margin-top:5px;color:#667085;font-size:11px}
.security-logout-btn{white-space:nowrap}
.security-device-note{margin-top:11px;padding:10px 11px;border-radius:9px;background:#f7f8fa;color:#667085;font-size:11px;line-height:1.5}
@media(max-width:760px){
  .security-devices-card .settings-card-head{display:block}
  .security-devices-actions{justify-content:flex-start;margin-top:11px}
  .security-device-row{align-items:flex-start;flex-wrap:wrap}
  .security-device-main{min-width:calc(100% - 56px)}
  .security-device-row .security-logout-btn{margin-left:52px;width:calc(100% - 52px)}
}

/* v46 — Login history page */
.login-history-page{max-width:960px;margin:20px auto}
.login-history-list{display:grid;gap:8px}
.login-history-row{display:flex;align-items:flex-start;gap:11px;border:1px solid #e3e7ed;border-radius:11px;padding:11px 12px;background:#fff}
.login-history-icon{width:36px;height:36px;border-radius:10px;background:#f2f5f8;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 36px}
.login-history-main{min-width:0;flex:1}
.login-history-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.login-history-title strong{font-size:13px}
.login-history-device{margin-top:3px;font-size:12px;font-weight:700;color:#344054}
.login-history-meta{display:flex;gap:7px 14px;flex-wrap:wrap;margin-top:5px;color:#667085;font-size:11px}
@media(max-width:760px){.login-history-page{margin:10px auto}.login-history-row{padding:10px}.login-history-meta{display:grid;gap:3px}}

/* v16.0 — Full-screen personalized video viewer. */
body.social-video-reels-open{overflow:hidden!important;overscroll-behavior:none}
/* Reels must sit above the entire mobile shell, including the fixed bottom navigation.
   The viewer is a true full-screen layer; no page navigation should peek through it. */
body.social-video-reels-open .mobile-bottom-nav{display:none!important;pointer-events:none!important}
body.social-video-reels-open .site-header{z-index:0!important}
.social-video-reels{position:fixed;inset:0;z-index:2147483640;background:#050505;color:#fff;display:none;align-items:center;justify-content:center;touch-action:none}
.social-video-reels.open{display:flex}
.social-video-reels-backdrop{position:absolute;inset:0;background:#050505}
.social-video-reels-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;outline:none;z-index:2}
.social-video-reels-player{position:relative;width:min(100vw,620px);height:100%;max-height:100vh;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.35)}
.social-video-reels-player video{width:100%;height:100%;object-fit:contain;background:#000;display:none}
.social-video-reels-player video.is-active{display:block}
.social-video-reels-tap-layer{position:absolute;inset:0;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Playback feedback appears only after a deliberate tap, then fades quickly. */
.social-video-reels-playback-feedback{position:absolute;left:50%;top:50%;z-index:4;width:clamp(64px,12vw,92px);height:clamp(64px,12vw,92px);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) scale(.88);border-radius:50%;background:rgba(0,0,0,.56);color:#fff;box-shadow:0 4px 22px rgba(0,0,0,.25);font-size:clamp(26px,5vw,38px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.social-video-reels-playback-feedback.is-visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.social-video-reels-playback-feedback span{display:block;margin-left:2px;line-height:1}
@media(prefers-reduced-motion:reduce){.social-video-reels-playback-feedback{transition:none}}
.social-video-reels-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px 18px 60px;background:linear-gradient(rgba(0,0,0,.55),transparent);font-weight:800}
.social-video-reels-top button,.social-video-reels-close,.social-video-reels-nav,.social-video-reels-actions button{border:0;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
.social-video-reels-top button{width:42px;height:42px;border-radius:50%;font-size:19px;z-index:6}
.social-video-reels-close{position:fixed;right:18px;top:16px;width:44px;height:44px;border-radius:50%;font-size:30px;z-index:10}
.social-video-reels-nav{position:fixed;width:48px;height:64px;border-radius:14px;font-size:46px;line-height:1;z-index:6}
.social-video-reels-nav.prev{left:18px}.social-video-reels-nav.next{right:18px}
.social-video-reels-nav:disabled{opacity:.2;cursor:default}
.social-video-reels-bottom{position:absolute;left:0;right:78px;bottom:0;z-index:5;padding:80px 18px 22px;background:linear-gradient(transparent,rgba(0,0,0,.86));pointer-events:none}
.social-video-reels-author-row{display:flex;gap:8px;align-items:center;font-size:16px}.social-video-reels-author-row span{font-size:9px;padding:4px 6px;border-radius:6px;background:#fff;color:#111;font-weight:900}
.social-video-reels-text{margin-top:7px;line-height:1.45;font-size:14px;max-width:90%;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;pointer-events:auto;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.social-video-reels-text.expanded{display:block;-webkit-line-clamp:unset;max-height:min(42vh,360px);overflow:auto;padding-right:4px;scrollbar-width:thin}
.social-video-reels-text:empty{display:none}
.social-video-reels-offer{display:inline-flex;margin-top:9px;padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.95);color:#111;text-decoration:none;font-size:12px;font-weight:800;pointer-events:auto}
.social-video-reels-progress{height:3px;background:rgba(255,255,255,.3);margin-top:16px;border-radius:4px;overflow:hidden}.social-video-reels-progress span{display:block;width:0;height:100%;background:#fff}
.social-video-reels-actions{position:absolute;right:12px;bottom:82px;z-index:9;display:flex;flex-direction:column;gap:10px}.social-video-reels-actions button{width:48px;height:48px;border-radius:50%;font-size:17px}.social-video-reels-action-btn{display:flex;align-items:center;justify-content:center;gap:2px}.social-video-reels-action-btn span{font-size:11px;font-weight:800}.social-video-reels-action-btn.reacted{outline:2px solid rgba(255,255,255,.7);transform:scale(1.03)}
.social-video-reels-reaction-wrap{position:relative;display:flex;align-items:center}
.social-video-reels-reaction-picker{position:absolute;right:58px;bottom:0;display:none;grid-template-columns:repeat(5,40px);gap:2px;width:210px;padding:6px;background:rgba(255,255,255,.98);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:30}
.social-video-reels-reaction-picker button{width:40px;height:40px;border:0;border-radius:9px;background:transparent;font-size:22px;cursor:pointer}
.social-video-reels-reaction-picker button:hover{background:#f1f3f5}
.social-video-reels-loading{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);padding:9px 13px;border-radius:10px;background:rgba(0,0,0,.65);font-size:13px;pointer-events:none}
.social-video-reels-hint{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:7;color:rgba(255,255,255,.65);font-size:11px;pointer-events:none}
@media(max-width:760px){
  .social-video-reels{z-index:2147483640!important;width:100vw;height:100dvh;min-height:100vh}
  .social-video-reels-player{width:100vw;height:100dvh;min-height:100vh;max-height:none}
  .social-video-reels-player video{width:100%;height:100%;max-width:100vw;max-height:100dvh;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .social-video-reels-close{right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top))}.social-video-reels-nav{display:none}
  .social-video-reels-bottom{right:70px;padding-bottom:max(18px,calc(18px + env(safe-area-inset-bottom)))}
  .social-video-reels-actions{right:max(10px,env(safe-area-inset-right));bottom:max(72px,calc(72px + env(safe-area-inset-bottom)))}
  .social-video-reels-reaction-picker{right:54px;bottom:0;width:min(210px,calc(100vw - 90px));grid-template-columns:repeat(5,1fr)}
  .social-video-reels-reaction-picker button{width:auto;height:38px;font-size:21px}
  .social-video-reels-hint{display:none}
}
@supports not (height:100dvh){
  .social-video-reels-player{height:100vh}
}

/* v17.0 — Reels mobile browser-chrome safety + in-viewer comments drawer. */
.social-video-reels-comments{position:absolute;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;pointer-events:auto}
.social-video-reels-comments[hidden]{display:none!important}
.social-video-reels-comments-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.social-video-reels-comments-sheet{position:relative;z-index:2;width:min(720px,100%);max-height:min(78vh,720px);display:flex;flex-direction:column;background:#fff;color:#111;border-radius:18px 18px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.38);overflow:hidden}
.social-video-reels-comments-head{height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #e7e9ed;background:#fff;position:relative;z-index:3}
.social-video-reels-comments-head:before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:99px;background:#cfd3d8}
.social-video-reels-comments-head strong{font-size:15px;margin-top:5px}
.social-video-reels-comments-head button{width:36px;height:36px;border:0;border-radius:50%;background:#f1f3f5;color:#111;font-size:25px;line-height:1;cursor:pointer;margin-top:5px}
.social-video-reels-comments-card{min-height:0;overflow:hidden;background:#fff;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex;flex-direction:column}
.social-video-reels-comments-card .comments-area{min-height:0;display:flex;flex-direction:column;padding:8px 12px 12px}
.social-video-reels-comments-card .comments-list{max-height:min(58vh,560px);flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:2px}
.social-video-reels-comments-card .comment-form{position:sticky;bottom:0;z-index:20;flex:0 0 auto;background:#fff;border-top:1px solid #e8ebef;padding:9px 0 calc(9px + env(safe-area-inset-bottom));margin-top:8px}
.social-video-reels-comments-loading{min-height:180px;display:flex;align-items:center;justify-content:center;padding:30px;color:#667085;font-size:14px;text-align:center}
body.social-video-reels-comments-open{overflow:hidden!important}

@media(max-width:760px){
  /* svh is the conservative mobile viewport: it stays inside the browser UI
     instead of letting Safari's address bar cover the speaker or text. */
  .social-video-reels{top:var(--social-reels-vv-top,0px)!important;bottom:auto!important;height:var(--social-reels-vv-height,100svh)!important;max-height:100svh!important;min-height:0!important}
  .social-video-reels-player{height:100%!important;min-height:0!important;max-height:none!important}
  .social-video-reels-player video{height:100%!important;max-height:100%!important}
  .social-video-reels-top{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:54px}
  .social-video-reels-close{top:max(10px,env(safe-area-inset-top));}
  .social-video-reels-bottom{bottom:0!important;padding-bottom:max(22px,calc(22px + env(safe-area-inset-bottom)));}
  .social-video-reels-actions{bottom:max(82px,calc(82px + env(safe-area-inset-bottom)));}
  .social-video-reels-comments-sheet{width:100%;max-height:82%;border-radius:18px 18px 0 0}
  .social-video-reels-comments-card .comments-list{max-height:none;min-height:0}
  .social-video-reels-comments-card .comments-area{min-height:0;height:100%;padding-bottom:0}
  .social-video-reels-comments-card .comment-form{padding-bottom:max(9px,calc(9px + env(safe-area-inset-bottom)));}
  .social-video-reels-comments-card .comments-list{flex:1 1 auto;overflow-y:auto}
}

/* ========================================================================
   v55 — Reels visual viewport controls + incoming Messenger action
   ------------------------------------------------------------------------
   Reels remains a true fullscreen consumption layer. Controls are not tied
   to arbitrary fixed screen coordinates: they are positioned relative to the
   actual visible Reels viewport and respect device safe-area insets.
   ======================================================================== */
.social-video-reels-top{
  position:absolute !important;
  inset:0 !important;
  z-index:12 !important;
  display:block !important;
  padding:0 !important;
  background:none !important;
  pointer-events:none !important;
  font-weight:800;
}
.social-video-reels-title{
  position:absolute;
  top:max(18px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  text-shadow:0 2px 8px rgba(0,0,0,.55);
  pointer-events:none;
}
.social-video-reels-top button#socialVideoReelsMute{
  position:absolute !important;
  left:max(16px,env(safe-area-inset-left));
  top:max(16px,env(safe-area-inset-top));
  width:44px !important;
  height:44px !important;
  margin:0 !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:auto !important;
  z-index:20 !important;
}
.social-video-reels-close{
  position:absolute !important;
  right:max(16px,env(safe-area-inset-right)) !important;
  top:max(16px,env(safe-area-inset-top)) !important;
  width:44px !important;
  height:44px !important;
  z-index:20 !important;
}
.social-video-reels-bottom{
  left:max(16px,env(safe-area-inset-left)) !important;
  right:92px !important;
  bottom:max(18px,env(safe-area-inset-bottom)) !important;
  padding:72px 0 18px !important;
}
.social-video-reels-actions{
  right:max(16px,env(safe-area-inset-right)) !important;
  bottom:max(96px,calc(96px + env(safe-area-inset-bottom))) !important;
}
.social-video-reels-player{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  box-shadow:none !important;
}
.social-video-reels-player video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

/* Incoming Messenger action: a small floating copy of the mobile Chat item.
   It rises from the bottom only when a NEW unread message is detected. */
.social-reels-incoming-chat{
  position:absolute;
  left:max(14px,env(safe-area-inset-left));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:120 !important;
  min-width:154px;
  max-width:min(78vw,290px);
  min-height:58px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  color:#fff;
  background:rgba(20,24,32,.82);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 12px 36px rgba(0,0,0,.38);
  cursor:pointer;
  transform:translateY(calc(100% + 30px));
  opacity:0;
  pointer-events:none;
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .22s ease;
}
.social-reels-incoming-chat[hidden]{display:flex !important;}
.social-reels-incoming-chat.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.social-reels-incoming-chat__icon{
  width:40px;height:40px;flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:13px;
  background:rgba(255,255,255,.13);
  font-size:22px;
}
.social-reels-incoming-chat__copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.social-reels-incoming-chat__copy strong{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.social-reels-incoming-chat__copy small{font-size:10px;color:rgba(255,255,255,.7);font-weight:800}
.social-reels-incoming-chat__badge{
  min-width:22px;height:22px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:auto;
  border-radius:999px;
  background:#e53935;color:#fff;
  font-size:11px;font-weight:900;
  box-shadow:0 0 0 2px rgba(20,24,32,.75);
}

@media(max-width:760px){
  .social-video-reels{
    top:var(--social-reels-vv-top,0px) !important;
    bottom:auto !important;
    height:var(--social-reels-vv-height,100svh) !important;
    max-height:none !important;
    min-height:0 !important;
  }
  .social-video-reels-title{top:max(18px,env(safe-area-inset-top));font-size:14px}
  .social-video-reels-top button#socialVideoReelsMute{left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));}
  .social-video-reels-close{right:max(14px,env(safe-area-inset-right)) !important;top:max(14px,env(safe-area-inset-top)) !important;}
  .social-video-reels-bottom{
    left:max(14px,env(safe-area-inset-left)) !important;
    right:82px !important;
    bottom:max(12px,env(safe-area-inset-bottom)) !important;
    padding:78px 0 12px !important;
  }
  .social-video-reels-actions{
    right:max(12px,env(safe-area-inset-right)) !important;
    bottom:max(92px,calc(92px + env(safe-area-inset-bottom))) !important;
  }
  .social-reels-incoming-chat{
    left:max(12px,env(safe-area-inset-left));
    bottom:max(14px,env(safe-area-inset-bottom));
  }
}


/* ========================================================================
   v56 — True fullscreen Reels surface + proportional floating controls
   ------------------------------------------------------------------------
   The previous visual-viewport compensation intentionally moved the Reels
   layer down when Safari/Chrome browser UI was visible. That made the old
   page/header appear above the video. Reels must instead occupy the complete
   web viewport with position:fixed/inset:0; browser chrome is outside the
   webpage and is never part of our layout.

   Controls use viewport-relative offsets (vw/vh) plus safe-area insets, so
   the same design scales naturally from small phones to large phones/tablets.
   ======================================================================== */
.social-video-reels{
  position:fixed !important;
  inset:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:0 !important;
  max-height:none !important;
  z-index:2147483640 !important;
}
.social-video-reels-stage,
.social-video-reels-player{
  width:100vw !important;
  height:100dvh !important;
  min-height:0 !important;
  max-height:none !important;
}
.social-video-reels-player{
  max-width:none !important;
  box-shadow:none !important;
}
.social-video-reels-player video{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
}

/* Floating controls: percentage/viewport based placement, never hard-coded
   pixels tied to a particular phone size. Safe-area is added on top. */
.social-video-reels-top{
  position:absolute !important;
  inset:0 !important;
  padding:0 !important;
  pointer-events:none !important;
}
.social-video-reels-title{
  top:clamp(12px,2.2vh,28px) !important;
}
.social-video-reels-top button#socialVideoReelsMute{
  left:max(clamp(12px,2.4vw,32px),env(safe-area-inset-left)) !important;
  top:max(clamp(12px,2.2vh,28px),env(safe-area-inset-top)) !important;
}
.social-video-reels-close{
  right:max(clamp(12px,2.4vw,32px),env(safe-area-inset-right)) !important;
  top:max(clamp(12px,2.2vh,28px),env(safe-area-inset-top)) !important;
}
.social-video-reels-actions{
  right:max(clamp(10px,2.5vw,34px),env(safe-area-inset-right)) !important;
  bottom:max(clamp(88px,12vh,150px),calc(72px + env(safe-area-inset-bottom))) !important;
}
.social-video-reels-bottom{
  left:max(clamp(14px,3vw,40px),env(safe-area-inset-left)) !important;
  right:clamp(76px,14vw,150px) !important;
  bottom:max(clamp(18px,4.5vh,52px),env(safe-area-inset-bottom)) !important;
  padding:clamp(56px,10vh,110px) 0 clamp(8px,1.8vh,22px) !important;
}
.social-video-reels-progress{
  margin-top:clamp(10px,2vh,18px) !important;
}

/* The incoming Messenger bubble also scales with the viewport and sits above
   the author/caption zone instead of covering it. */
.social-reels-incoming-chat{
  left:max(clamp(12px,3vw,34px),env(safe-area-inset-left)) !important;
  bottom:max(clamp(88px,15vh,170px),calc(72px + env(safe-area-inset-bottom))) !important;
}

@media(max-width:760px){
  .social-video-reels{
    top:0 !important;
    bottom:auto !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .social-video-reels-stage,
  .social-video-reels-player{
    width:100vw !important;
    height:100dvh !important;
  }
  .social-video-reels-player video{
    width:100vw !important;
    height:100dvh !important;
    object-fit:cover !important;
  }
  .social-video-reels-top button#socialVideoReelsMute{
    left:max(clamp(10px,2.8vw,24px),env(safe-area-inset-left)) !important;
    top:max(clamp(10px,2.4vh,24px),env(safe-area-inset-top)) !important;
  }
  .social-video-reels-close{
    right:max(clamp(10px,2.8vw,24px),env(safe-area-inset-right)) !important;
    top:max(clamp(10px,2.4vh,24px),env(safe-area-inset-top)) !important;
  }
  .social-video-reels-bottom{
    left:max(clamp(12px,3.2vw,28px),env(safe-area-inset-left)) !important;
    right:clamp(72px,17vw,110px) !important;
    bottom:max(clamp(14px,4vh,34px),env(safe-area-inset-bottom)) !important;
    padding:clamp(48px,10vh,86px) 0 clamp(6px,1.5vh,16px) !important;
  }
  .social-video-reels-actions{
    right:max(clamp(10px,3vw,26px),env(safe-area-inset-right)) !important;
    bottom:max(clamp(88px,15vh,132px),calc(70px + env(safe-area-inset-bottom))) !important;
  }
  .social-reels-incoming-chat{
    left:max(clamp(10px,3vw,26px),env(safe-area-inset-left)) !important;
    bottom:max(clamp(92px,17vh,150px),calc(76px + env(safe-area-inset-bottom))) !important;
  }
}

@supports not (height:100dvh){
  .social-video-reels,
  .social-video-reels-stage,
  .social-video-reels-player{height:100vh !important}
  .social-video-reels-player video{height:100vh !important}
}


/* ========================================================================
   v57 — Speaker control matches the close button + audible-first Reels
   ------------------------------------------------------------------------
   The speaker is a floating circular control with the same visual language as
   the close button. Reels starts audible by default; the user can mute it.
   ======================================================================== */
.social-video-reels-top button#socialVideoReelsMute{
  position:absolute !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:clamp(40px,4.2vw,48px) !important;
  height:clamp(40px,4.2vw,48px) !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  color:#fff !important;
  background:rgba(0,0,0,.42) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.28) !important;
  font-size:clamp(18px,2vw,23px) !important;
  line-height:1 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  z-index:30 !important;
}
.social-video-reels-top button#socialVideoReelsMute:active,
.social-video-reels-top button#socialVideoReelsMute:focus-visible{
  transform:scale(.96);
  outline:2px solid rgba(255,255,255,.78);
  outline-offset:2px;
}
@media(max-width:760px){
  .social-video-reels-top button#socialVideoReelsMute{
    width:clamp(40px,11vw,48px) !important;
    height:clamp(40px,11vw,48px) !important;
    font-size:clamp(18px,5.2vw,23px) !important;
    left:max(clamp(10px,2.8vw,24px),env(safe-area-inset-left)) !important;
    top:max(clamp(10px,2.4vh,24px),env(safe-area-inset-top)) !important;
  }
}

/* ========================================================================
   v58 — Speaker and close controls are true mirror controls
   ------------------------------------------------------------------------
   The speaker must visually match the close button: identical circle size,
   identical vertical offset, and equal distance from the left/right viewport
   edges. This keeps the two controls opposite each other on every screen.
   ======================================================================== */
.social-video-reels-top button#socialVideoReelsMute{
  width:44px !important;
  height:44px !important;
  left:max(clamp(12px,2.4vw,32px),env(safe-area-inset-left)) !important;
  top:max(clamp(12px,2.2vh,28px),env(safe-area-inset-top)) !important;
  font-size:20px !important;
  line-height:1 !important;
  padding:0 !important;
  margin:0 !important;
}
.social-video-reels-close{
  width:44px !important;
  height:44px !important;
  right:max(clamp(12px,2.4vw,32px),env(safe-area-inset-right)) !important;
  top:max(clamp(12px,2.2vh,28px),env(safe-area-inset-top)) !important;
  padding:0 !important;
  margin:0 !important;
}
@media(max-width:760px){
  .social-video-reels-top button#socialVideoReelsMute{
    width:44px !important;
    height:44px !important;
    left:max(clamp(12px,3.2vw,24px),env(safe-area-inset-left)) !important;
    top:max(clamp(12px,2.4vh,24px),env(safe-area-inset-top)) !important;
    font-size:20px !important;
  }
  .social-video-reels-close{
    width:44px !important;
    height:44px !important;
    right:max(clamp(12px,3.2vw,24px),env(safe-area-inset-right)) !important;
    top:max(clamp(12px,2.4vh,24px),env(safe-area-inset-top)) !important;
  }
}

/* ========================================================================
   v59 — Edge-to-edge Reels viewport + bottom content anchored to the edge
   ------------------------------------------------------------------------
   The previous mobile rules used 100svh and a bottom offset. On phones this
   could leave a visible empty strip below the progress bar and could make the
   author/caption area look vertically lifted. Reels is a true edge-to-edge
   surface: the root, stage, player and active video all occupy the complete
   dynamic viewport. The bottom content layer itself also reaches the bottom
   edge; only its readable text/progress padding is inset.
   ======================================================================== */
.social-video-reels{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100dvh !important;
  min-width:100% !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}
.social-video-reels-stage,
.social-video-reels-player{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.social-video-reels-player video,
.social-video-reels-player video.is-active{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
}

/* Bottom information is a full-width overlay, not a floating box. */
.social-video-reels-bottom{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:clamp(72px,14vh,150px) clamp(18px,3vw,42px) max(12px,env(safe-area-inset-bottom)) !important;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.20) 24%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.94) 100%) !important;
}
.social-video-reels-author-row,
.social-video-reels-text,
.social-video-reels-offer{
  margin-left:0 !important;
  max-width:calc(100% - clamp(74px,15vw,150px)) !important;
}
.social-video-reels-progress{
  width:100% !important;
  box-sizing:border-box !important;
  margin-top:clamp(10px,1.8vh,18px) !important;
}

/* Keep the three action buttons floating independently over the video. */
.social-video-reels-actions{
  right:max(2.5vw,env(safe-area-inset-right)) !important;
  bottom:max(13vh,calc(64px + env(safe-area-inset-bottom))) !important;
}

/* The two top controls are true mirrored floating controls. */
.social-video-reels-top button#socialVideoReelsMute{
  left:max(2.5vw,env(safe-area-inset-left)) !important;
  top:max(2.5vh,env(safe-area-inset-top)) !important;
}
.social-video-reels-close{
  right:max(2.5vw,env(safe-area-inset-right)) !important;
  top:max(2.5vh,env(safe-area-inset-top)) !important;
}

@media(max-width:760px){
  .social-video-reels,
  .social-video-reels-stage,
  .social-video-reels-player{
    width:100vw !important;
    height:100dvh !important;
    min-width:100vw !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
  }
  .social-video-reels{
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
  }
  .social-video-reels-player video,
  .social-video-reels-player video.is-active{
    width:100vw !important;
    height:100dvh !important;
    min-width:100vw !important;
    min-height:100dvh !important;
    object-fit:cover !important;
  }
  .social-video-reels-bottom{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    padding-left:max(16px,env(safe-area-inset-left)) !important;
    padding-right:max(16px,env(safe-area-inset-right)) !important;
    padding-bottom:max(12px,env(safe-area-inset-bottom)) !important;
  }
  .social-video-reels-author-row,
  .social-video-reels-text,
  .social-video-reels-offer{
    max-width:calc(100vw - 92px) !important;
  }
  .social-video-reels-progress{
    width:100% !important;
    margin-top:clamp(9px,1.8vh,16px) !important;
  }
  .social-video-reels-actions{
    right:max(2.5vw,env(safe-area-inset-right)) !important;
    bottom:max(13vh,calc(64px + env(safe-area-inset-bottom))) !important;
  }
  .social-video-reels-top button#socialVideoReelsMute{
    left:max(2.5vw,env(safe-area-inset-left)) !important;
    top:max(2.5vh,env(safe-area-inset-top)) !important;
  }
  .social-video-reels-close{
    right:max(2.5vw,env(safe-area-inset-right)) !important;
    top:max(2.5vh,env(safe-area-inset-top)) !important;
  }
  .social-reels-incoming-chat{
    bottom:max(12px,env(safe-area-inset-bottom)) !important;
  }
}

@supports not (height:100dvh){
  .social-video-reels,
  .social-video-reels-stage,
  .social-video-reels-player,
  .social-video-reels-player video,
  .social-video-reels-player video.is-active{height:100vh !important;}
}

/* ========================================================================
   v60 — Reels single-active-player fix
   ------------------------------------------------------------------------
   The Reels viewer keeps two <video> elements so the next clip can preload.
   Only ONE of them may ever be visible.  Earlier fullscreen overrides changed
   both players to display:block, which caused two videos to appear side by
   side on mobile.  Both players now occupy the exact same layer and the
   .is-active player alone is painted.
   ======================================================================== */
.social-video-reels-player{
  position:relative !important;
  display:block !important;
  overflow:hidden !important;
}
.social-video-reels-player video,
.social-video-reels-player video.is-active{
  position:absolute !important;
  inset:0 !important;
  display:none !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:cover !important;
  background:#000 !important;
}
.social-video-reels-player video.is-active{
  display:block !important;
  z-index:2 !important;
}
.social-video-reels-player video:not(.is-active){
  z-index:1 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* v61 — Reels post-actions menu and true share/report layering.
 * The menu deliberately mirrors the ordinary post menu: owner-only edit/delete,
 * report for everyone, media report for the current video, and 30-day mute for
 * somebody else's post. */
.social-video-reels-more-wrap{position:fixed;right:calc(max(2.5vw,env(safe-area-inset-right)) + 52px);top:max(2.5vh,env(safe-area-inset-top));z-index:12;}
.social-video-reels-more-btn{width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,20,20,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:27px;line-height:1;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 16px rgba(0,0,0,.24);}
.social-video-reels-more-menu{position:absolute;right:0;top:50px;min-width:220px;max-width:min(86vw,300px);padding:6px;background:rgba(20,20,20,.96);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.42);overflow:hidden;}
.social-video-reels-more-menu[hidden]{display:none!important;}
.social-video-reels-more-menu button{display:block;width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:11px 12px;border-radius:10px;font:600 14px/1.3 inherit;cursor:pointer;}
.social-video-reels-more-menu button:hover,.social-video-reels-more-menu button:focus-visible{background:rgba(255,255,255,.12);outline:none;}
.social-video-reels-more-menu .danger-menu-item{color:#ffb4b4;}
body.social-video-reels-open .share-composer-modal{z-index:2147483647!important;}
body.social-video-reels-open .social-report-modal{z-index:2147483647!important;}
@media(max-width:760px){
  .social-video-reels-more-wrap{right:calc(max(2.5vw,env(safe-area-inset-right)) + 52px);top:max(2.5vh,env(safe-area-inset-top));}
  .social-video-reels-more-menu{right:0;top:50px;min-width:min(250px,82vw);}
}

/* v62 — Reels share/reaction controls must remain above the fullscreen tap layer. */
.social-video-reels-actions,
.social-video-reels-reaction-wrap,
.social-video-reels-more-wrap,
.social-video-reels-close,
.social-video-reels-nav,
.social-video-reels-top button#socialVideoReelsMute{
  pointer-events:auto !important;
}
.social-video-reels-actions{z-index:20 !important;}
.social-video-reels-reaction-picker{z-index:30 !important;}

/* ========================================================================
   v64 — Reels smooth vertical swipe + non-blocking mobile playback
   ------------------------------------------------------------------------
   Two players remain in the pool, but the active and incoming videos share
   the same fullscreen layer. A swipe moves the old Reel out while the new
   Reel enters from the opposite edge. The JS never waits for play() before
   changing the visible player, so slow buffering cannot visually freeze the
   swipe.
   ======================================================================== */
.social-video-reels-player video,
.social-video-reels-player video.is-active{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  visibility:hidden !important;
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
  transition:none !important;
  will-change:transform !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}
.social-video-reels-player video.is-active{
  visibility:visible !important;
  z-index:2 !important;
}
.social-video-reels-player video:not(.is-active){
  z-index:1 !important;
  pointer-events:none !important;
}
.social-video-reels-player video.reels-entering,
.social-video-reels-player video.reels-exiting{
  visibility:visible !important;
  transition:transform 340ms cubic-bezier(.22,.8,.24,1) !important;
}
.social-video-reels-player video.reels-enter-down{
  transform:translate3d(0,100%,0) !important;
  z-index:3 !important;
}
.social-video-reels-player video.reels-enter-up{
  transform:translate3d(0,-100%,0) !important;
  z-index:3 !important;
}
.social-video-reels-player video.reels-enter-down.is-active,
.social-video-reels-player video.reels-enter-up.is-active{
  transform:translate3d(0,0,0) !important;
}
.social-video-reels-player video.reels-exit-up{
  transform:translate3d(0,-100%,0) !important;
  z-index:2 !important;
}
.social-video-reels-player video.reels-exit-down{
  transform:translate3d(0,100%,0) !important;
  z-index:2 !important;
}

/* ========================================================================
   v65 — TikTok-style full-screen snap swipe
   ------------------------------------------------------------------------
   The previous v64 fullscreen rules used !important on transform. That
   prevented the inline transform written by the touchmove handler from
   following the user's finger. The result felt like a delayed/animated
   transition instead of a real vertical Reel swipe.

   v65 intentionally lets JavaScript control transform during the gesture:
   - finger moves -> active video follows the finger 1:1
   - adjacent video follows from the top/bottom edge
   - release past the threshold -> one full-screen card snaps into place
   - release before the threshold -> the current card snaps back
   - exactly one Reel occupies the viewport when the gesture ends
   ======================================================================== */
.social-video-reels-stage{
  touch-action:none !important;
  overscroll-behavior:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}
.social-video-reels-player video,
.social-video-reels-player video.is-active{
  /* Do NOT use !important for transform: touchmove sets it inline. */
  transform:translate3d(0,0,0);
  transition:none;
  will-change:transform;
}
.social-video-reels-player video.reels-entering,
.social-video-reels-player video.reels-exiting{
  transition:transform 300ms cubic-bezier(.22,.72,.2,1) !important;
}
.social-video-reels-player video.reels-enter-down{
  transform:translate3d(0,100%,0) !important;
}
.social-video-reels-player video.reels-enter-up{
  transform:translate3d(0,-100%,0) !important;
}
.social-video-reels-player video.reels-enter-down.is-active,
.social-video-reels-player video.reels-enter-up.is-active{
  transform:translate3d(0,0,0) !important;
}
.social-video-reels-player video.reels-exit-up{
  transform:translate3d(0,-100%,0) !important;
}
.social-video-reels-player video.reels-exit-down{
  transform:translate3d(0,100%,0) !important;
}

/* During the actual finger gesture the inline transform must win over CSS. */
.social-video-reels-player video[data-reels-gesture="active"]{
  transition:none !important;
}


/* ========================================================================
   v66 — Desktop/Web Reels: preserve video sharpness and native aspect ratio
   ------------------------------------------------------------------------
   The previous desktop rule capped the Reels player at 620px. That made
   landscape videos render unnecessarily small and forced the browser to do
   avoidable scaling inside a narrow box. Mobile already uses the full visual
   viewport correctly; this desktop override gives Web the same principle:
   use the real video dimensions/aspect ratio, scale only up to the available
   viewport, and never stretch/crop the source.
   IMPORTANT: these rules are desktop-only. The existing mobile rules remain
   unchanged below the 760px breakpoint.
   ======================================================================== */
@media (min-width:761px){
  /* v67 — Desktop reference-matched video frame.
   * The Reels surface itself remains the whole viewport and stays black.
   * Only the actual video image is constrained: maximum 1400px wide and
   * almost the full browser height, exactly like the supplied reference.
   * This produces: landscape = large centered 16:9 image; portrait =
   * nearly full-height narrow image; no crop and no stretching. */
  .social-video-reels-player{
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    background:#000 !important;
    overflow:hidden !important;
  }

  .social-video-reels-player video,
  .social-video-reels-player video.is-active{
    /* These !important flags intentionally override the older fullscreen
       rules that forced a 100%/100% minimum box. Without this override the
       desktop reference layout cannot be reproduced. */
    width:100vw !important;
    height:100vh !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:min(1400px, calc(100vw - 80px)) !important;
    max-height:calc(100vh - 24px) !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#000 !important;
  }

  /* Desktop controls stay on the black viewer surface instead of shrinking
     the media box. This keeps the video itself as large as the reference. */
  .social-video-reels-actions{right:18px !important;}
  .social-video-reels-close{right:18px !important;top:16px !important;}
  .social-video-reels-more-wrap{right:70px !important;}
}

/* ========================================================================
   v68 — Desktop/Web Reels: HARD CENTER THE VIDEO IN THE ENTIRE VIEWPORT
   ------------------------------------------------------------------------
   The v67 viewer could still inherit a horizontal offset from the stage/player
   layout on some desktop widths. The video must NOT be centered inside a
   reduced content column and must NOT reserve space for the right-side
   action buttons.

   Desktop rule:
   - the Reels stage occupies the complete browser viewport;
   - the player is absolutely centered at 50% / 50%;
   - the video remains contain-based, so 16:9 and 9:16 keep their real ratio;
   - reaction/comment/share controls float above the black surface and do not
     participate in the video's centering calculation;
   - mobile is intentionally untouched.
   ======================================================================== */
@media (min-width:761px){
  .social-video-reels-stage{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    min-width:100vw !important;
    min-height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    display:block !important;
    overflow:hidden !important;
  }

  .social-video-reels-player{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
    width:100vw !important;
    height:100vh !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .social-video-reels-player video,
  .social-video-reels-player video.is-active{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
    width:100vw !important;
    height:100vh !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:min(1400px,calc(100vw - 80px)) !important;
    max-height:calc(100vh - 24px) !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  /* The gesture transform is only needed on mobile. Desktop navigation uses
     the existing next/previous transition classes, so keep the video fixed
     at the exact viewport center after every render. */
  .social-video-reels-player video.reels-enter-down,
  .social-video-reels-player video.reels-enter-up,
  .social-video-reels-player video.reels-exit-up,
  .social-video-reels-player video.reels-exit-down{
    left:50% !important;
    top:50% !important;
  }
}


/* v79 — Published-post placeholder while background FFmpeg is running. */
.media-processing-tile{display:flex!important;align-items:center;justify-content:center;min-height:220px;background:linear-gradient(135deg,#f7f8fb,#eef1f7);cursor:default!important;overflow:hidden;position:relative}
.media-processing-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;color:#5f6b7a}
.media-processing-indicator span{font-size:30px;line-height:1}
.media-processing-indicator strong{font-size:15px}
.media-processing-indicator small{font-size:12px;opacity:.75}

/* ========================================================================
   v85 — Photo Reels + notification/chat layering
   ------------------------------------------------------------------------
   Photos use the same fullscreen visual shell as videos. The two image layers
   are animated exactly like the two video players so desktop, tablet and
   mobile keep one consistent viewer.
   ======================================================================== */
.social-video-reels-player .social-video-reels-photo{
  position:absolute !important;
  inset:0 !important;
  display:none !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:contain !important;
  background:#000 !important;
  z-index:1 !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}
.social-video-reels-player .social-video-reels-photo.is-active{display:block !important;z-index:2 !important;}
.social-video-reels-player .social-video-reels-photo.reels-entering,
.social-video-reels-player .social-video-reels-photo.reels-exiting{display:block !important;}

/* The viewer is the top visual layer, but notifications and Messenger must be
   able to interrupt it.  This is intentionally above the viewer's
   2147483640 z-index and is shared by desktop/tablet/mobile. */
body.social-video-reels-open .social-notification-toast,
body.social-video-reels-open #multiChatContainer,
body.social-video-reels-open .notifications-dropdown,
body.social-video-reels-open .messenger-dropdown{
  z-index:2147483647 !important;
}
body.social-video-reels-open .social-notification-toast{pointer-events:auto !important;}
body.social-video-reels-open #multiChatContainer{pointer-events:auto !important;}

/* Keep mobile notification/Messenger sheets above the fullscreen photo/video
   viewer as well; their existing backdrop stays below the sheet itself. */
@media(max-width:760px){
  body.social-video-reels-open .mobile-sheet-backdrop{z-index:2147483646 !important;}
  body.social-video-reels-open .mobile-bottom-nav{z-index:2147483647 !important;}
  body.social-video-reels-open .notifications-dropdown,
  body.social-video-reels-open .messenger-dropdown{z-index:2147483647 !important;}
}

/* v87 — Search Engine content discovery cards. */
.search-post-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.search-post-result{border:1px solid var(--border);border-radius:14px;padding:14px;background:#fff}.search-post-result-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.search-post-result-head time{font-size:10px;color:#667085}.search-post-result p{margin:10px 0;color:#344054;line-height:1.5;word-break:break-word}.search-post-result small{display:block;color:#667085;margin-bottom:10px}.search-post-result .btn{display:inline-flex}@media(max-width:720px){.search-post-results{grid-template-columns:1fr}}