#feed-app,
#messages-app,
#profile-app {

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;

}

/* ===========================
   PHONE PREVIEW
=========================== */

.phone-preview {

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px;

    animation:
        cardPop .45s cubic-bezier(.34,1.56,.64,1);

}



/* ===========================
   PHONE
=========================== */

.phone {

    width:380px;

    height:760px;

    background:#1F1F1F;

    border-radius:42px;

    border:8px solid #2C2C2C;

    overflow:hidden;

    display:flex;

    flex-direction:column;

}



/* ===========================
   STATUS BAR
=========================== */

.phone-status {

    flex-shrink:0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 18px;

    font-weight:600;

    font-size:.9rem;

    user-select:none;

}


.phone-time {

    color:#FFF8E6;

    letter-spacing:.02em;

}


.phone-status-icons {

    height:20px;

    width:auto;

    display:block;

}



/* ===========================
   HEADER
=========================== */

.phone-header {

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    background:#FFF8E6;

    border-bottom:2px solid rgba(93,53,22,.08);

}


.phone-header h2 {

    margin:0;

    font-size:1rem;

    color:#5D3516;

}


.phone-back {

    border:none;

    background:none;

    color:#B96A59;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;

}


.phone-back:hover {

    transform:translateX(-3px);

}



/* ===========================
   FEED
=========================== */

.phone-feed {

    flex:1;

    min-height:0;

    overflow-y:auto;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:0;

    background:#FFF8E6;

}



/* scrollbar */

.phone-feed::-webkit-scrollbar {

    width:6px;

}


.phone-feed::-webkit-scrollbar-thumb {

    background:#D8C4AA;

    border-radius:999px;

}



/* ===========================
   POSTS
=========================== */

.post {

    flex-shrink:0;

    background:#FFF8E6;

    border-radius:18px;

    padding:18px;

}



.post-divider {

    width:100%;

    height:1px;

    margin:14px 0;

    background:#D8C4AA;

    flex-shrink:0;

}



/* ===========================
   POST PROFILE
=========================== */

.post-profile{

    display:flex;

    align-items:center;

    gap:12px;

    width:max-content;

    color:inherit;

    text-decoration:none;

    cursor:pointer;

}


.post-profile > img:first-child{

    width:48px;
    height:48px;

    object-fit:cover;

    border-radius:50%;

}


.post-profile > div {

    display:flex;

    flex-direction:column;

}

.post-profile h3{


    display:flex;

    align-items:center;

    gap:5px;

    margin:0;

}


.post-profile-handle{

    display:inline-flex;

    align-items:center;

    gap:5px;

    color:var(--brown);

    font-size:.8rem;

}


.verified-badge{

    width:16px !important;
    height:16px !important;

    object-fit:contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(32%)
        sepia(25%)
        saturate(900%)
        hue-rotate(345deg)
        brightness(90%)
        contrast(90%);

}


.post-profile span {

    color:#A07A5A;

    font-size:.82rem;

}



/* ===========================
   TEXT
=========================== */

.post-text {

    margin:0;

    color:#6E4A2E;

    line-height:1.7;

    font-size:.92rem;

}



/* ===========================
   FOOTER
=========================== */

.post-footer {

    display:flex;

    gap:18px;

    margin-top:16px;

}


.post-footer button {

    display:flex;

    align-items:center;

    gap:6px;

    border:none;

    background:none;

    color:#A07A5A;

    font-size:.82rem;

    cursor:pointer;

    padding:0;

    transition:.25s ease;

}


.post-footer img {

    width:18px;

    height:18px;

    object-fit:contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(32%)
        sepia(25%)
        saturate(900%)
        hue-rotate(345deg)
        brightness(90%)
        contrast(90%);

}


.post-footer button:hover {

    transform:translateY(-2px);

}



/* ===========================
   NAVBAR
=========================== */

.phone-navbar {

    flex-shrink:0;
    
    display:flex;

    justify-content:space-around;

    align-items:center;

    padding:14px;

    background:#FFF8E6;

    border-top:
        2px solid rgba(93,53,22,.08);

}



.phone-navbar button {

    width:36px;

    height:36px;

    border:none;

    background:none;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s ease;

}



.phone-navbar img {

    width:22px;

    height:22px;

    object-fit:contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(32%)
        sepia(25%)
        saturate(900%)
        hue-rotate(345deg)
        brightness(90%)
        contrast(90%);

}



.phone-navbar button:hover {

    transform:translateY(-3px);

}


.phone-navbar button {

    border:none;

    background:none;

    font-size:1.2rem;

    cursor:pointer;

    transition:.25s ease;

}


.phone-navbar button:hover {

    transform:translateY(-2px);

}


/* ===========================
   MOBILE TOGGLE BUTTONS
=========================== */

button.mobile-toggle {

    display: none;

    position: fixed;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 8px;

    border: 2px solid var(--brown-dark);
    border-radius: 14px;

    background: var(--cream);

    color: var(--brown-dark);

    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1;

    appearance: none;
    -webkit-appearance: none;

    box-shadow: none;
    outline: none;

    z-index: 10000;

    cursor: pointer;

    align-items: center;
    justify-content: center;

    transition:
        transform .2s ease,
        background-color .2s ease;

}


button.mobile-toggle img {

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: contain;

}


button.mobile-toggle:hover {

    transform: translateY(-2px);

    background: var(--orange-light);

}


button.mobile-toggle:active {

    transform:
        translateY(1px)
        scale(.96);

}


@media (max-width: 1165px) {

    button.mobile-toggle {

        display: flex !important;

        position: fixed !important;

        top: 20px !important;

    }


    button.sidebar-toggle {

        left: 20px !important;

    }


    button.extra-toggle {

        right: 20px !important;

    }

}