/* assets/css/style.css */

:root {
    --primary-color: #1877f2;
    --secondary-color: #42b72a;
    --background-color: #f0f2f5;
    --card-background-color: #ffffff;
    --text-color-primary: #050505;
    --text-color-secondary: #65676b;
    --text-color-placeholder: #8a8d91;
    --divider-color: #CED0D4;
    --icon-color-default: #606770;
    --icon-bg-color: #E4E6EB;
    --icon-bg-hover: #D8DADF;
    --top-nav-height: 50px;
    --bottom-nav-height: 50px;
    --default-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --border-radius-standard: 8px;
    --border-radius-circle: 50%;
}

body {
    font-family: var(--default-font-family);
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color-primary);
    line-height: 1.4;
    overscroll-behavior-y: contain;
    padding-top: var(--top-nav-height);
    padding-bottom: var(--bottom-nav-height);
    overflow-x: hidden;
}

input, textarea, select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;}

.profile-pic-placeholder {
    background-color: #ccc; border-radius: var(--border-radius-circle);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.profile-pic-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.profile-pic-placeholder i { color: #fff; font-size: 60%; }

.icon-button {
    background-color: var(--icon-bg-color); border-radius: var(--border-radius-circle);
    width: 36px; height: 36px; display: flex;
    align-items: center; justify-content: center; cursor: pointer;
    font-size: 18px; color: var(--text-color-primary);
}
.icon-button:hover { background-color: var(--icon-bg-hover); }

/* --- Top Navigation Bar --- */
.top-nav {
    background-color: var(--card-background-color); padding: 0 12px;
    border-bottom: 1px solid var(--divider-color); display: flex;
    align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000; height: var(--top-nav-height);
}
.top-nav-left { display: flex; align-items: center; }
.site-name-dropdown { position: relative; display: inline-block; }
.site-name-dropdown .site-name-button {
    font-size: 24px; font-weight: 700; font-family: 'Segoe UI Bold', var(--default-font-family);
    color: var(--primary-color); padding: 6px 0; cursor: pointer;
    display: flex; align-items: center;
}
.site-name-dropdown .site-name-button .fa-caret-down {
    font-size: 14px; margin-left: 4px; color: var(--text-color-secondary);
    transition: transform 0.2s ease;
}
.site-name-dropdown.open .site-name-button .fa-caret-down { transform: rotate(180deg); }
.dropdown-content {
    display: none; position: absolute; background-color: var(--card-background-color);
    min-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1001; border-radius: var(--border-radius-standard); padding: 8px 0;
    top: calc(100% + 4px); left: 0; border: 1px solid var(--divider-color);
}
.dropdown-content a {
    font-size: 16px; font-weight: 500; font-family: 'Segoe UI', var(--default-font-family);
    color: var(--text-color-primary); padding: 10px 16px; cursor: pointer;
    display: block; text-decoration: none;
}
.dropdown-content a:hover { background-color: var(--icon-bg-hover); }
.site-name-dropdown.open .dropdown-content { display: block; }

.top-nav-right { display: flex; align-items: center; gap: 8px; }

/* --- Main Content Area --- */
.main-content-area {
    min-height: calc(100vh - var(--top-nav-height) - var(--bottom-nav-height));
    display: flex; justify-content: center; padding-bottom: 10px;
}
.feed-column { width: 100%; max-width: 600px; }
.content-section { display: none; text-align: center; font-size: 18px;}
.content-section.active { display: block; }
#home-section { padding: 0; }
.placeholder-content-padded { padding: 20px; text-align: left; }

/* --- Create Post Box --- */
.create-post-box-feed {
    background-color: var(--card-background-color); padding: 12px 16px;
    margin-bottom: 8px; border-bottom: 1px solid var(--divider-color);
}
.create-post-top-feed { display: flex; align-items: center; margin-bottom: 10px; }
.create-post-top-feed .profile-pic-placeholder { width: 40px; height: 40px; margin-right: 10px; }
.create-post-top-feed .post-input-placeholder-feed {
    flex-grow: 1; background-color: transparent; padding: 8px 12px;
    border-radius: 20px; border: 1px solid var(--divider-color);
    color: var(--text-color-secondary); cursor: pointer; font-size: 15px; text-align:left;
}
.create-post-top-feed .post-input-placeholder-feed:hover { background-color: var(--icon-bg-hover); }
.create-post-actions-feed {
    display: flex; justify-content: space-around; padding-top: 10px;
}
.create-post-actions-feed .action-button {
    display: flex; align-items: center; flex-grow: 1; justify-content: center;
    padding: 8px 0; cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--text-color-secondary); border-radius:var(--border-radius-standard);
}
.create-post-actions-feed .action-button:hover { background-color: var(--icon-bg-hover); }
.create-post-actions-feed .action-button i { font-size: 20px; margin-right: 6px; }
.create-post-actions-feed .action-button .icon-live { color: #F3425F; }
.create-post-actions-feed .action-button .icon-photo { color: #45BD62; }
.create-post-actions-feed .action-button .icon-feeling { color: #F7B928; }

/* --- Stories Section --- */
.stories-section-feed {
    background-color: var(--card-background-color);
    padding: 12px 0 12px 16px; margin-bottom: 8px;
    display: flex; gap: 8px; overflow-x: auto;
    -ms-overflow-style: none; scrollbar-width: none;
    border-bottom: 1px solid var(--divider-color);
}
.stories-section-feed::-webkit-scrollbar { display: none; }
.story-item-feed {
    flex-shrink: 0; width: 100px; height: 170px;
    border-radius: var(--border-radius-standard); position: relative; cursor: pointer;
    overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    background-color: #e0e0e0; transition: filter 0.2s;
}
.story-item-feed:hover { filter: brightness(0.9); }
.story-item-feed .story-background-feed { width: 100%; height: 100%; object-fit: cover; }
.story-item-feed .story-profile-pic-feed {
    position: absolute; top: 8px; left: 8px;
    width: 32px; height: 32px; border-radius: var(--border-radius-circle);
    border: 2.5px solid var(--primary-color); object-fit: cover; background-color: white;
}
.story-item-feed .story-user-name-feed {
    position: absolute; bottom: 8px; left: 8px; right: 8px;
    color: white; font-size: 12px; font-weight: 600;
    text-shadow: 0px 1px 3px rgba(0,0,0,0.6); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* --- Post Cards --- */
.post-card {
    background-color: var(--card-background-color);
    margin-bottom: 8px; border-bottom: 1px solid var(--divider-color);
}
.post-header { display: flex; align-items: flex-start; padding: 12px 16px 8px 16px; }
.post-header .profile-pic-placeholder { width: 40px; height: 40px; margin-right: 10px; cursor:pointer; }
.post-header .user-info { flex-grow: 1; }
.post-header .user-name { text-align: left; font-weight: 500; font-size: 16px; color: var(--text-color-primary); display: block; margin-bottom: 2px; cursor:pointer; }
.post-header .post-meta { font-size: 12px; color: var(--text-color-secondary); display:flex; align-items:center; }
.post-header .post-meta .post-time { margin-right: 4px; }
.post-header .post-meta .privacy-icon { font-size: 11px; margin-left:2px; }
.post-header .follow-button {
    font-size: 14px; font-weight: 600; color: var(--primary-color);
    cursor: pointer; padding: 6px 10px; border-radius: 6px;
    margin-left: auto; margin-right: 8px; line-height:1;
}
.post-header .follow-button.following { color: var(--text-color-secondary); background-color: var(--icon-bg-color); }
.post-header .follow-button:hover { background-color: var(--icon-bg-hover); }

.post-body .status-text { text-align: left; margin: 0; padding: 0 16px 12px 16px; font-size: 15px; white-space: pre-wrap; word-wrap: break-word; line-height:1.5; }
.post-body .media-container {
    background-color: #fff; max-height: 100vh;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.post-body .media-container img, .post-body .media-container video, .post-body .media-container iframe {
    width: 100%; height: auto; max-height: 100vh; object-fit: contain; display: block; border: none;
}

.post-footer-stats {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; font-size: 13px; color: var(--text-color-secondary);
}
.post-footer-stats .reactions-preview { display: flex; align-items:center; }
.post-footer-stats .reactions-preview img {
    width: 18px; height: 18px; border-radius: var(--border-radius-circle); margin-right: -6px; border: 1.5px solid white;
}
.post-footer-stats .reactions-preview .reactions-count { margin-left:10px; }

.post-actions-bar { display: flex; justify-content: space-around; padding: 4px 8px; border-top: 1px solid var(--divider-color); }
.post-actions-bar .action-button {
    flex-grow: 1; display: flex; align-items: center; justify-content: center;
    padding: 8px 0; cursor: pointer; font-size: 14px;
    font-weight: 600; color: var(--text-color-secondary); border-radius:6px;
}
.post-actions-bar .action-button:hover { background-color:var(--icon-bg-hover); }
.post-actions-bar .action-button i { font-size: 18px; margin-right: 6px; }
.post-actions-bar .action-button.liked, .post-actions-bar .action-button.liked i { color: var(--primary-color); }

/* --- Modals & Panels --- */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);
    z-index: 1050; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-content {
    background-color: var(--card-background-color);
    width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto;
    position:absolute; bottom:0; border-radius: var(--border-radius-standard) var(--border-radius-standard) 0 0;
    max-height:95vh;
}
@media (min-width: 500px) {
    .modal-content {
        width: 90%; max-width: 500px; height: auto; max-height: 90vh;
        border-radius: var(--border-radius-standard); position:relative; bottom:auto;
    }
}

.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 8px 0 16px; height: var(--top-nav-height);
    border-bottom: 1px solid var(--divider-color); flex-shrink: 0;
}
.modal-title { font-size: 17px; font-weight: 600; text-align:center; flex-grow:1; }
.modal-header .close-modal-button {
    font-size: 20px; color: var(--icon-color-default); padding: 8px; cursor: pointer; border-radius:50%;
}
.modal-body { padding: 16px; flex-grow: 1; overflow-y:auto; text-align:left; }

/* Comment Modal */
#commentModal .comment-item { display:flex; margin-bottom:12px; }
#commentModal .comment-item .profile-pic-placeholder { width:32px; height:32px; margin-right:8px; }
#commentModal .comment-text-content { background-color:var(--icon-bg-hover); padding:8px 12px; border-radius:18px; font-size:14px; width:100%; }
#commentModal .comment-text-content .comment-user-name { font-weight:600; display:block; }
#commentModal .comment-input-area { display:flex; align-items:center; padding-top:10px; border-top:1px solid var(--divider-color); }
#commentModal .comment-input-area input { flex-grow:1; padding:8px 12px; border-radius:18px; border:1px solid var(--divider-color); background:var(--icon-bg-hover);}

/* Bottom Navigation Bar */
.bottom-nav {
    background-color: var(--card-background-color); border-top: 1px solid var(--divider-color);
    display: flex; justify-content: space-around; align-items: stretch;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-height); z-index: 1000; padding: 0;
}
.bottom-nav .nav-item {
    flex-grow: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--icon-color-default);
    cursor: pointer; height: 100%; position: relative;
}
.bottom-nav .nav-item .nav-icon { font-size: 22px; }
.bottom-nav .nav-item.active .nav-icon { color: var(--primary-color);}
.bottom-nav .nav-item.active::before {
    content: ''; position: absolute; top: 0; left: 25%; right: 25%;
    height: 2px; background-color: var(--primary-color);
}