/* ===== FACEBOOK APP — DARK THEME ===== */
:root {
    --fb-blue: #1877F2;
    --fb-blue-hover: #166FE5;
    --bg-primary: #18191A;
    --bg-secondary: #242526;
    --bg-tertiary: #3A3B3C;
    --bg-hover: #3A3B3C;
    --bg-hover-overlay: rgba(255, 255, 255, 0.05);
    --text-primary: #E4E6EB;
    --text-secondary: #B0B3B8;
    --text-tertiary: #808080;
    --card-bg: #242526;
    --card-border: #3A3B3C;
    --divider: #3A3B3C;
    --danger: #F3425F;
    --success: #45BD62;
    --warning: #F7B928;
    --navbar-height: 56px;
    --sidebar-width: 280px;
    --border-radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --glass-bg: rgba(36,37,38,0.85);
    --glass-border: rgba(255,255,255,0.08);
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.4;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit;}
img{display:block;max-width:100%;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary);}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--navbar-height);background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:1000;box-shadow:var(--shadow-sm);}
.nav-left{display:flex;align-items:center;gap:8px;flex:1;}
.logo svg{transition:transform var(--transition);}
.logo:hover svg{transform:scale(1.08);}
.search-container{position:relative;width:240px;}
.search-container .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none;}
.search-container input{width:100%;padding:10px 12px 10px 40px;border-radius:50px;border:none;background:var(--bg-tertiary);color:var(--text-primary);font-size:14px;outline:none;transition:background var(--transition),box-shadow var(--transition);}
.search-container input::placeholder{color:var(--text-secondary);}
.search-container input:focus{background:var(--bg-hover);box-shadow:0 0 0 2px var(--fb-blue);}
.nav-center{display:flex;gap:4px;flex:1;justify-content:center;max-width:600px;}
.nav-tab{display:flex;align-items:center;justify-content:center;padding:8px 32px;border-radius:var(--border-radius);color:var(--text-secondary);transition:all var(--transition);position:relative;}
.nav-tab:hover{background:var(--bg-hover-overlay);color:var(--text-primary);}
.nav-tab.active{color:var(--fb-blue);}
.nav-tab.active::after{content:'';position:absolute;bottom:-8px;left:0;right:0;height:3px;background:var(--fb-blue);border-radius:3px 3px 0 0;}
.nav-right{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end;}
.nav-icon-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:all var(--transition);position:relative;}
.nav-icon-btn:hover{background:var(--bg-hover);transform:scale(1.05);}
.nav-icon-btn:active{transform:scale(0.95);}
.badge{position:absolute;top:-2px;right:-2px;background:var(--danger);color:white;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--bg-secondary);animation:badgePulse 2s ease-in-out infinite;}
@keyframes badgePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
.avatar-btn{background:none !important;padding:0;}
.nav-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--bg-tertiary);transition:border-color var(--transition);}
.avatar-btn:hover .nav-avatar{border-color:var(--fb-blue);}

/* MAIN LAYOUT */
.main-layout{display:flex;justify-content:center;max-width:1920px;margin:0 auto;padding-top:var(--navbar-height);min-height:100vh;}

/* LEFT SIDEBAR */
.sidebar-left{width:var(--sidebar-width);position:fixed;left:0;top:var(--navbar-height);bottom:0;padding:16px 8px;overflow-y:auto;overflow-x:hidden;}
.sidebar-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--border-radius);font-size:14px;font-weight:500;transition:all var(--transition);color:var(--text-primary);}
.sidebar-item:hover{background:var(--bg-hover-overlay);transform:translateX(4px);}
.sidebar-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.sidebar-icon{width:36px;height:36px;min-width:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.sidebar-icon.shortcut{border-radius:8px !important;}
.sidebar-divider{height:1px;background:var(--divider);margin:12px 8px;}
.sidebar-label{font-size:13px;font-weight:600;color:var(--text-secondary);padding:6px 8px;text-transform:uppercase;letter-spacing:0.05em;}

/* CENTER FEED */
.feed-center{width:100%;max-width:590px;padding:16px 16px 60px;margin-left:var(--sidebar-width);margin-right:var(--sidebar-width);}

/* STORIES */
.stories-row{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;}
.stories-row::-webkit-scrollbar{display:none;}
.story-card{width:112px;min-width:112px;height:200px;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;scroll-snap-align:start;transition:transform var(--transition);}
.story-card:hover{transform:scale(1.03);}
.story-card:hover .story-bg{transform:scale(1.08);}
.story-bg{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;}
.story-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.6) 100%);}
.story-avatar-ring{position:absolute;top:12px;left:12px;width:40px;height:40px;border-radius:50%;object-fit:cover;border:3px solid var(--fb-blue);z-index:2;box-shadow:0 0 0 2px var(--bg-primary);}
.story-label{position:absolute;bottom:12px;left:8px;right:8px;font-size:12px;font-weight:600;color:white;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.create-story .story-bg{height:65%;}
.create-story::after{display:none;}
.story-create-btn{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:var(--fb-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid var(--card-bg);z-index:2;box-shadow:0 2px 8px rgba(24,119,242,0.4);}
.create-story .story-label{bottom:16px;text-align:center;color:var(--text-primary);text-shadow:none;}
.create-story{background:var(--card-bg);border:1px solid var(--card-border);}

/* POST COMPOSER */
.post-composer{background:var(--card-bg);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow-sm);border:1px solid var(--glass-border);}
.composer-top{display:flex;align-items:center;gap:10px;}
.composer-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;}
.composer-input{flex:1;padding:10px 16px;border-radius:50px;background:var(--bg-tertiary);color:var(--text-secondary);font-size:14px;text-align:left;transition:background var(--transition);}
.composer-input:hover{background:var(--bg-hover);}
.composer-divider{height:1px;background:var(--divider);margin:12px 0;}
.composer-actions{display:flex;justify-content:space-around;}
.composer-action{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--border-radius);font-size:13px;font-weight:600;color:var(--text-secondary);transition:background var(--transition);}
.composer-action:hover{background:var(--bg-hover-overlay);}

/* FEED POSTS */
.post-card{background:var(--card-bg);border-radius:12px;margin-bottom:16px;box-shadow:var(--shadow-sm);border:1px solid var(--glass-border);overflow:hidden;animation:postFadeIn 0.5s ease;}
@keyframes postFadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.post-header{display:flex;align-items:center;gap:10px;padding:16px 16px 8px;}
.post-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;cursor:pointer;transition:transform var(--transition);}
.post-avatar:hover{transform:scale(1.08);}
.post-user-info{flex:1;}
.post-username{font-weight:600;font-size:14px;cursor:pointer;}
.post-username:hover{text-decoration:underline;}
.post-meta{font-size:12px;color:var(--text-secondary);display:flex;align-items:center;gap:4px;}
.post-options{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background var(--transition);}
.post-options:hover{background:var(--bg-hover-overlay);}
.post-text{padding:4px 16px 12px;font-size:14px;line-height:1.5;white-space:pre-wrap;}
.post-image{width:100%;max-height:600px;object-fit:cover;cursor:pointer;transition:filter var(--transition);}
.post-image:hover{filter:brightness(1.05);}
.post-stats{display:flex;justify-content:space-between;padding:10px 16px;font-size:13px;color:var(--text-secondary);}
.post-likes{display:flex;align-items:center;gap:6px;cursor:pointer;}
.post-likes:hover{text-decoration:underline;}
.post-likes .reaction-icons{display:flex;}
.reaction-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;margin-right:-4px;border:2px solid var(--card-bg);position:relative;}
.reaction-like{background:var(--fb-blue);}
.reaction-love{background:#F33E58;}
.reaction-haha{background:#F7B928;}
.post-comments-count{cursor:pointer;}
.post-comments-count:hover{text-decoration:underline;}
.post-actions{display:flex;border-top:1px solid var(--divider);padding:4px 16px;}
.post-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:var(--border-radius);font-size:14px;font-weight:600;color:var(--text-secondary);transition:all var(--transition);}
.post-action-btn:hover{background:var(--bg-hover-overlay);}
.post-action-btn.liked{color:var(--fb-blue);}
.post-action-btn:active{transform:scale(0.95);}
.post-action-btn.liked svg{animation:likePopFB 0.4s ease;}
@keyframes likePopFB{0%{transform:scale(1);}25%{transform:scale(1.3);}50%{transform:scale(0.9);}100%{transform:scale(1);}}

/* Post comments */
.post-comments-section{padding:0 16px 12px;}
.comment-item{display:flex;gap:8px;margin-top:8px;}
.comment-avatar{width:32px;height:32px;min-width:32px;border-radius:50%;object-fit:cover;}
.comment-bubble{background:var(--bg-tertiary);border-radius:18px;padding:8px 14px;max-width:80%;}
.comment-name{font-size:13px;font-weight:600;}
.comment-text{font-size:13px;margin-top:2px;}
.comment-meta{display:flex;gap:12px;padding-left:14px;margin-top:2px;font-size:12px;color:var(--text-secondary);}
.comment-meta button{font-size:12px;font-weight:600;color:var(--text-secondary);}
.comment-meta button:hover{text-decoration:underline;}
.comment-input-wrap{display:flex;align-items:center;gap:8px;margin-top:8px;}
.comment-input-wrap img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.comment-input{flex:1;padding:8px 14px;border-radius:50px;border:none;background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;outline:none;font-family:inherit;}
.comment-input::placeholder{color:var(--text-secondary);}

/* RIGHT SIDEBAR */
.sidebar-right{width:var(--sidebar-width);position:fixed;right:0;top:var(--navbar-height);bottom:0;padding:16px;overflow-y:auto;}
.sidebar-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.sidebar-section-header h3{font-size:16px;font-weight:600;}
.sidebar-section-header a{font-size:13px;color:var(--fb-blue);font-weight:500;}
.sidebar-section-header a:hover{text-decoration:underline;}
.contact-actions-right{display:flex;gap:4px;}
.icon-sm{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background var(--transition);}
.icon-sm:hover{background:var(--bg-hover-overlay);}
.friend-request{display:flex;gap:12px;padding:8px 0;}
.request-avatar{width:60px;height:60px;min-width:60px;border-radius:50%;object-fit:cover;}
.request-info{flex:1;}
.request-name{font-size:14px;font-weight:600;}
.request-mutual{font-size:12px;color:var(--text-secondary);margin:2px 0 8px;}
.request-actions{display:flex;gap:6px;}
.btn-confirm{flex:1;padding:6px 0;background:var(--fb-blue);color:white;font-size:13px;font-weight:600;border-radius:6px;transition:background var(--transition);}
.btn-confirm:hover{background:var(--fb-blue-hover);}
.btn-delete{flex:1;padding:6px 0;background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;font-weight:600;border-radius:6px;transition:background var(--transition);}
.btn-delete:hover{background:var(--bg-hover);}
.contacts-list{display:flex;flex-direction:column;}
.contact-item{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:var(--border-radius);font-size:14px;font-weight:500;transition:background var(--transition);}
.contact-item:hover{background:var(--bg-hover-overlay);}
.contact-avatar-wrap{position:relative;flex-shrink:0;}
.contact-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.online-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;background:var(--success);border-radius:50%;border:2px solid var(--card-bg);}

/* POST MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:all 0.3s ease;}
.modal-overlay.active{opacity:1;visibility:visible;}
.modal-overlay.active .modal{transform:scale(1) translateY(0);}
.modal{width:100%;max-width:500px;background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow-lg);transform:scale(0.9) translateY(20px);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);}
.modal-header{display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid var(--divider);position:relative;}
.modal-header h2{font-size:18px;font-weight:700;}
.modal-close{position:absolute;right:16px;width:36px;height:36px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--text-secondary);transition:all var(--transition);}
.modal-close:hover{background:var(--bg-hover);color:var(--text-primary);}
.modal-body{padding:16px;}
.modal-user{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.modal-username{font-weight:600;font-size:14px;}
.privacy-btn{display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;background:var(--bg-tertiary);font-size:12px;font-weight:600;color:var(--text-secondary);margin-top:2px;}
.modal-textarea{width:100%;min-height:120px;border:none;background:transparent;color:var(--text-primary);font-size:22px;resize:none;outline:none;font-family:inherit;}
.modal-textarea::placeholder{color:var(--text-secondary);}
.modal-add-section{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:1px solid var(--card-border);border-radius:var(--border-radius);margin-top:16px;}
.modal-add-section span{font-size:14px;font-weight:600;}
.modal-add-btns{display:flex;gap:4px;}
.modal-add-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background var(--transition);}
.modal-add-btn:hover{background:var(--bg-hover-overlay);}
.btn-post{width:calc(100% - 32px);margin:0 16px 16px;padding:10px;background:var(--fb-blue);color:white;font-size:14px;font-weight:600;border-radius:var(--border-radius);transition:all var(--transition);}
.btn-post:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;}
.btn-post:not(:disabled):hover{background:var(--fb-blue-hover);}

/* STORY VIEWER */
.story-viewer-overlay{position:fixed;inset:0;background:#000;z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s ease;}
.story-viewer-overlay.active{opacity:1;visibility:visible;}
.story-close{position:absolute;top:16px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.15);color:white;font-size:28px;display:flex;align-items:center;justify-content:center;z-index:10;transition:all var(--transition);}
.story-close:hover{background:rgba(255,255,255,0.25);transform:rotate(90deg);}
.story-viewer-content{position:relative;width:100%;max-width:420px;max-height:90vh;border-radius:16px;overflow:hidden;}
.story-progress-bar{position:absolute;top:8px;left:12px;right:12px;height:3px;background:rgba(255,255,255,0.3);border-radius:3px;z-index:5;overflow:hidden;}
.story-progress-fill{height:100%;background:white;border-radius:3px;width:0%;transition:width 0.1s linear;}
.story-viewer-header{position:absolute;top:20px;left:12px;display:flex;align-items:center;gap:10px;z-index:5;}
.story-viewer-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid white;}
.story-viewer-name{color:white;font-size:14px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.story-viewer-time{color:rgba(255,255,255,0.7);font-size:12px;text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.story-viewer-image{width:100%;max-height:90vh;object-fit:cover;border-radius:16px;}

/* MESSENGER POPUP */
.messenger-popup{position:fixed;bottom:0;right:16px;width:340px;background:var(--card-bg);border-radius:12px 12px 0 0;box-shadow:var(--shadow-lg);border:1px solid var(--glass-border);z-index:1500;transform:translateY(100%);opacity:0;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);}
.messenger-popup.active{transform:translateY(0);opacity:1;}
.messenger-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;}
.messenger-header h3{font-size:18px;font-weight:700;}
.messenger-header-actions{display:flex;gap:4px;}
.messenger-search{width:calc(100% - 32px);margin:0 16px 8px;padding:8px 14px;border-radius:50px;border:none;background:var(--bg-tertiary);color:var(--text-primary);font-size:13px;outline:none;font-family:inherit;}
.messenger-search::placeholder{color:var(--text-secondary);}
.messenger-chats{max-height:320px;overflow-y:auto;}
.chat-item{display:flex;align-items:center;gap:10px;padding:8px 16px;transition:background var(--transition);}
.chat-item:hover{background:var(--bg-hover-overlay);}
.chat-item.unread .chat-name{font-weight:700;}
.chat-item.unread .chat-preview{font-weight:600;color:var(--text-primary);}
.chat-info{flex:1;min-width:0;}
.chat-name{font-size:14px;font-weight:500;}
.chat-preview{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-time{font-size:11px;color:var(--text-secondary);white-space:nowrap;}

/* RESPONSIVE */
@media(max-width:1260px){.sidebar-right{display:none;}.feed-center{margin-right:0;}}
@media(max-width:900px){.sidebar-left{display:none;}.feed-center{margin-left:0;max-width:100%;}.nav-center{display:none;}}
@media(max-width:500px){.search-container{width:40px;}.search-container input{width:40px;padding:10px;cursor:pointer;}.search-container input:focus{width:200px;padding:10px 12px 10px 40px;position:absolute;right:0;background:var(--card-bg);box-shadow:var(--shadow-md);}.composer-action span{display:none;}.story-card{width:96px;min-width:96px;height:170px;}}

/* TOOLTIP */
[data-tooltip]{position:relative;}
[data-tooltip]::before{content:attr(data-tooltip);position:absolute;bottom:-36px;left:50%;transform:translateX(-50%) scale(0.8);padding:6px 12px;background:rgba(0,0,0,0.85);color:white;font-size:12px;white-space:nowrap;border-radius:6px;opacity:0;pointer-events:none;transition:all 0.2s ease;z-index:9999;}
[data-tooltip]:hover::before{opacity:1;transform:translateX(-50%) scale(1);}