@import url(https://fonts.googleapis.com/css2?family=Actor&family=Alexandria:wght@100..900&family=Fredoka:wght@300..600&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Actor&family=Alexandria:wght@100..900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap);

@keyframes vanishAir {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1)
    }

    50% {
        opacity: .6;
        filter: blur(2px);
        transform: translateY(-10px) scale(.97)
    }

    to {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(-30px) scale(.9)
    }
}

@keyframes likePop {

    0%,
    to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.25)
    }
}

* {
    margin: 0;
    transition: color 120ms ease-in-out, background-color 120ms ease-in-out, opacity 120ms ease-in-out, transform 120ms ease-in-out;
    padding: 0;
    box-sizing: border-box;
    color: #e6f7ff !important
}

body,
html {
    min-height: 100vh;
    font-family: "Fredoka" !important;
    background: linear-gradient(to bottom, #150610, #090319);
    overflow-x: hidden
}

.btmnav2 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: transparent;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.resist {
    position: relative;
    margin-bottom: 20px;
    width: calc(100% - 30px);
    max-width: 600px;
    height: 65px;
    pointer-events: auto;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(25, 25, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    z-index: 100;
}

.btmnav2 button {
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.btmnav2 button:active {
    transform: scale(0.9);
}

.btmnav2 img {
    width: 24px;
    height: 24px;
    display: block;
}

.btmnav2 .prof {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff3b30;
    color: white !important;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    box-shadow: none;
    border: none;
}

#unreadBadge {
    display: none;
}

.nav-badge p {
    margin: 0;
    line-height: 1;
}

.topcontrolls {
    width: 100%;
    height: 2cm;
    display: flex;
    align-items: center;
}

#unreadBadge,
.streak-settings,
.username {
    display: flex;
    align-items: center;
}

.username {
    flex: 1;
    justify-content: flex-start;
    padding-left: 20px;
    overflow: hidden;
    /* keep inside */
}

.username button {
    background: #1a243b;
    height: 40px;
    padding: 0 14px;
    font-size: 15px;
    font-family: "Fredoka", sans-serif;
    border: none;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    position: relative;
    /* remove absolute */
}

.streak-settings {
    flex: 0 0 auto;
    justify-content: flex-end;
    padding-right: 20px;
}


.openedcontrolls {
    width: 4.5cm;
    height: 3.5cm;
    background: rgba(0, 0, 0, .425);
    position: absolute;
    top: 2cm;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out
}

.openedcontrolls.show {
    opacity: 1;
    pointer-events: auto
}

.openedcontrolls button {
    width: 3.8cm !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    padding-left: 5px;
    margin-left: 0 !important;
    margin-bottom: 5px;
    background: #0080ff17 !important;
    backdrop-filter: blur(2px) !important
}

.openedcontrolls img {
    width: 20px;
    height: auto;
    margin-left: 8px
}

.profile .followings button,
.streak-settings button {
    border: thick;
    margin-left: 10px;
    font-family: "Fredoka", sans-serif
}

.streak-settings button {
    background: #1a243b;
    height: 40px;
    width: 2cm;
    font-size: 15px;
    border-radius: 40px;
    justify-content: center
}

.streak-settings .streak img {
    width: 20px;
    margin-right: 5px
}

.streak-settings .settings {
    width: 40px !important;
    height: 40px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: transform .3s ease-in-out
}

.streak-settings .settings.active {
    transform: rotate(200deg)
}

.streak-settings .settings img {
    width: 20px
}

/* User Actions Trigger Button */
.streak-settings .user-actions-btn {
    width: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgb(26, 36, 59) !important;
    border: none !important;
    border-radius: 40px !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.streak-settings .user-actions-btn:focus {
    transform: scale(0.92);
    background: rgba(26, 36, 59, 0.9) !important;
    transform: rotate(180deg);
}

.streak-settings .user-actions-btn i {
    color: #fff;
    font-size: 20px;
}

/* Bottom Sheet Modal */
.user-actions-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 20000;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.user-actions-modal.active {
    opacity: 1;
    visibility: visible;
}

.user-actions-sheet {
    width: 100%;
    background: rgba(25, 25, 25, 0.8);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 30px 30px 0 0;
    padding: 10px 20px 40px 20px;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.32, 1, 0.67, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
}

.user-actions-modal.active .user-actions-sheet {
    transform: translateY(0);
}

.sheet-handle {
    width: 40px;
    height: 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin: 0 auto 20px auto;
}

.sheet-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sheet-option {
    width: 100%;
    padding: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 18px;
    color: #fff !important;
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.sheet-option:active {
    background: rgba(255, 255, 255, 0.12);
}

.sheet-option i {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.sheet-option.destructive {
    color: #ff453a !important;
}

.sheet-option.destructive i {
    color: #ff453a !important;
}

.sheet-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

.sheet-option.cancel {
    background: rgba(255, 255, 255, 0.1);
    justify-content: center;
    font-weight: 600;
    margin-top: 5px;
}

.profile,
.streak-settings button,
.switchmedia {
    display: flex;
    align-items: center
}

.profile {
    width: 100%;
    height: auto;
    flex-direction: column;
    padding-top: 40px
}

.profile .profileimg {
    width: 4.5cm;
    height: 4.5cm;
    border-radius: 50%;
    object-fit: cover
}

.profile h3 {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 400
}

.bio-container,
.read-more-container {
    margin: 10px auto 0 auto;
    width: 90%;
    max-width: 400px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bio-text {
    text-align: center !important;
}

/* Force left alignment for descriptions in posts */
.description .read-more-container,
.tweet .read-more-container {
    margin: 0;
    width: 95%;
    max-width: none;
    text-align: left !important;
    align-items: flex-start;
}

.description .read-more-container p,
.tweet .read-more-container p {
    text-align: left !important;
}

.bio-text {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85) !important;
    overflow: hidden;
}

.read-more-btn,
.read-more-link {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 14px;
    margin-top: 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.read-more-btn:hover,
.read-more-link:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.read-more-btn:active,
.read-more-link:active {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(0);
    opacity: 0.8;
}

.profile .followings {
    margin-top: 20px;
    display: flex
}

.profile .followings button {
    background: 0 0;
    font-size: 18px;
    margin-right: 10px
}

.switchmedia {
    margin-top: 30px !important;
    width: 600px;
    max-width: 300px;
    height: 50px;
    border-radius: 40px;
    background: #1a243b;
    flex-direction: row
}

.switchmedia button {
    height: 45px
}

.switchmedia button img {
    width: 25px
}

.post-media,
.post-media-desc,
.posts {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box
}

.posts {
    width: 100%;
    justify-content: flex-start;
    padding-top: 10px;
    padding-bottom: 120px;
}

.post-media,
.post-media-desc {
    position: relative;
    width: min(98%, 600px);
    margin: 20px auto;
    background: transparent !important;
    background-position: center;
    background-size: cover;
    text-align: left !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    margin-bottom: 20px;
}

.post-media::before,
.post-media-desc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 7.5%;
    width: 85%;
    height: 1px;

}

.post-media::after,
.post-media-desc::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 7.5%;
    width: 85%;
    height: 1px;
}

.post-media-desc p {
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word
}

.post-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 34px;
    background: rgba(0, 0, 0, .678);
    backdrop-filter: blur(5px);
}

.post-media-user {
    position: relative;
    width: 100%;
    height: 2cm;
    z-index: 5;
    display: flex
}

.post-media-user .options,
.post-media-user .user {
    height: 2cm;
    display: flex;
    align-items: center
}

.post-media-user .user {
    width: 80%;
    padding-left: 20px
}

.post-media-user .options {
    padding-left: 15px
}

.post-media-user .options img,
.post-media-user .user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px
}

.user-verified-icon {
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    margin-top: -2px;
    object-fit: contain;
}

/* Options Menu / Dropdown */
.options {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.options .option {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.options .option span {
    position: absolute;
    display: block;
    width: 20px;
    height: 3px;
    background: #fff;
    border-radius: 4px;
    transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6),
        opacity 0.4s ease,
        width 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6),
        height 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6),
        border-radius 0.4s ease !important;
    will-change: transform, opacity;
}

/* Dots state */
.options .option:not(.active) span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.8;
}

.options .option:not(.active) span:nth-child(1) {
    transform: translateX(-8px);
}

.options .option:not(.active) span:nth-child(2) {
    transform: translateX(0);
}

.options .option:not(.active) span:nth-child(3) {
    transform: translateX(8px);
}

/* X state */
.options .option.active span {
    opacity: 1;
    width: 20px;
    height: 3px;
    border-radius: 4px;
}

.options .option.active span:nth-child(1) {
    transform: rotate(45deg);
}

.options .option.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.options .option.active span:nth-child(3) {
    transform: rotate(-45deg);
}

.options .option i {
    font-size: 20px;
    color: #fff;
}

.options .dropdown-menu {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 150px;
    background: rgba(25, 25, 25, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.options .dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.options .dropdown-menu button {
    background: transparent;
    border: none;
    padding: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
    width: 100%;
}

.options .dropdown-menu button:active {
    background: rgba(255, 255, 255, 0.1);
}

.options .dropdown-menu button i {
    font-size: 16px;
}

.options .dropdown-menu button.report-btn i {
    color: #ff9500;
}

.options .dropdown-menu button.delete-btn i {
    color: #ff3b30;
}

/* --- Premium Apple-Style Delete Contextual Menu --- */
.delete {
    position: absolute;
    right: 50px;
    top: 59%;
    transform: translateY(-50%) scale(2) translateX(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
    border-radius: 30px;
}

.delete.showdel {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1) translateX(0);
}

.delete button {
    border-radius: 30px !important;
    padding: 10px 18px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: none;
}

.delete button:active {
    transform: scale(0.92);
    background: transparent !important;

}

.delete button img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    filter: invert(36%) sepia(85%) saturate(3015%) hue-rotate(345deg) brightness(97%) contrast(106%);
    /* Red Trash Icon */
}

/* Target the text nodes directly for red color */
.delete button {
    color: #ff453a !important;
    /* iOS Red */
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Option button animation */
/* Option button animation (handled in .options .option styles above) */

.option img {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- End Apple-Style Delete Menu --- */

/* Report Modal Styles */
.report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 20000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.report-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.report-modal {
    width: 100%;
    max-width: 500px;
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    transform: translateY(110%) scale(0.95);
    transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    opacity: 0;
}

.report-modal-overlay.active .report-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.report-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
}

.report-reasons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-reason-item {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.report-reason-item:active {
    background: rgba(255, 255, 255, 0.15);
}

.report-cancel {
    margin-top: 20px;
    padding: 15px;
    text-align: center;
    color: #ff3b30;
    font-weight: 600;
    cursor: pointer;
}

.post-media-user .user img {
    width: 40px;
    height: 40px
}

.post-media-user .user .time {
    font-size: 13px;
    color: rgba(255, 255, 255, .623) !important
}

.description,
.tweet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 20px;
    text-align: left !important
}

.description {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2;
    padding-bottom: 10px
}

.tweet {
    font-size: 19px
}

.description p {
    width: 95%
}

.final-image,
.tweet {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2;
    overflow: hidden;
    border-radius: 15px;
}

.final-image img,
.final-image video {
    width: 97%;
    height: 100%;
    /* Ensure it fills the container which has the fixed aspect/size if applicable, or auto */
    /* Maintaining user's max-height constraint but ensuring cover fills it */
    height: auto;
    max-height: 600px;
    border-radius: 15px !important;
    object-fit: cover !important;
    display: block;
    margin: 0 auto;
    background: transparent;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.final-image,
.like-comment,
.like-comment button {
    display: flex;
    align-items: center;
    justify-content: center
}

.like-comment {
    position: relative;
    width: 100%;
    height: 2cm;
    z-index: 2
}

.like-comment button {
    background: 0 0;
    border: thick;
    width: 2cm;
    height: 40px;
    background: #1a243b;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 40px;
    font-family: "Fredoka", sans-serif
}

.like-comment img {
    width: 20px;
    margin-left: 10px;
    margin-right: 8px
}

.posts>div {
    display: none;
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.35s ease-out;
    width: 100%;
    will-change: transform, opacity;
}

.posts>div.active {
    display: block;
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.posts {
    overflow: visible !important;
    height: auto !important
}

.enter-from-right {
    display: block !important;
    transform: translateX(50px) scale(0.95);
    opacity: 0;
}

.enter-from-left {
    display: block !important;
    transform: translateX(-50px) scale(0.95);
    opacity: 0;
}

.exit-to-left {
    display: block !important;
    transform: translateX(-50px) scale(0.95);
    opacity: 0;
}

.exit-to-right {
    display: block !important;
    transform: translateX(50px) scale(0.95);
    opacity: 0;
}

.switchmedia button,
.unmute-btn {
    padding: 8px;
    border-radius: 999px;
    border: 0;
    cursor: pointer
}

.switchmedia button {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
    background: transparent;
    display: inline-grid;
    place-items: center;
    width: 2cm;
}

.switchmedia button:active {
    transform: scale(0.92);
}

.switchmedia button.active {
    background: #064686;
    box-shadow: 0 4px 15px rgba(6, 70, 134, 0.3);
    transform: scale(1.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.unmute-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(4px)
}

.scale-btn {
    position: absolute;
    right: 56px;
    bottom: 12px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(4px);
    border-radius: 50%;
    border: thick;
}

.unmute-btn svg {
    width: 18px;
    height: 18px;
    display: block
}

.unmute-btn .label {
    display: none;
    font-size: 12px;
    color: #fff
}

@media (min-width:640px) {
    .unmute-btn .label {
        display: inline-block
    }
}

.fullscreenpic {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: scale(.96);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: opacity .35s cubic-bezier(.25, .1, .25, 1), transform .35s cubic-bezier(.25, .1, .25, 1), backdrop-filter .4s cubic-bezier(.25, .1, .25, 1) .2s, -webkit-backdrop-filter .4s cubic-bezier(.25, .1, .25, 1) .2s, background .35s
}

.fullscreenpic.show {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, .308);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: scale(1)
}

.closepic {
    width: 100%;
    height: auto;
    padding-left: 20px;
    padding-top: 20px
}

.closepic button {
    background: 0 0;
    width: auto;
    height: auto;
    border: thick
}

.closepic button img {
    width: 35px
}

.imagepart {
    height: 15cm;
    align-items: center
}

.imagepart .profileimg {
    width: 6cm;
    height: 6cm;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff
}

.imagepart button {
    position: absolute;
    padding: 5px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-top: 5cm;
    margin-left: 3.9cm;
    background: #1a243b;
    border: 3px solid #fff
}

.imagepart button img,
.likers span button img {
    width: 25px
}

.controlsforimage,
.imagepart,
.viewlikesforpost {
    width: 100%;
    display: flex;
    justify-content: center
}

.controlsforimage {
    height: 2cm;
    align-items: center
}

.controlsforimage button {
    width: 1cm;
    height: 1cm;
    background: #0b041d !important;
    border-radius: 50%;
    border: thick
}

.controlsforimage button img {
    width: 20px
}

#commentsModal,
#likesModal {
    position: fixed;
    z-index: 99999
}

.viewlikesforpost {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: opacity .4s ease, visibility .4s;
}

.viewlikesforpost.visible {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.viewlikesforpost .likers {
    width: 100%;
    max-width: 600px;
    height: 85vh;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 40px 40px 0 0;
    flex-direction: column;
    padding: 20px;
    transform: translateY(100%) scale(0.95);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.viewlikesforpost.visible .likers {
    transform: translateY(0) scale(1);
}

.favlister .faving,
.likers span,
.viewlikesforpost .likers {
    width: 100%;
    display: flex;
    align-items: center
}

.likers span {
    justify-content: center;
    position: relative
}

.likers span h3 {
    font-weight: 400;
    font-size: 25px;
    margin: 0 auto;
    color: #fff
}

.likers span button {
    background: 0 0;
    border: 0;
    position: absolute;
    right: 10px
}

.comments-list,
.favlister {
    width: 100%;
    height: 100vh;
    overflow: auto
}

.favlister .faving {
    height: 2cm;
    padding-left: 20px
}

.favlister .faving img {
    object-position: center;
    margin-right: 20px
}

.comments-list {
    display: flex;
    flex-direction: column
}

.comments-list .comment-row {
    display: grid !important;
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px 20px;
    align-items: start;
    width: 100%
}

.comment-row img,
.favlister .faving img,
.followerslist img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%
}

.comment-row img {
    object-position: center;
    grid-column: 1;
    grid-row: 1/span 2
}

.comment-row .timeuname {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 6px
}

.comment-row .timeuname h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600
}

.comment-row .timeuname p {
    margin: 0;
    font-size: 12px;
    color: #777
}

.comment-row .commentcontent {
    grid-column: 2;
    grid-row: 2;
    font-size: 14px;
    color: #333;
    line-height: 1.4
}

.comment-row .commentcontent p {
    margin: 0
}

.followers,
.followingss {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .349);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transform: scale(.96);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: opacity .35s cubic-bezier(.25, .1, .25, 1), transform .35s cubic-bezier(.25, .1, .25, 1), backdrop-filter .4s cubic-bezier(.25, .1, .25, 1) .2s, -webkit-backdrop-filter .4s cubic-bezier(.25, .1, .25, 1) .2s, background .35s
}

.followers.visiblefollowers,
.followingss.visiblefollowings {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0, 0, 0, .308);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: scale(1)
}

.followingss {
    inset: 0
}

.followerslist .thatperson,
.topfollowers {
    width: 100%;
    height: 2cm;
    display: flex;
    align-items: center
}

.topfollowers {
    justify-content: center;
    position: relative
}

.topfollowers button {
    position: absolute;
    left: 10px;
    background: 0 0;
    border: 0;
    cursor: pointer
}

.topfollowers button img {
    width: 24px;
    height: 24px
}

.topfollowers h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 100
}

.followerslist {
    width: 100%;
    height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.followerslist .thatperson {
    padding: 10px
}

.thatperson h3 {
    font-weight: 400;
    flex: 1;
    font-size: 1rem;
    color: #eee;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.thatperson button {
    margin-left: auto;
    font-family: "Fredoka", sans-serif;
    background: #f70352;
    padding: 6px 12px;
    border: 0;
    border-radius: 40px;
    background: #ff4d4d;
    color: #fff;
    cursor: pointer;
    font-size: .9rem;
    transition: background .3s ease
}

.thatperson button.following-btn {
    background: #007aff !important;
}

.followerslist img {
    margin-right: 10px
}

.thatperson {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 8px;
    margin: 6px 0;
    transition: transform .3s ease, box-shadow .3s ease
}

.thatperson img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover
}

.thatperson button:hover {
    background: #ff1a1a
}

.thatperson.removing {
    animation: vanishAir .6s forwards ease-in
}

/* .extlink displayed via shared styles below */

.link-description {
    color: #3498db !important;
}

.followuser {
    margin-top: 20px
}

.followuser button {
    width: 3.5cm;
    height: 45px;
    border-radius: 30px;
    font-family: "Fredoka", sans-serif;
    border: thick
}

.followuser .follow {
    background: #ff4d4d !important
}

.followuser .follow.following {
    background: #007aff !important;
}

.followuser .follow.requested {
    background: #8e8e93 !important;
}

.followuser .message {
    background: 0 0;
    border: 2px solid #007bff !important
}

.comment-input-row {
    width: 100%;
    height: 2.8cm;
    padding: 10px 0
}

.comment-input-row input,
.like-row input {
    width: 75%;
    height: 50px;
    margin-left: 10px;
    margin-right: 10px;
    border: thick;
    border-radius: 20px;
    font-family: "Fredoka";
    outline: 0;
    padding-left: 10px;
    background: #1a2132
}

.comment-input-row button {
    background: 0 0;
    border: 0;
    flex-shrink: 0
}

.comment-input-row button img,
.like-row button img {
    width: 28px;
    height: 28px
}

.comment-input-row .comment-text,
.like-row .comment-text {
    font-size: 1rem
}

.comment-input-row,
.like-row,
.like-row button {
    display: flex;
    align-items: center;
    justify-content: center
}

.like-row {
    width: 100%;
    height: 2.8cm;
    padding: 10px 0
}

.comment-input-row img,
.like-row img {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    object-fit: cover;
    flex-shrink: 0
}

.like-row button {
    background: rgba(255, 174, 0, .418);
    border: 0;
    flex-shrink: 0;
    padding: 5px 5px 5px 15px;
    border-radius: 40px
}

#like.liking {
    animation: likePop .4s cubic-bezier(.4, 2, .3, 1);
    background: linear-gradient(135deg, gold, #ff9800);
    box-shadow: 0 0 16px #ffd70088;
    transform: scale(1.15)
}

.read-more {
    color: #0060ff !important;
    cursor: pointer;
    text-decoration: none !important
}

/* Reply System Styles */
.commentbar {
    width: 100%;
    height: 2.8cm;
    justify-content: center;
    padding-bottom: 30px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
}

.commentbar input {
    font-family: "Fredoka";
    width: 75%;
    height: 50px;
    margin-left: 10px;
    margin-right: 10px;
    border: thick;
    border-radius: 20px;
    outline: 0;
    padding-left: 10px;
    background: #1a2132;
    color: #fff;
}

.commentbar button {
    background: 0 0;
    border: 0;
    flex-shrink: 0;
}

.commentbar button img {
    width: 28px;
    height: 28px;
}

.replying-indicator {
    width: 100%;
    box-sizing: border-box;
}

.replies-container {
    margin-left: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 10px;
}

.comment-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: "Fredoka", sans-serif;
}

.reply-to-comment-btn {
    color: #999;
    font-size: 12px;
}

.view-replies-btn {
    color: #1976d2;
    font-size: 12px;
}

.comment-loader,
.no-comments {
    text-align: center;
    padding: 20px;
    color: #ccc;
}

.comment-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.comment {
    display: flex;
    padding: 10px 0;
    width: 100%;
}

.comment-text {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-username {
    font-size: 14px;
    color: #fff;
}

.comment-time {
    font-size: 12px;
    color: #999;
}

.comment-content {
    font-size: 14px;
    color: #e6f7ff;
    word-wrap: break-word;
}

/* Appended from home.css for comments */
@keyframes fadeInBg {
    0% {
        background: 0 0
    }

    to {
        background: rgba(0, 0, 0, .4)
    }
}

.modal-overlay,
.modal-overlay.active {
    background: rgba(0, 0, 0, .4)
}

.modal-overlay.active {
    animation: fadeInBg .3s ease forwards;
    display: flex
}

.modal-content {
    background: #fff;
    max-height: 80%;
    transform: translateY(100%);
    overflow-y: auto;
    box-shadow: 0-2px 10px rgba(0, 0, 0, .2);
    width: 100%;
    height: 80vh;
    position: absolute;
    bottom: -100%;
    left: 0;
    backdrop-filter: blur(10px) saturate(190%);
    -webkit-backdrop-filter: blur(10px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 40px 40px 0 0;
    transition: bottom .4s ease-in-out;
    padding: 20px;
    box-sizing: border-box;
    flex-shrink: 0 !important;
    background: rgba(20, 20, 20, 0.85);
    z-index: 1001
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
    bottom: 0;
    padding-bottom: 20px !important
}

.modal-overlay::before {
    content: "";
    inset: 0;
    z-index: 0;
    filter: url(#glass-distortion)blur(1px) saturate(120%);
    -webkit-backdrop-filter: blur(1px) saturate(120%);
    backdrop-filter: blur(1px) saturate(120%);
    transition: filter .5s cubic-bezier(.4, 2, .6, 1), -webkit-backdrop-filter .5s cubic-bezier(.4, 2, .6, 1), backdrop-filter .5s cubic-bezier(.4, 2, .6, 1)
}

.modal-overlay.distort::before {
    filter: url(#glass-distortion)blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%)
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: 0 0;
    overflow-y: auto;
    transition: background .4s ease-in-out
}

.modal-content img {
    flex-shrink: 0 !important
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 40px;
    font-size: 2.5rem;
    cursor: pointer
}

.modal-content h2 {
    margin-top: 0;
    text-align: center;
    font-weight: 300 !important
}

#commentsList,
#friendsList {
    margin-top: 10px;
    width: 100%;
    height: 80%;
    margin-bottom: 10px;
    overflow-y: scroll;
    overflow-x: hidden
}

.profileforcomments {
    border-radius: 50%
}

.comment,
.commentbar {
    display: flex;
    align-items: center
}

.commentbar {
    width: 100%;
    height: 2.8cm;
    justify-content: center;
    padding-bottom: 30px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1002;
}

#commentsList {
    margin-top: 10px;
    width: 100%;
    height: calc(89% - 2.8cm);
    margin-bottom: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 3cm;
}

.comment img,
.commentbar img {
    object-fit: cover
}

.commentbar img {
    width: 50px;
    height: 50px
}

.commentbar button {
    background: 0 0;
    border: 0;
    flex-shrink: 0
}

.commentbar button img {
    width: 28px;
    height: 28px
}

.comment {
    padding: 10px 0
}

.comment img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0
}

.comment .comment-text {
    font-size: 1rem
}

.like-btn,
.reply-btn,
.view-replies-btn,
.delete-comment-btn,
.delete-reply-btn {
    border: thick
}

.reply {
    margin-left: -30px;
}

.like-btn img,
.reply-btn img,
.view-replies-btn img,
.delete-comment-btn img,
.delete-reply-btn img {
    width: 18px !important;
    height: 18px !important
}

.like-btn,
.opensection-btn,
.posting-txt textarea,
.reply-btn,
.view-replies-btn,
.delete-comment-btn,
.delete-reply-btn {
    background: 0 0;
    font-family: "Fredoka", sans-serif;
    color: #999;
}

.opensection-btn {
    border: thick;
    color: #3498db !important
}

.reply-btn .commentfunction {
    align-items: center;
    justify-content: left;
    padding-top: 2px
}

.comment-time {
    font-size: 12px !important
}

.dummy-friend {
    display: flex;
    align-items: center;
    padding: 10px 0
}

.dummy-friend img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover
}

.dummy-friend .friend-name {
    font-size: 1rem
}

.commentbar input {
    font-family: "Fredoka";
    width: 75%;
    height: 50px;
    margin-left: 10px;
    margin-right: 10px;
    border: thick;
    border-radius: 20px;
    outline: 0;
    padding-left: 10px;
    background: #1a2132
}

/* Force visibility of comment action buttons */
.comment-actions button {
    border: none !important;
    background: transparent !important;
    color: #ccc !important;
    cursor: pointer !important;
}

.view-replies-btn {
    color: #1976d2 !important;
}

.delete-comment-btn,
.delete-reply-btn {
    border: none !important;
    background: transparent !important;
}

.delete-comment-btn img,
.delete-reply-btn img {
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    filter: none !important;
}

.reply-to-comment-btn {
    color: #999 !important;
}

.comment-actions {
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* iOS Style Alert Modal */
.ios-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.ios-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.ios-modal {
    width: 270px;
    background: rgba(245, 245, 245, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.ios-modal-overlay.active .ios-modal {
    transform: scale(1);
}

.ios-modal-content {
    padding: 20px 16px;
}

.ios-modal-title {
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 4px;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ios-modal-desc {
    font-size: 13px;
    color: #000;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ios-modal-buttons {
    display: flex;
    border-top: 1px solid rgba(60, 60, 67, 0.20);
}

.ios-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 0;
    font-size: 17px;
    cursor: pointer;
    border-right: 1px solid rgba(84, 84, 88, 0.65) !important;
    font-family: 'Fredoka', sans-serif !important;
    color: #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ios-btn:last-child {
    border-right: none;
}

.ios-btn:active {
    background: rgba(60, 60, 67, 0.10);
}

.ios-btn-delete {
    color: #ff3b30;
    font-weight: 600;
}

.ios-btn-cancel {
    font-weight: 400;
}

/* iOS-Style Modal System */
.ios-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 120000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ios-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.ios-modal {
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    width: 270px;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.ios-modal-overlay.active .ios-modal {
    transform: scale(1);
}

.ios-modal-title {
    color: #fff !important;
}

.ios-modal-desc {
    color: rgba(255, 255, 255, 0.8) !important;
}

.ios-modal-buttons {
    border-top: 1px solid rgba(84, 84, 88, 0.65) !important;
}


.ios-btn:last-child {
    border-right: none !important;
}

.ios-btn-cancel {
    color: #0a84ff !important;
    /* iOS Dark Mode Blue */
    font-weight: 400 !important;
}

.ios-btn-delete {
    color: #ff453a !important;
    /* iOS Dark Mode Red */
    font-weight: 600 !important;
}

.ios-btn:active {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Premium Like Animation */
.like-heart-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 80px;
    z-index: 1000;
    pointer-events: none;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.like-heart-pop.animate {
    animation: star-pop 0.8s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards;
}

@keyframes star-pop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    30% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -150%) scale(0.5);
        opacity: 0;
    }
}

.flying-star {
    position: absolute;
    font-size: 24px;
    z-index: 1001;
    pointer-events: none;
    animation: fly-to-star 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fly-to-star {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        transform: translate(var(--delta-x), var(--delta-y));
        opacity: 0;
    }
}

.liked-bounce {
    animation: icon-bounce 0.45s cubic-bezier(0.17, 0.89, 0.32, 1.49);
}

@keyframes icon-bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.star-btn i.fi-sr-star {
    color: #ffd700 !important;
    font-size: 19px !important;
}

.star-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.star-btn i {
    font-size: 19px !important;

}

/* --- Morphic and Dynamic Island Surgical Injection --- */

nav {
    position: fixed;
    top: 15px;
    left: 15px;
    right: 15px;
    width: auto;
    height: 60px;
    padding: 0 20px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(25, 25, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    display: none;
    /* Hidden by default if not home */
    align-items: center;
    z-index: 10000;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
}

nav.dynamic-island-active {
    display: flex;
    height: 70px;
    border-radius: 35px;
    background: rgba(10, 10, 10, 0.98) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    padding: 0 30px;
    animation: notchPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

nav.dynamic-island-expanded {
    display: flex;
    height: 120px;
    border-radius: 40px;
    background: rgba(10, 10, 10, 0.179) !important;
    flex-direction: column;
    justify-content: center;
    padding: 15px 30px;
}

@keyframes notchPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

nav .logo,
nav .buttons {
    transition: all 0.4s ease, opacity 0.3s ease;
}

nav.dynamic-island-active .logo,
nav.dynamic-island-active .buttons,
nav.dynamic-island-expanded .logo,
nav.dynamic-island-expanded .buttons {
    opacity: 0 !important;
    transform: scale(0.8);
    pointer-events: none;
}

nav.dynamic-island-active .buttons,
nav.dynamic-island-expanded .buttons {
    position: absolute;
    visibility: hidden;
}

.nav-confirm-msg {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

nav.dynamic-island-expanded .nav-confirm-msg {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.nav-confirm-title {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.nav-confirm-btns {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.nav-notch-btn {
    padding: 8px 30px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.nav-notch-btn:active {
    transform: scale(0.95);
}

.nav-notch-btn.yes {
    background: #007aff;
    color: #fff;
}

.nav-notch-btn.no {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.nav-success-msg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

nav.dynamic-island-active .nav-success-msg {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.nav-success-msg i {
    color: #34c759;
    font-size: 20px;
}

.nav-success-msg span {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
}

.btmnav2 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: transparent;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.btmnav2 .resist {
    position: relative;
    bottom: 0;
    margin-bottom: 20px;
    width: calc(100% - 30px);
    max-width: 600px;
    height: 65px;
    pointer-events: auto;
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    background: rgba(25, 25, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 10002;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
}

.morphic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10001;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.resist-icons {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    transition: all 0.4s ease;
    padding: 0 10px;
}

.resist.morphic-active {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    max-width: 100%;
    height: 80vh;
    border-radius: 40px;
    background: rgba(15, 15, 15, 0.182) !important;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 0;
}

.resist.morphic-active .resist-icons {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

.resist-morphic-panel {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.resist.morphic-active .resist-morphic-panel {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.morphic-handle-bar {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.morphic-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    flex-shrink: 0;
    position: absolute;
    right: 20px;
}

.morphic-title {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.morphic-comments-list,
.morphic-follow-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* Fix double scrollbar by disabling inner scroll when inside any scrolling morphic list */
.morphic-comments-list .followerslist,
.morphic-follow-list .followerslist,
#visitorsPanel .followerslist {
    height: auto !important;
    overflow: visible !important;
}

.morphic-input-area {
    padding: 15px 20px 30px 20px;
    background: rgba(20, 20, 20, 0.364);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.morphic-input-wrap {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 25px;
    padding: 5px 5px 5px 15px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.morphic-input-wrap input {
    background: transparent;
    border: none;
    color: #fff;
    flex: 1;
    height: 40px;
    font-size: 15px;
    outline: none;
}

.morphic-input-wrap button {
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.morphic-friends-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.morphic-share-area {
    padding: 0px 0px 0px 0px;
    background: rgba(20, 20, 20, 0.364);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.morphic-share-area .functionssend {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 24px 0;
    position: relative;
    bottom: auto;
    max-height: none;
    overflow: visible;
}

.morphic-share-area .functionssend button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    width: 90px;
    height: 80px;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.morphic-share-area .functionssend button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.morphic-share-area .functionssend button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.morphic-share-area .functionssend button:hover::before {
    opacity: 1;
}

.morphic-share-area .functionssend button:active {
    transform: scale(0.96) translateY(0);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.1s ease;
}

.morphic-share-area .functionssend img {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.morphic-share-area .functionssend button:hover img {
    transform: scale(1.1);
}

.morphic-share-area h3 {
    font-size: 14px;
    font-weight: 500;
}


/* ===== Morphic Panel System Styles (synced from search.css / home.

) ===== */

.btmnav2 .resist {
    position: relative;
    bottom: 0;
    margin-bottom: 20px;
    width: calc(100% - 30px);
    max-width: 600px;
    height: 65px;
    max-height: 65px;
    pointer-events: auto;
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    background: rgba(25, 25, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 10002;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        max-height 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        height 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    overflow: hidden;
}

.morphic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;

}

.morphic-likes-list {
    overflow: auto !important;

}

.morphic-overlay:not([style*="display: none"]) {
    pointer-events: auto;
}

.resist-icons {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    transition: all 0.4s ease;
    padding: 0 10px;
}

.resist.morphic-active {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    max-width: 100%;
    height: 80vh;
    max-height: 80vh;
    border-radius: 40px;
    background: rgba(15, 15, 15, 0.182) !important;
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 0;
    transition: height 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        max-height 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.resist.morphic-height-small {
    height: 320px !important;
    max-height: 320px !important;
}

.resist.morphic-height-medium {
    height: 620px !important;
    max-height: 620px !important;
}

.resist.morphic-height-toast {
    height: 130px !important;
    max-height: 130px !important;
}

.resist.morphic-active .resist-icons {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

.resist-morphic-panel {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.resist.morphic-active .resist-morphic-panel,
.resist.morphic-confirm .resist-morphic-panel {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.morphic-handle-bar {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.morphic-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    flex-shrink: 0;
    position: absolute;
    right: 20px;
}

.morphic-close-btn.is-back i {
    transform: rotate(90deg);
}

.morphic-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.morphic-close-btn i {
    font-size: 20px;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.morphic-title {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.morphic-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

.morphic-comments-list .comment {
    display: flex;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 12px;
}

.morphic-input-area {
    padding: 15px 20px 30px 20px;
    background: rgba(20, 20, 20, 0.364);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.morphic-input-wrap {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 25px;
    padding: 5px 5px 5px 15px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.morphic-input-wrap input {
    background: transparent;
    border: none;
    color: #fff;
    flex: 1;
    height: 40px;
    font-size: 15px;
    outline: none;
}

.morphic-input-wrap button {
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.morphic-friends-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.morphic-share-area {
    padding: 0px 0px 0px 0px;
    background: rgba(20, 20, 20, 0.364);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.morphic-share-area .functionssend {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 24px 0;
    position: relative;
    bottom: auto;
    max-height: none;
    overflow: visible;
}

.morphic-share-area .functionssend button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    width: 90px;
    height: 80px;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.morphic-share-area .functionssend button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.morphic-share-area .functionssend button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.morphic-share-area .functionssend button:hover::before {
    opacity: 1;
}

.morphic-share-area .functionssend button:active {
    transform: scale(0.96) translateY(0);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.1s ease;
}

.morphic-share-area .functionssend img {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.morphic-share-area .functionssend button:hover img {
    transform: scale(1.1);
}

.morphic-share-area h3 {
    font-size: 14px;
    font-weight: 500;
}

/* Morphic Confirm Area */
.morphic-confirm-area {
    padding: 30px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex: 1;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.resist.morphic-confirm .morphic-confirm-area {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.morphic-confirm-content {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: morphicConfirmContentFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

@keyframes morphicConfirmContentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.morphic-confirm-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.morphic-confirm-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.morphic-confirm-buttons {
    display: flex;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    opacity: 0;
    transform: translateY(20px);
    animation: morphicConfirmButtonsFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

@keyframes morphicConfirmButtonsFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.morphic-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.morphic-btn:active {
    transform: scale(0.92);
}

.morphic-btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.morphic-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.morphic-btn-delete {
    color: #ff453a !important;
    animation: morphicDeletePulse 2s ease-in-out 0.9s infinite;
}

@keyframes morphicDeletePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
        text-shadow: 0 0 8px rgba(255, 69, 58, 0.4);
    }

    100% {
        transform: scale(1);
    }
}

/* Morphic Confirm State */
.resist.morphic-confirm {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    max-width: 100%;
    height: 280px;
    min-height: 280px;
    border-radius: 40px;
    background: rgba(15, 15, 15, 0.277) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    padding: 0;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 10005;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.resist.morphic-confirm.morphic-active {
    transform: scale(0.98);
}



/* Override legacy .delete absolute positioning inside morphic panel */
.resist .morphic-options-area .delete.showdel {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 15px !important;
    /* Subtle dark tint for contrast */
    border-radius: 25px !important;
    animation: morphicOptionsSlideIn 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes morphicOptionsSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.morphic-opt-btn {
    width: 100% !important;
    padding: 18px 25px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    height: auto !important;
}

.morphic-opt-btn:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.1) !important;
}

.morphic-opt-btn img {
    width: 22px !important;
    height: 22px !important;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.morphic-opt-btn span {
    font-size: 17px;
    font-weight: 600;
    color: #fff !important;
}

.morphic-opt-btn.destructive {
    background: rgba(255, 69, 58, 0.1) !important;
    border-color: rgba(255, 69, 58, 0.2) !important;
}

.morphic-opt-btn.destructive span {
    color: #ff453a !important;
}

.morphic-opt-btn.destructive img {
    filter: invert(36%) sepia(85%) saturate(3015%) hue-rotate(345deg) brightness(97%) contrast(106%) !important;
}

.morphic-opt-btn.cancel {
    margin-top: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.morphic-opt-btn.cancel span {
    color: rgba(255, 255, 255, 0.6) !important;
}

.morphic-opt-btn.cancel img {
    opacity: 0.5;
}

/* Morphic Options Area */
.morphic-options-area {
    display: none;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    animation: morphicOptionsIn 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}



@keyframes morphicOptionsIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.morphic-options-container,
.morphic-delete-container {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.morphic-report-area {
    display: none;
    flex: 1;
    width: 100%;
    padding: 20px;
    overflow-y: auto;
}

.morphic-report-area .report-reasons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.morphic-report-area .report-reason-item {
    padding: 18px 25px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.morphic-report-area .report-reason-item:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.1);
}

/* Morphic Success/Toast Area */
.morphic-success-area {
    display: none;
    flex: 1;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    text-align: center;
    margin: 0 !important;
    animation: morphicOptionsIn 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.morphic-success-icon {
    width: 50px;
    height: 50px;
    background: rgba(48, 209, 88, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.morphic-success-icon i {
    font-size: 24px;
    color: #30d158;
}

.morphic-success-message {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.morphic-btn-option {
    width: 100%;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.morphic-btn-option:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.morphic-btn-option img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.morphic-btn-option span {
    font-size: 17px;
    font-weight: 600;
    color: #fff !important;
    letter-spacing: -0.01em;
}

.morphic-btn-option.destructive {
    background: rgba(255, 69, 58, 0.08) !important;
    border-color: rgba(255, 69, 58, 0.15) !important;
}

.morphic-btn-option.destructive span {
    color: #ff453a !important;
}

.morphic-btn-option.destructive img {
    filter: invert(36%) sepia(85%) saturate(3015%) hue-rotate(345deg) brightness(97%) contrast(106%);
}

.resist.morphic-confirm:not(.morphic-active) {
    animation: morphicConfirmExpand 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes morphicConfirmExpand {
    0% {
        transform: scale(0.9);
        height: 65px;
        opacity: 0;
    }

    100% {
        transform: scale(1);
        height: 280px;
        opacity: 1;
    }
}

.resist.morphic-confirm .resist-icons {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

.resist.morphic-confirm .morphic-comments-list,
.resist.morphic-confirm .morphic-friends-list,
.resist.morphic-confirm .morphic-input-area,
.resist.morphic-confirm .morphic-share-area {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Post Deletion Animation */
@keyframes deletePostDissolve {
    0% {
        opacity: 1;
        transform: scale(1);
        max-height: 1000px;
        margin-bottom: 20px;
    }

    40% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border: none;
    }
}

.post.deleting,
.post-media.deleting,
.post-media-desc.deleting {
    animation: deletePostDissolve 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Morphic Options List */
.morphic-options-list {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: calc(100% - 60px);
}

.morphic-option-btn {
    width: 100%;
    padding: 18px;
    margin-bottom: 12px;
    border-radius: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    /* Glassy feel */
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-align: left;
}

.morphic-option-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.12);
}

.morphic-option-btn img,
.morphic-option-btn i {
    width: 24px;
    height: 24px;
    /* Icon size */
    object-fit: contain;
    filter: invert(1);
    /* Ensure icons are white */
}

.morphic-option-btn.delete-option {
    color: #ff453a;
    /* iOS Red */
    background: rgba(255, 69, 58, 0.15);
}

.morphic-option-btn.delete-option img,
.morphic-option-btn.delete-option i {
    filter: none;
    /* Keep original color or handle via SVG filter if needed */
}

/* Morphic Edit Area */
.morphic-edit-area {
    display: none;
    flex-direction: column;
    padding: 20px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.morphic-edit-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    height: 100%;
}

.morphic-edit-textarea {
    width: 100%;
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 15px;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    resize: none;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.morphic-edit-textarea:focus {
    border-color: rgba(255, 255, 255, 0.3);
}

.morphic-edit-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
}

.morphic-btn-save {
    background: #007aff !important;
    color: #fff !important;
}

.morphic-btn-save:active {
    background: #0063cc !important;
}

/* Morphic Edit State - Smaller Height */
.resist.morphic-edit {
    height: 380px !important;
    /* Adjusted slightly for better textarea fit */
    min-height: 380px;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}


/* Ensure active/edit overrides standard active height if both present */
.resist.morphic-active.morphic-edit {
    height: 350px !important;
}

/* Share Toast */
.share-toast {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 999999;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.share-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Skeleton Loader */
.skeleton-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2a2a2a;
    z-index: 5;
    border-radius: 15px;
    overflow: hidden;
    pointer-events: none;
}

.skeleton-loader::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.05) 20%,
            rgba(255, 255, 255, 0.1) 60%,
            rgba(255, 255, 255, 0));
    animation: shimmer 2s infinite;
}

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

.repost-badge {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    max-width: 80%;
    transition: background 0.2s;
    text-decoration: none;
}

.repost-badge:active {
    background: rgba(255, 255, 255, 0.2);
}

.repost-badge img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.repost-badge span {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repost-badge {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
    max-width: 85%;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.repost-badge:active {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-50%) scale(0.98);
}

.repost-badge img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.repost-badge span {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* End of profile.css */

/* External Link Badges */
.extlink {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 40px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    margin-top: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s ease;
    cursor: pointer;
}

.extlink:hover {
    background: rgba(255, 255, 255, 0.2);
}

.extlink-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border-radius: 4px;
}

.extlink-text {
    font-weight: 500;
}

/* Mutual Friends / Highlights Styles */
.highlights-section {
    padding: 0 10px;
    z-index: 10;
    position: relative;
    margin-top: 24px;
    width: 100%;
}

.highlights-title {
    font-size: 14px;
    font-weight: 700;
    color: #8E8E93 !important;
    margin-bottom: 16px;
    margin-left: 10px;
    text-align: left;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.highlights-container::-webkit-scrollbar {
    display: none;
}

.highlights-toggle-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 10px;
}

.highlights-toggle-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.highlights-section.collapsed .highlights-toggle-btn i {
    transform: rotate(-90deg);
}

.highlights-section.collapsed .highlights-container {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
}

.highlights-container {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 10px 20px 25px 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    cursor: grab;
    justify-content: flex-start;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 300px;
    opacity: 1;
}

.highlight-card {
    flex: 0 0 145px;
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 26px;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    scroll-snap-align: start;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.highlight-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

.highlight-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    position: relative;
    padding: 3px;
    background: linear-gradient(45deg, #FF9500 0%, #FF2D55 100%);
    box-shadow: 0 4px 12px rgba(255, 45, 85, 0.3);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.highlight-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #000;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.highlight-avatar img.lazy-loaded {
    opacity: 1;
}

.highlight-info {
    width: 100%;
    overflow: hidden;
    margin-bottom: 8px;
}

.highlight-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: #fff !important;
}

.highlight-username {
    font-size: 11px;
    color: #8E8E93 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 3px;
}

.highlight-follow-btn {
    margin-top: 6px;
    background: #007AFF !important;
    color: #fff !important;
    border: none;
    padding: 8px 0;
    width: 100%;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

.highlight-follow-btn:active {
    transform: scale(0.95);
}

.highlight-follow-btn.following {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    box-shadow: none;
}