/* Pi Button - style selaras dengan auth-btn-new */
/* === 2 METODE LOGIN - GOOGLE & PI - MODEL SAMA PERSIS, BEDA LOGO === */
.auth-btn-pi{
  width:100%; padding:12px; background:#ffffff; color:#3c4043; font-weight:700;
  font-size:16px; border-radius:6px; cursor:pointer; margin-bottom:12px;
  border:1px solid #dadce0; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:0.2s; box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.auth-btn-pi img{ flex-shrink:0; display:block; width:20px; height:20px; object-fit:contain; }
.auth-btn-pi:hover{ background:#f8f9fa; box-shadow:0 2px 6px rgba(0,0,0,0.12); }
.auth-btn-pi:active{ transform:scale(0.98); }
.auth-btn-pi:disabled{ opacity:0.6; cursor:not-allowed; }
.auth-btn-google{
  width:100%; padding:12px; background:#ffffff; color:#3c4043; font-weight:700;
  font-size:16px; border-radius:6px; cursor:pointer; margin-bottom:12px;
  border:1px solid #dadce0; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:0.2s; box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.auth-btn-google:hover{ background:#f8f9fa; box-shadow:0 2px 6px rgba(0,0,0,0.12); }
.auth-btn-google:active{ transform:scale(0.98); }
.login-methods-title{
  text-align:center; font-size:12px; color:#65676b; margin:18px 0 12px; font-weight:600; letter-spacing:0.5px;
}

.auth-divider-pi{
  display:flex; align-items:center; text-align:center; color:var(--lncommunity-text-gray);
  font-size:13px; margin:6px 0 14px; width:100%;
}
.auth-divider-pi::before,.auth-divider-pi::after{ content:''; flex:1; border-bottom:1px solid var(--lncommunity-divider); }
.auth-divider-pi span{ padding:0 10px; }

/* LNC REWARD BADGE - TAMBAHAN DI DEKAT SHARE */
.lnc-reward-badge:hover{opacity:0.8}
.lnc-reward-badge.claimed{opacity:0.6}
.lnc-reward-badge.claimed span{color:#10b981!important}
.lnc-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1f2937;border:1px solid #8b5cf6;color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;z-index:99999;box-shadow:0 8px 20px rgba(0,0,0,0.4)}
:root {
--lncommunity-primary: #0866ff;
--messenger-blue: #0084ff;
--lncommunity-bg: #ffffff;
--lncommunity-black: #050505;
--lncommunity-text-gray: #65676b;
--lncommunity-light-gray: #f0f2f5;
--lncommunity-hover-gray: #e4e6eb;
--lncommunity-border: #ced0d4;
--lncommunity-divider: #c9ccd1;
--lncommunity-red: #e41e3f;
--lncommunity-success: #31a24c; 
--nav-height: 104px;
--theme-orange-1: #ff8c00;
--theme-orange-2: #ff5500;
}

* {
box-sizing: border-box;
margin: 0; padding: 0;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--lncommunity-divider);
color: var(--lncommunity-black);
overflow-x: hidden;
}

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

input, textarea, button {
font-family: inherit;
outline: none;
border: none;
transition: 0.2s;
}

button {
cursor: pointer;
background: none;
}

img.beranda-icon {
display: block;
object-fit: contain;
}

a.linkified {
color: var(--lncommunity-primary);
text-decoration: none;
word-break: break-word;
}

a.linkified:hover {
text-decoration: underline;
}

.msg-self a.linkified {
color: #ffffff;
text-decoration: underline;
}

.msg-friend
a.linkified {
color: var(--messenger-blue);
}

span.mention-tag {
color: var(--lncommunity-primary);
font-weight: 700;
background: rgba(8, 102, 255, 0.1);
padding: 1px 4px;
border-radius: 4px;
}

span.hashtag-tag {
 color: var(--lncommunity-primary);
 font-weight: 600;
 cursor: pointer;
 transition: 0.2s;
}

span.hashtag-tag:hover {
 text-decoration: underline;
 filter: brightness(0.9);
}

.mention-dropdown{
position: absolute;
background: #fff;
border: 1px solid var(--lncommunity-border);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-height: 200px;
overflow-y: auto;
z-index: 6000;
display: none;
width: calc(100% - 32px);
}

.mention-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--lncommunity-light-gray);
}

.mention-item:last-child {
border-bottom: none;
}

.mention-item:hover {
background: var(--lncommunity-light-gray);
}

.mention-item .m-info {
display: flex;
flex-direction: column;
}

.mention-item .m-name {
font-weight: 600;
font-size: 14px;
color: var(--lncommunity-black);
}

.mention-item .m-uname {
font-size: 12px; color: var(--lncommunity-text-gray);
}

.verified-badge-inline {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
margin-left: 4px;
flex-shrink: 0;
}

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--nav-height);
background: var(--lncommunity-bg);
display: flex;
flex-direction: column;
z-index: 1000;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.nav-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px;
height: 56px;
}

.logo-text { 
font-size: clamp(18px, 6vw, 28px); 
font-weight: 800; 
color: var(--lncommunity-primary); 
cursor: pointer; 
letter-spacing: -1px;
white-space: nowrap; 
word-spacing: -1px; 
}

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

.btn-circle {
width: 36px;
height: 36px;
background: var(--lncommunity-light-gray);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--lncommunity-black);
cursor: pointer;
position: relative;
}

.btn-circle img.beranda-icon {
width: 20px;
height: 20px;
}

.badge {
position: absolute;
top: -4px;
right: -4px;
background: var(--lncommunity-red);
color: white;
font-size: 11px;
font-weight: bold;
padding: 2px 5px;
border-radius: 50%;
display: none;
border: 2px solid white;
}

.nav-tabs {
 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 48px;
 border-top: 1px solid var(--lncommunity-light-gray);
}

.tab {
 flex: 1;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
 cursor: pointer;
 color: var(--lncommunity-text-gray);
 position: relative;
 transition: 0.2s;
}

.tab img.beranda-icon,
.tab img.friends-icon,
.tab img.livestreaming-icon,
.tab img.videoreels-icon,
.tab img.notifikasi-icon {
 width: 28px;
 height: 28px;
 object-fit: contain;
}

.tab.active {
color: var(--lncommunity-primary);
border-bottom: 3px solid var(--lncommunity-primary);

}

.profile-pic {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--lncommunity-primary);
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 18px;
cursor: pointer;
overflow: hidden;
position: relative;
border: 1px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

.profile-pic img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0; left: 0;
}

.tab .profile-pic {
width: 28px;
height: 28px;
font-size: 12px;
}

.main-container {
max-width: 600px;
margin: 0 auto;
width: 100%;
min-height: 100dvh;
padding-top: var(--nav-height);
display: flex;
flex-direction: column;
}

.create-post-area { 
display: flex; 
align-items: center; 
gap: 10px; 
padding: 12px 16px; 
background: var(--lncommunity-bg); 
border-bottom: 2px solid var(--lncommunity-divider); 
}

.create-post-input {
flex: 1;
border: 1px solid #ccc;
border-radius: 30px;
padding: 10px 15px;
font-size: 16px;
color: var(--lncommunity-text-gray);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.action-icon {
width: 24px;
height: 24px;
color: #45bd62;
cursor: pointer; flex-shrink: 0;
}

.stories-container { 
display: flex; 
gap: 8px; 
overflow-x: auto; 
padding: 12px 16px; 
background: var(--lncommunity-bg); 
border-bottom: 2px solid var(--lncommunity-divider); 
scrollbar-width: none; 
}

.story-card {
min-width: 100px;
width: 100px;
height: 170px;
border-radius: 12px;
background: var(--lncommunity-light-gray);
position: relative;
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.story-card.create-story {
background: #fff;
border: 1px solid var(--lncommunity-border);
box-shadow: none;
}

.story-bg {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0; left: 0;
background: #ddd;
}

.story-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
}

.story-avatar {
position: absolute;
top: 8px;
left: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid var(--lncommunity-primary); z-index:
2;
background: #fff;
overflow: hidden;
display:flex;
justify-content:center;
align-items:center;
}

.story-name {
position: absolute;
bottom: 8px;
left: 8px;
right: 8px;
color: #fff;
font-size: 12px;
font-weight: bold;
z-index: 2;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
line-height: 1.2;
text-align: left;
}

.story-create-img-area {
width: 100%;
height: 65%;
overflow: hidden;
position: relative;
}

.story-create-btn {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
background: var(--lncommunity-primary);
border-radius: 50%;
border: 3px solid #fff;
display: flex;
justify-content: center;
align-items: center; z-index: 2;
}

.story-name.create-text {
color: var(--lncommunity-black);
text-shadow: none;
text-align: center;
bottom: 10px;
left: 0;
right: 0;
font-size: 12px;
}

.feed-area {
display: flex;
flex-direction: column;
background: var(--lncommunity-bg);
padding: 0;
gap: 0;
}

.post-card { 
display: flex; 
flex-direction: column; 
background: var(--lncommunity-bg); 
border-radius: 0; 
padding: 0; 
box-shadow: none; 
border-bottom: 2px solid var(--lncommunity-divider); 
overflow: hidden; 
margin-bottom: 0 !important; 
}

.post-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 16px;
}

.post-user {
display: flex;
gap: 10px;
align-items: center;
}

.post-name-box {
display: flex;
flex-direction: column;
justify-content: center;
}

.post-name {
font-weight: 600;
font-size: 15px;
color: var(--lncommunity-black);
cursor: pointer;
display: flex;
align-items: center;
}

.post-name:hover {
text-decoration: underline;
}

.post-time {
font-size: 13px;
color: var(--lncommunity-text-gray);
display: flex;
align-items: center;
gap: 4px;
}

.post-content {
padding: 0 16px 12px;
font-size: 15px;
line-height: 1.4;
color: var(--lncommunity-black);
word-wrap: break-word;
white-space: pre-wrap;
}

.post-media-container {
width: 100%;
max-height: 500px;
background: var(--lncommunity-black);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.post-media-container img {
width: 100%;
object-fit: contain;
max-height: 500px;
}

.post-media-container video {
width: 100%;
max-height: 500px;
outline: none;
}

.post-stats {
margin: 0 16px;
border-bottom: 1px solid var(--lncommunity-light-gray);
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--lncommunity-text-gray);
font-size: 13px;
}

.post-actions {
display: flex;
justify-content: space-between;
padding: 4px 16px;
}

.post-action-btn {
flex: 1; display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 8px 0;
border-radius: 4px;
color: var(--lncommunity-text-gray);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: 0.2s;
}

 post-action-btn:active {
 background-color: var(--lncommunity-light-gray);
 }
 
.post-action-btn.active {
color: var(--lncommunity-primary);
}

.bottom-sheet-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
background: rgba(0,0,0,0.5);
z-index: 5000;
display: none;
flex-direction: column;
justify-content: flex-end;
}

.bottom-sheet-content {
background: #f0f2f5;
width: 100%;
border-radius: 20px 20px 0 0;
padding: 10px 16px 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 85dvh;
overflow-y: auto;
}

.bs-handle {
width: 40px;
height: 5px;
background: #ced0d4;
border-radius: 3px;
margin: 0 auto 15px;
}

.bs-option {
display: flex;
align-items: center;
gap: 15px;
padding: 14px 0;
cursor: pointer;
border-bottom: 1px solid #e4e6eb;
}

.bs-option:last-child {
border-bottom: none;
}

.bs-icon {
width: 26px;
height: 26px;
object-fit: contain;
flex-shrink: 0;
}

.bs-text-group {
display: flex;
flex-direction: column;
}

.bs-title {
font-size: 16px;
font-weight: 600;
color: var(--lncommunity-black);
}

.bs-subtitle {
font-size: 13px;
color: var(--lncommunity-text-gray);
margin-top: 2px;
}

.fb-profile-container {
display: flex;
flex-direction: column;
background: #fff;
width: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.fb-cover-wrapper { 
 width: calc(100% - 32px); 
 margin: 16px auto 0; 
 border-radius: 12px; 
 height: 220px; 
 background: #ddd; 
 position: relative; 
 overflow: hidden; 
 border: 1px solid var(--lncommunity-border); 
}

.fb-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}

.fb-change-btn {
position: absolute; background: #fff; color: var(--lncommunity-black); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
.fb-change-cover { right: 16px; bottom: 16px; width: 36px; height: 36px; }

.new-profile-header { padding: 0 16px 16px; position: relative; margin-top: -60px; display: flex; flex-direction: column; }
.avatar-row { display: flex; justify-content: space-between; align-items: flex-end; position: relative; margin-bottom: 10px; }
.fb-avatar-wrapper { width: 130px; height: 130px; border-radius: 50%; border: 4px solid #fff; background: var(--lncommunity-light-gray); position: relative; z-index: 2; }
.fb-change-avatar { bottom: 6px; right: 6px; width: 32px; height: 32px; background: #e4e6eb;}

.thought-bubble { position: absolute; top: -30px; left: 60px; background: #fff; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--lncommunity-text-gray); box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 3; cursor: pointer;}
.thought-bubble::after { content: ''; position: absolute; bottom: -6px; left: 20px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }

.profile-title-row { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.fb-profile-name { font-size: 26px; font-weight: 800; color: var(--lncommunity-black); line-height: 1.2;}


.profile-stats { font-size: 14px; color: var(--lncommunity-black); margin-top: 8px; font-weight: 400;}
.profile-stats strong { font-weight: 700; }

.profile-bio-text { font-size: 14px; color: var(--lncommunity-text-gray); margin-top: 12px; }

.profile-tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;}
.profile-tag { font-size: 14px; font-weight: 600; color: var(--lncommunity-black); display: flex; align-items: center; gap: 4px; }

.mutual-friends { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.mutual-avatars { display: flex; }
.mutual-avatars img { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; }
.mutual-avatars img:first-child { margin-left: 0; }
.mutual-text { font-size: 14px; color: var(--lncommunity-text-gray); }

.new-profile-actions { display: flex; gap: 8px; margin-top: 16px; width: 100%; }
.action-btn { flex: 1; padding: 10px 0; border-radius: 8px; font-weight: 600; font-size: 15px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: none; transition: 0.2s;}
.action-btn-blue { background: var(--lncommunity-primary); color: #fff; }
.action-btn-gray { background: var(--lncommunity-light-gray); color: var(--lncommunity-black); }

.profile-tabs-new { 
display: flex; 
gap: 12px; 
padding: 0 16px 12px; 
border-bottom: 2px solid var(--lncommunity-light-gray); 
}

.p-tab { padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 14px; color: var(--lncommunity-text-gray); background: transparent; cursor: pointer; border: none;}
.p-tab.active { background: #e7f3ff; color: var(--lncommunity-primary); }

.profile-details-section { padding: 16px; }
.details-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.details-header h3 { font-size: 18px; font-weight: 700; color: var(--lncommunity-black); margin: 0;}
.details-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.details-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--lncommunity-black); }
.details-icon { font-size: 20px; width: 24px; text-align: center;}

.friends-sub-tabs { display: flex; background: #fff; border-bottom: 1px solid var(--lncommunity-border); padding: 10px 16px; gap: 10px; overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--nav-height); z-index: 990; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.friends-sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab-pill { padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 14px; color: var(--lncommunity-black); background: var(--lncommunity-light-gray); cursor: pointer; transition: 0.2s; white-space: nowrap; }
.sub-tab-pill.active { background: var(--lncommunity-primary); color: #fff; }

.app-container { display: flex; flex-direction: column; width: 100%; background: var(--lncommunity-bg); min-height: 100dvh; }
.header-section { background: #fff; padding: 10px 16px; border-bottom: 1px solid var(--lncommunity-border); position: sticky; top: var(--nav-height); z-index: 900; }
.top-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.icon-btn.back-btn { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--lncommunity-light-gray); }
.icon-btn.back-btn svg { width: 24px; height: 24px; fill: var(--lncommunity-black); }
.search-box { flex: 1; display: flex; align-items: center; background: var(--lncommunity-light-gray); border-radius: 20px; padding: 5px 12px; }
.search-box svg { width: 20px; height: 20px; fill: var(--lncommunity-text-gray); }
.search-box input { flex: 1; background: transparent; border: none; padding: 8px; font-size: 14px; color: var(--lncommunity-black); outline: none; }
.clear-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; }
.clear-btn svg { width: 18px; height: 18px; fill: var(--lncommunity-text-gray); }
.user-profile-pic { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--lncommunity-border); }
.tabs-bar { display: flex; gap: 15px; border-bottom: 2px solid var(--lncommunity-light-gray); }
.tab-btn { padding: 10px 0; font-weight: 600; font-size: 15px; color: var(--lncommunity-text-gray); border: none; background: transparent; cursor: pointer; position: relative; }
.tab-btn.active { color: var(--lncommunity-primary); }
.tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--lncommunity-primary); }

.upload-trigger-container { padding: 16px; display: flex; justify-content: center; background: var(--lncommunity-light-gray); }
.upload-btn { display: flex; align-items: center; gap: 8px; background: var(--lncommunity-primary); color: #fff; border: none; padding: 10px 20px; border-radius: 20px; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.15); transition: 0.2s; }
.upload-btn:active { transform: scale(0.96); }
.music-list { list-style: none; padding: 10px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.no-result { text-align: center; color: var(--lncommunity-text-gray); padding: 30px; display: none; font-size: 15px; }

.modal-box { background: #fff; border-radius: 12px; padding: 20px; width: 90%; max-width: 400px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.modal-box h3 { margin-bottom: 20px; font-size: 18px; color: var(--lncommunity-black); text-align: center; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--lncommunity-text-gray); margin-bottom: 6px; }
.form-group input[type="text"], .form-group input[type="file"], .form-group select { width: 100%; padding: 12px; border: 1px solid var(--lncommunity-border); border-radius: 8px; font-size: 14px; outline: none; background: #fafafa; }
.form-group input[type="text"]:focus, .form-group select:focus { border-color: var(--lncommunity-primary); background: #fff; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
.btn-cancel { background: var(--lncommunity-light-gray); color: var(--lncommunity-black); padding: 10px 15px; border-radius: 8px; font-weight: 600; }
.btn-submit { background: var(--lncommunity-primary); color: #fff; padding: 10px 15px; border-radius: 8px; font-weight: 600; }

.modal-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; padding: 15px; z-index: 5000;}
.modal-card { background: white; border-radius: 8px; box-shadow: 0 12px 28px rgba(0,0,0,0.2); width: 100%; max-width: 500px; display: flex; flex-direction: column; max-height: 90dvh;}
.modal-header { display: flex; justify-content: center; align-items: center; padding: 16px; border-bottom: 1px solid var(--lncommunity-border); font-size: 18px; font-weight: bold; position: relative;}
.modal-close-btn { position: absolute; right: 16px; width: 36px; height: 36px; background: var(--lncommunity-light-gray); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--lncommunity-text-gray); }
.modal-body { padding: 16px; overflow-y: auto; }

.modal-overlay.full-screen { padding: 0; background: var(--lncommunity-bg); }
.modal-card.full-screen { width: 100%; height: 100%; max-height: 100dvh; max-width: 600px; border-radius: 0; display: flex; flex-direction: column; box-shadow: none; margin: 0 auto; background: var(--lncommunity-bg);}
.tag-chip { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--lncommunity-border); border-radius: 20px; font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--lncommunity-black); cursor: pointer; }
.attach-box { min-width: 90px; height: 90px; border: 1px solid var(--lncommunity-border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--lncommunity-black); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.footer-pill { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--lncommunity-light-gray); border-radius: 20px; font-weight: 600; font-size: 13px; color: var(--lncommunity-black); cursor: pointer; }

.msgr-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: #fff; z-index: 3500; display: none; flex-direction: column; }
.msgr-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--lncommunity-light-gray); }
.msgr-header-icons { display: flex; gap: 12px; align-items: center; }
.msgr-icon-btn { width: 36px; height: 36px; background: var(--lncommunity-light-gray); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.msgr-search-bar { margin: 12px 16px; display: flex; align-items: center; background: var(--lncommunity-light-gray); border-radius: 10px; padding: 10px 16px; color: var(--lncommunity-text-gray); font-size: 14px; }

/* Menyembunyikan deretan status online yang kesamping agar fokus ke list obrolan saja */
.msgr-active-row, .msgr-active-item, .msgr-active-avatar, .msgr-active-name { display: none !important; }

.msgr-chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding-top: 8px; }
.msgr-chat-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; transition: background 0.2s; }
.msgr-chat-item:hover { background: var(--lncommunity-light-gray); }
.msgr-chat-avatar { width: 52px; height: 52px; border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; background: var(--lncommunity-primary); color: #fff; flex-shrink: 0; }
.msgr-online-dot { position: absolute; bottom: 0px; right: 2px; width: 14px; height: 14px; background: var(--lncommunity-success); border: 2px solid #fff; border-radius: 50%; z-index: 2; }
.msgr-chat-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid #f0f2f5; padding-bottom: 12px; margin-bottom: -12px; }
.msgr-chat-item:last-child .msgr-chat-info { border-bottom: none; }
.msgr-chat-name { font-size: 16px; font-weight: 600; color: var(--lncommunity-black); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-chat-preview { font-size: 14px; color: var(--lncommunity-text-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; align-items: center; }
.msgr-unread-dot { width: 10px; height: 10px; background: var(--messenger-blue); border-radius: 50%; flex-shrink: 0; margin-left: 8px; }

.chat-box { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100dvh;
display: none; 
flex-direction: column; 
z-index: 4000;
}

.chat-header { padding: 12px 16px; border-bottom: 1px solid var(--lncommunity-light-gray); box-shadow: 0 1px 2px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between; background: #fff; }
.chat-header-left { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.chat-back-btn { color: var(--messenger-blue); display: flex; align-items: center;}
.chat-friend-details { display: flex; flex-direction: column; justify-content: center;}
.chat-friend-name { font-weight: 700; font-size: 17px; color: var(--lncommunity-black); line-height: 1.2; }
.chat-friend-status { font-size: 12px; color: var(--lncommunity-text-gray); }

.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.msg-bubble { padding: 10px 14px; font-size: 15px; max-width: 75%; line-height: 1.4; word-wrap: break-word; }
.msg-self { background: var(--messenger-blue); color: #fff; border-radius: 18px 18px 4px 18px; align-self: flex-end; }
.msg-friend { background: #e4e6eb; color: var(--lncommunity-black); border-radius: 18px 18px 18px 4px; align-self: flex-start; }
.msg-thumbs-up { font-size: 48px; background: transparent !important; padding: 0 !important; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }

.chat-input-area { 
position: fixed; 
bottom: 0; 
left: 0; 
width: 100%; 
display: flex; 
align-items: center; 
padding: 10px 12px; 
gap: 12px; 
background: #fff; 
border-top: 1px solid var(--lncommunity-light-gray);
z-index: 9999;
padding-bottom: max(10px, env(safe-area-inset-bottom));
}

@keyframes pulse-record {
 0% { transform: scale(1); background-color: var(--lncommunity-red); }
 50% { transform: scale(1.1); background-color: #ff4d4d; box-shadow: 0 0 10px rgba(228,30,63,0.5); }
 100% { transform: scale(1); background-color: var(--lncommunity-red); }
}
.mic-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; transition: 0.2s;}
.mic-btn.recording { color: #fff !important; background: var(--lncommunity-red) !important; border-radius: 50% !important; animation: pulse-record 1.2s infinite; }

.chat-messages {
padding-bottom: 80px;
}
.chat-input-wrapper { flex: 1; background: #f0f2f5; border-radius: 20px; display: flex; align-items: center; padding: 0 12px; }
.chat-input { flex: 1; background: transparent; padding: 10px 0; font-size: 15px; border: none; outline: none; color: var(--lncommunity-black); }

.upload-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(255,255,255,0.95); z-index: 9999; display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px;}
.spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 40px; height: 40px; border-radius: 50%; border-left-color: var(--lncommunity-primary); animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#splashScreen {
 position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; z-index: 6000;
 background: var(--lncommunity-primary);
 display: none; flex-direction: column; align-items: center; justify-content: center;
 color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 transition: opacity 0.3s ease, transform 0.3s ease;
 transform-origin: center;
}

@keyframes authEnter {
0% { opacity: 0; transform: translateY(40px) scale(0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}

.splash-logo-container { margin-bottom: 20px; }
.splash-title { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 100px; }
.splash-bottom {
position: absolute; bottom: 40px; width: 100%; padding: 0 30px; box-sizing: border-box; text-align: center;
}
.splash-btn-start {
width: 100%; padding: 14px; background: #fff; color: var(--lncommunity-primary); font-weight: bold;
font-size: 16px; border-radius: 12px; cursor: pointer; margin-bottom: 15px; border: none; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.splash-btn-start:active { transform: scale(0.98); background: var(--lncommunity-light-gray); }
.splash-text-login { font-size: 14px; font-weight: 600; cursor: pointer; opacity: 0.9; color: #fff; }

#splashScreen {
 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 6000;
 background: var(--lncommunity-primary);
 display: none; flex-direction: column; align-items: center; justify-content: center;
 color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 transition: opacity 0.3s ease, transform 0.3s ease;
}

#authContainer {
 position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; z-index: 5000;
 background: #f0f2f5; 
 display: none; flex-direction: column; justify-content: flex-start; align-items: center;
 overflow-y: auto; -webkit-overflow-scrolling: touch;
 padding: 10px 16px 100px 16px; box-sizing: border-box;
}

.auth-logo-header {
 font-size: clamp(28px, 6vw, 42px); font-weight: 800; color: var(--lncommunity-primary); letter-spacing: -1.2px;
 margin: 12px 0 16px 0; text-align: center; line-height: 1; flex-shrink: 0;
}

.auth-bottom-card {
 background: #fff; 
 border-radius: 12px; 
 padding: 20px 22px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .08); 
 display: flex; flex-direction: column; align-items: center;
 width: 100%; max-width: 400px; box-sizing: border-box;
 flex-shrink: 0; margin: 0 auto;
}

/* FIX SCROLL UNTUK FORM DAFTAR YANG TINGGI - BIAR GAK KEPOTONG ATAS BAWAH */
#registerArea .auth-input-group { margin-bottom: 10px; }
#registerArea .auth-agree { margin: 6px 0 12px; font-size: 11px; }
#registerArea .auth-input-new { padding: 12px 14px; font-size: 15px; }
@media (max-height: 750px) {
  #authContainer { padding-top: 6px; padding-bottom: 90px; }
  .auth-logo-header { font-size: 26px; margin: 8px 0 10px 0; }
  .auth-bottom-card { padding: 16px 18px; }
  .auth-greeting { margin-bottom: 14px !important; font-size: 16px !important; }
  #registerArea .auth-input-group { margin-bottom: 8px; }
  #registerArea .auth-input-new { padding: 10px 12px; font-size: 14px; }
}
/* LOGIN TETAP CENTER DI LAYAR TINGGI */
@media (min-height: 800px) {
  #authContainer { justify-content: center; padding-bottom: 20px; }
}

.auth-greeting {
 font-size: 18px; font-weight: normal; color: var(--lncommunity-black); margin-bottom: 24px; margin-top: 0; text-align: center; line-height: 1.4;
}

#loginArea, #registerArea { width: 100%; }

/* Penentu Arah Flex agar OTP Area tidak tabrakan saat dipanggil JS */
#otpArea { 
 width: 100%; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center;
}

.auth-input-group { width: 100%; margin-bottom: 14px; display: flex; justify-content: center; }

.auth-input-new {
 width: 100%; padding: 14px 16px; font-size: 17px; color: var(--lncommunity-black); 
 background: #ffffff; border: 1px solid #dddfe2; border-radius: 6px; 
 outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; font-family: inherit;
}

.auth-input-new:focus {
 border-color: var(--lncommunity-primary);
 box-shadow: 0 0 0 2px #e7f3ff;
}

.auth-input-new::placeholder { color: #8d949e; font-weight: 400; }

.auth-agree {
 display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--lncommunity-text-gray); margin: 8px 0 16px; width: 100%; line-height: 1.4;
}

.auth-agree input { accent-color: var(--lncommunity-primary); width: 16px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0; margin-top: 2px;}
.auth-agree b { color: var(--lncommunity-primary); cursor: pointer; font-weight: 600; }

.auth-btn-new {
 width: 100%; padding: 12px; background: var(--lncommunity-primary); color: white; font-weight: bold;
 font-size: 20px; border-radius: 6px; cursor: pointer; margin-bottom: 16px; border: none; transition: 0.2s;
}

.auth-btn-new:active { transform: scale(0.98); filter: brightness(0.9); }
.auth-btn-new:disabled { opacity: 0.7; cursor: not-allowed; }

.otp-display-input {
 text-align: center; font-size: 32px; letter-spacing: 16px; font-weight: 700; 
 color: var(--lncommunity-black); padding: 16px; border: 1px solid #ccd0d5; background: #f5f6f7;
 width: 100%; box-sizing: border-box;
}
.otp-display-input:focus { background: #fff; }

.btn-spinner {
 display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4);
 border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite;
 vertical-align: middle; margin-right: 8px; margin-top: -2px;
}

.auth-divider {
 display: flex; align-items: center; text-align: center; color: var(--lncommunity-text-gray); font-size: 13px; margin-bottom: 20px; width: 100%;
}

.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--lncommunity-divider); }
.auth-divider span { padding: 0 12px; }

.auth-socials { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; width: 100%; }

.social-box {
 width: 100%; height: 44px; border-radius: 6px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; border: 1px solid var(--lncommunity-border); background: #fff; gap: 8px; font-weight: 600; font-size: 14px; color: var(--lncommunity-text-gray);
}

.social-box:active { transform: scale(0.98); background: var(--lncommunity-light-gray); }
.social-box img { width: 20px; height: 20px; object-fit: contain; }

.auth-switch-text { font-size: 15px; color: var(--lncommunity-black); text-align: center; width: 100%; padding-top: 16px; border-top: 1px solid var(--lncommunity-divider); }
.auth-switch-text span { color: var(--lncommunity-primary); font-weight: 600; cursor: pointer; text-decoration: none; }

.censored-word {
background-image: url('https://lengandai.my.id/assets/sensor.png'); 
background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
color: transparent !important; user-select: none; pointer-events: none;
display: inline-block; vertical-align: text-bottom; border-radius: 2px; min-width: 30px; 
}

.ios-popup-overlay {
position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 99999; opacity: 0; transition: opacity 0.2s; padding: 16px; box-sizing: border-box;
}
.ios-popup-box {
width: 100%; max-width: 320px; background: #fff; border-radius: 12px; display: flex; flex-direction: column; text-align: center; transform: scale(1.1); transition: transform 0.2s; box-shadow: 0 4px 20px rgba(0,0,0,0.2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 20px; box-sizing: border-box;
}
.ios-popup-title { font-weight: bold; font-size: 18px; margin-bottom: 10px; color: var(--lncommunity-black); margin-top: 0; }
.ios-popup-message { font-size: 15px; margin-bottom: 20px; color: var(--lncommunity-text-gray); line-height: 1.4; }
.ios-popup-input-container { margin-bottom: 20px; }
.ios-popup-input { width: 100%; padding: 12px; border: 1px solid var(--lncommunity-border); border-radius: 8px; font-size: 15px; box-sizing: border-box; background: var(--lncommunity-light-gray); outline:none; transition: 0.2s; color: var(--lncommunity-black); }
.ios-popup-input:focus { border-color: var(--lncommunity-primary); background: #fff; }
.ios-popup-buttons { display: flex; gap: 10px; justify-content: center; }
.ios-popup-btn { flex: 1; font-size: 15px; font-weight: 600; padding: 10px 0; cursor: pointer; user-select: none; border-radius: 8px; transition: 0.2s; border: none; text-align: center; display: flex; justify-content: center; align-items: center; }
.ios-popup-btn.left { background: var(--lncommunity-light-gray); color: var(--lncommunity-black); }
.ios-popup-btn.left:active { background: #e4e6eb; }
.ios-popup-btn.bold { background: var(--lncommunity-primary); color: #fff; }
.ios-popup-btn.bold:active { filter: brightness(0.9); }

.reply-input-area {
display: none;
margin-top: 8px;
margin-left: 8px;
border-left: 2px solid var(--lncommunity-light-gray);
padding-left: 12px;
}
.reply-input-wrapper {
display: flex;
align-items: center;
background: #f0f2f5;
border-radius: 20px;
padding: 8px 12px;
width: 100%;
}
.reply-input-field {
flex: 1;
background: transparent;
border: none;
outline: none;
font-size: 13px;
color: var(--lncommunity-black);
}
.reply-send-btn {
color: var(--lncommunity-primary);
font-weight: 600;
font-size: 13px;
cursor: pointer;
margin-left: 8px;
}

.photo-sub-tabs { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; background: #fff; border-bottom: 1px solid var(--lncommunity-light-gray); }
.photo-sub-tabs::-webkit-scrollbar { display: none; }
.photo-sub-tab { padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 14px; color: var(--lncommunity-black); background: var(--lncommunity-light-gray); cursor: pointer; white-space: nowrap; border: none; outline: none; transition: 0.2s; }
.photo-sub-tab.active { background: #e7f3ff; color: var(--lncommunity-primary); }
.photo-grid { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 8px; 
 padding: 16px; 
 background: #fff; 
}
.photo-grid-item { 
 aspect-ratio: 1 / 1; 
 overflow: hidden; 
 cursor: pointer; 
 background: var(--lncommunity-light-gray); 
 border-radius: 8px; 
 border: 1px solid var(--lncommunity-light-gray); 
}
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.2s; }
.photo-grid-item img:active { opacity: 0.8; }

.pwd-checklist {
display: none;
flex-direction: column;
align-items: flex-start;
margin-top: -10px;
margin-bottom: 15px;
padding: 10px 15px;
background: var(--lncommunity-light-gray);
border-radius: 8px;
font-size: 13px;
color: var(--lncommunity-text-gray);
transition: all 0.3s ease;
}
.pwd-rule {
display: flex;
align-items: center;
margin-bottom: 5px;
transition: color 0.3s;
}
.pwd-rule.valid {
color: var(--lncommunity-success);
}
.pwd-rule .pwd-icon {
margin-right: 8px;
font-weight: bold;
font-size: 14px;
}

@keyframes vibrate {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}

.vibrate-error {
animation: vibrate 0.4s ease-in-out;
color: var(--lncommunity-red) !important;
}

.video-quality-btn {
 position: absolute;
 top: 12px;
 right: 12px;
 background: rgba(0, 0, 0, 0.6);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.3);
 border-radius: 50%;
 width: 36px;
 height: 36px;
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 z-index: 100;
 backdrop-filter: blur(4px);
 transition: 0.2s;
}
.video-quality-btn:active {
 transform: scale(0.9);
}
.video-quality-menu {
 position: absolute;
 top: 54px;
 right: 12px;
 background: rgba(28, 28, 30, 0.95);
 border: 1px solid rgba(255, 255, 255, 0.15);
 border-radius: 8px;
 padding: 6px 0;
 display: none;
 flex-direction: column;
 min-width: 110px;
 z-index: 105;
 box-shadow: 0 4px 12px rgba(0,0,0,0.5);
 backdrop-filter: blur(10px);
}
.quality-item {
 padding: 8px 16px;
 color: #fff;
 font-size: 13px;
 font-weight: 600;
 text-align: left;
 cursor: pointer;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.quality-item:hover {
 background: rgba(255, 255, 255, 0.1);
}
.quality-item.active {
 color: var(--lncommunity-primary);
}

.custom-video-wrapper {  position: relative;  width: 100%;  background: #000; border-radius:12px; overflow:hidden; line-height:0; } .custom-video-wrapper video {  width: 100%;  height: auto;  max-height: 720px;  display: block; object-fit: cover; background:#000; }

/* ====================================================
CSS REELS CONTAINER & ITEMS (CLEAN VERSION)
==================================================== */

.reels-container {
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 overflow-x: hidden;
 overscroll-behavior-y: auto !important;
 -webkit-overflow-scrolling: touch;
 scroll-snap-type: y mandatory;
 background: #000;
 scrollbar-width: none; 
}

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

.reel-item {
 width: 100%;
 height: 100%;
 scroll-snap-align: start;
 scroll-snap-stop: always;
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #000;
}

.reel-video {
 width: 100%;
 height: 100%;
 object-fit: cover; /* Diubah ke cover agar video full memenuhi layar ke bawah */
}

/* ====================================================
CSS REELS OVERLAY (INFO & ACTIONS)
==================================================== */

.reel-info {
 position: absolute;
 bottom: 20px;
 left: 16px;
 right: 70px; /* Jarak yang aman agar tidak menabrak tombol action di kanan */
 color: #fff;
 z-index: 10;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.reel-actions {
 position: absolute;
 bottom: 20px;
 right: 16px;
 display: flex;
 flex-direction: column;
 gap: 16px;
 z-index: 10;
 align-items: center;
}

.reel-btn {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 color: #fff;
 background: transparent;
 border: none;
 cursor: pointer;
 font-size: 12px;
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
 transition: transform 0.2s ease;
}

.reel-btn:active {
 transform: scale(0.9);
}

.reel-btn i,
.reel-btn svg {
 font-size: 28px; /* Sesuaikan dengan ukuran icon library yang Anda gunakan */
 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* ====================================================
OTP SINGLE INPUT - TANPA KOTAK PEMBATAS, SUPPORT PASTE
==================================================== */
.otp-single-wrapper {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 margin-bottom: 20px;
}
.otp-single-input {
 width: 100%;
 max-width: 320px;
 height: 56px;
 font-size: 22px;
 font-weight: 700;
 text-align: center;
 letter-spacing: 8px;
 border: 2px solid #ccd0d5;
 border-radius: 12px;
 background: #ffffff;
 color: var(--lncommunity-black);
 outline: none;
 transition: all 0.2s ease;
 box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.otp-single-input:focus {
 border-color: var(--lncommunity-primary);
 box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.15);
 transform: translateY(-1px);
}
.otp-single-input::placeholder {
 letter-spacing: 1px;
 font-weight: 500;
 font-size: 15px;
 color: #8a8d91;
}
.otp-hint {
 font-size: 12px;
 color: var(--lncommunity-text-gray);
 text-align: center;
}
.otp-single-input::-webkit-outer-spin-button,
.otp-single-input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 margin: 0;
}
.otp-single-input[type=text] {
 -moz-appearance: textfield;
}
/* Keep old classes hidden for compatibility if any leftover JS queries them */
.otp-boxes-container { display: contents; }
.otp-box { display: none !important; }

.full-menu-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100dvh !important; background: #f0f2f5 !important; z-index: 100000 !important; display: none; flex-direction: column; overflow-y: auto; font-family: -apple-system, sans-serif; animation: slideInLeft 0.3s forwards; }
@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.fm-top-nav { display: flex; align-items: center; padding: 12px 16px 0; background: transparent; }

.fm-profile-card { background: #fff; margin: 12px 16px 16px; border-radius: 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border: 1px solid #e4e6eb; cursor:pointer;}
.fm-profile-left { display: flex; align-items: center; gap: 12px; overflow: hidden;}
.fm-profile-name { font-size: 19px; font-weight: 700; color: var(--lncommunity-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.fm-profile-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0;}
.fm-switch-btn { width: 36px; height: 36px; background: transparent; border-radius: 50%; border: 1px solid #ced0d4; display: flex; justify-content: center; align-items: center; color: var(--lncommunity-text-gray); }
.fm-chevron-btn { width: 36px; height: 36px; background: #e4e6eb; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; color: var(--lncommunity-black); }

.fm-section-title { font-size: 16px; font-weight: 700; color: var(--lncommunity-black); margin: 0 16px 12px; }
.fm-shortcuts { display: flex; gap: 12px; padding: 0 16px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--lncommunity-border); margin-bottom: 8px;}
.fm-shortcuts::-webkit-scrollbar { display: none; }
.fm-shortcut-item { width: 72px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; flex-shrink: 0;}
.fm-shortcut-img { width: 72px; height: 72px; border-radius: 16px; background: #fff; border: 1px solid var(--lncommunity-border); object-fit: cover; }
.fm-shortcut-name { font-size: 13px; font-weight: 600; color: var(--lncommunity-black); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-flag { position:absolute; bottom:-6px; left:-6px; background:#fff; border-radius:50%; padding:3px; box-shadow:0 1px 3px rgba(0,0,0,0.15); display:flex; justify-content:center; align-items:center; }

.fm-menu-grid { display: flex; flex-direction: column; padding: 8px 16px; background: transparent; gap: 24px; margin-bottom: 16px; }
.fm-menu-item { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.fm-menu-text { font-size: 17px; font-weight: 600; color: var(--lncommunity-black); flex: 1; display:flex; align-items:center; }

.fm-see-more { background: #e4e6eb; color: var(--lncommunity-black); border: none; padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 600; margin: 0 16px 20px; cursor: pointer; display: block; width: calc(100% - 32px); text-align: center;}

.fm-accordion { border-top: 1px solid var(--lncommunity-border); }
.fm-acc-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; font-size: 17px; font-weight: 600; color: var(--lncommunity-black); cursor: pointer; }

.chat-header-actions{display:flex;gap:4px;align-items:center;margin-left:auto;}
.chat-header-actions button{width:36px;height:36px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#54656f;transition:background .18s;}
.chat-header-actions button:hover{background:#f0f2f5;color:#111b21;}
.chat-header-actions button:active{transform:scale(.92);}

/* ===============================
   PATCH: Desktop Full Putih & Full Width Tabs
   =============================== */
@media screen and (min-width: 601px) {
  html, body { background-color: #ffffff !important; background: #ffffff !important; }
  .navbar { width: 100% !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; margin: 0 !important; border-radius: 0 !important; }
  .nav-top { width: 100% !important; max-width: 100% !important; padding: 0 12px !important; margin: 0 !important; justify-content: space-between !important; }
  .nav-tabs { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: space-between !important; align-items: stretch !important; gap: 0 !important; background: #ffffff !important; }
  .nav-tabs .tab { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; }
  .main-container { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: #ffffff !important; box-shadow: none !important; border: none !important; }
  .app-container, .feed-area, .create-post-area, .stories-container, .fb-profile-container, .header-section, .friends-sub-tabs { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; background: #ffffff !important; box-sizing: border-box !important; }
  .feed-area { background: #ffffff !important; gap: 0 !important; }
  .post-card { max-width: 100% !important; border-left: none !important; border-right: none !important; border-radius: 0 !important; margin: 0 !important; background: #ffffff !important; box-shadow: none !important; border-bottom: 8px solid #f0f2f5 !important; }
}
@media screen and (min-width: 1024px) { .main-container, .navbar, .nav-tabs, .nav-top { max-width: 100% !important; } }

/* ===============================
   PATCH 2: Desktop - Profil, Postingan, Cari Teman full putih seperti Beranda
   =============================== */
@media screen and (min-width: 601px) {
  /* Semua view utama jadi full putih */
  #homeView,
  #friendsView,
  #notifView,
  #livestreamingView,
  #reelsView {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    min-height: 100dvh !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Friends / Cari Teman */
  #friendsView {
    background: #ffffff !important;
  }
  #friendsView .friends-sub-tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e4e6eb !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
  }
  #friendsCategoryContainer,
  #globalUsersContainer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #friendsCategoryContainer > div,
  #globalUsersContainer > div {
    max-width: 100% !important;
  }

  /* Notifikasi & Livestreaming header */
  #notifContainer,
  #livestreamingView > div,
  #reelsView .reels-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
  }
  #notifView { background: #ffffff !important; }

  /* MODAL PROFIL & CARI - full seperti beranda desktop */
  .modal-overlay.full-screen {
    padding: 0 !important;
    background: #ffffff !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .modal-overlay.full-screen .modal-card.full-screen,
  #userProfileModal .modal-card.full-screen,
  #searchUserModal .modal-card.full-screen {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    min-height: 100dvh !important;
    height: auto !important;
  }

  /* Isi profil */
  .fb-profile-container,
  .profile-tabs-new,
  .profile-details-section,
  .photo-grid,
  .photo-sub-tabs,
  .fb-cover-wrapper,
  .new-profile-header,
  #profilePostsContainer,
  #profilePostsContainer > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }
  .fb-cover-wrapper {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .fb-profile-container {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .profile-tabs-new {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid #e4e6eb !important;
    background: #fff !important;
  }
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 2px !important;
    padding: 0 !important;
    background: #ffffff !important;
  }
  .photo-grid-item {
    border-radius: 0 !important;
    border: none !important;
  }

  /* Search modal header & result box */
  #searchUserModal .header-section,
  #searchUserModal .app-container,
  #fullSearchResultBox,
  #searchUserModal .top-bar,
  #searchUserModal .search-box {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  /* Postingan di profil */
  #profilePostsContainer .post-card,
  #profilePostsContainer .feed-area {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hilangkan bayangan / border tengah 600px */
  .app-container,
  .header-section {
    max-width: 100% !important;
    box-shadow: none !important;
  }
}

/* FIX MENU TEMBUS & MUNCUL DI BERANDA - Pastikan drawer hidden dan solid */
#mainMenuDrawer {
  display: none !important;
}
#mainMenuDrawer[style*="flex"] {
  display: flex !important;
  z-index: 100000 !important;
  top: 0 !important;
  left: 0 !important;
  background: #f0f2f5 !important;
}
#voiceRecordOverlay{position:absolute;left:8px;right:8px;bottom:8px;background:#202c33;border:1px solid #2a3942;padding:12px 14px;display:none;align-items:center;gap:12px;z-index:50;border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,0.4);backdrop-filter:blur(10px);transition:transform 0.15s ease, opacity 0.15s ease;}
#voiceRecordOverlay.active{display:flex;animation:slideUp 0.2s ease;}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.vr-dot{width:10px;height:10px;background:#f15c6d;border-radius:50%;animation:pulseDot 1.2s infinite;flex-shrink:0;}
@keyframes pulseDot{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(241,92,109,0.7)}70%{transform:scale(1.1);box-shadow:0 0 0 8px rgba(241,92,109,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(241,92,109,0)}}
#vrWaveCanvas{flex:1;height:32px;background:#111b21;border-radius:16px;border:1px solid #2a3942;}
#vrTimer{font-family:'SF Mono',monospace;font-size:14px;font-weight:600;color:#fff;min-width:44px;text-align:center;background:#111b21;padding:4px 8px;border-radius:12px;}
.vr-btn{width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.1s;}
.vr-btn:active{transform:scale(0.92);}
#vrCancelBtn{background:#2a3942;color:#f15c6d;}
#vrSendBtn{background:#00a884;color:#fff;box-shadow:0 2px 8px rgba(0,168,132,0.3);}
#vrLockHint{position:absolute;bottom:76px;right:16px;background:#182229;color:#d1d7db;font-size:11px;padding:8px 12px;border-radius:16px;display:none;z-index:55;box-shadow:0 4px 12px rgba(0,0,0,0.3);border:1px solid #2a3942;}
#vrCancelHint{position:absolute;bottom:76px;left:16px;background:#3b2a2e;color:#f5a3ad;font-size:11px;padding:8px 12px;border-radius:16px;display:none;z-index:55;align-items:center;gap:6px;opacity:0;transition:opacity 0.15s;}
#voicePreviewOverlay{position:absolute;left:8px;right:8px;bottom:8px;background:#202c33;padding:14px 12px;display:none;align-items:center;gap:12px;z-index:60;border-radius:24px;border:1px solid #2a3942;box-shadow:0 8px 24px rgba(0,0,0,0.4);animation:slideUp 0.22s ease;}
#voicePreviewOverlay.active{display:flex;}
.vn-bubble{display:flex;align-items:center;gap:10px;min-width:210px;max-width:280px;padding:10px 12px;border-radius:18px;position:relative;box-shadow:0 1px 2px rgba(0,0,0,0.15);}
.vn-me{background:#005c4b;} .vn-friend{background:#202c33;}
.vn-delete{position:absolute;top:-8px;right:-8px;width:22px;height:22px;background:#f15c6d;color:#fff;border-radius:50%;border:2px solid #111b21;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:12px;z-index:2;}
.vn-bubble:hover .vn-delete, .vn-bubble:active .vn-delete{display:flex;}
.chat-input-wrapper.recording-active{
  background:#111b21 !important;
  border:1px solid rgba(0,168,132,0.4) !important;
  justify-content:space-between !important;
  padding:10px 14px !important;
}
#chatRecordingVisualFinal{
  display:none;
  flex:1;
  align-items:center;
  gap:10px;
  width:100%;
}
.chat-input-wrapper.recording-active #chatRecordingVisualFinal{display:flex !important;}
.chat-input-wrapper.recording-active #chatInputMessage,
.chat-input-wrapper.recording-active svg{ display:none !important; }
.rec-dot-final{
  width:10px;height:10px;background:#ff4d6d;border-radius:50%;
  animation:recPulseFinal 1s infinite;
  box-shadow:0 0 0 4px rgba(255,77,109,0.2);
  flex-shrink:0;
}
@keyframes recPulseFinal{0%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:0.7}100%{transform:scale(1);opacity:1}}
.eq-final-container{
  flex:1;
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:28px;
  justify-content:center;
}
.eq-bar-final{
  width:3px;
  min-height:4px;
  background:#00a884;
  border-radius:2px;
  display:inline-block;
  transition:height 0.08s linear;
}
#recordingDurationFinal{
  font-family:monospace;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:#202c33;
  padding:3px 8px;
  border-radius:10px;
  min-width:42px;
  text-align:center;
}
.cancel-hint-final{
  font-size:11px;color:#ff8a9a;white-space:nowrap;
  display:flex;align-items:center;gap:3px;
}
.profile-friends-section { margin-top:16px; background:#fff; border-radius:12px; padding:16px; }
.profile-friends-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.profile-friends-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.friend-card-mini { text-align:center; cursor:pointer; }
.friend-card-mini img { width:80px; height:80px; border-radius:12px; object-fit:cover; background:#f0f2f5; }
.friend-card-mini .fname { font-size:13px; font-weight:600; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* === VOICE NOTE FIX - Professional == */
#micBtnWrapper{
  touch-action:none;
  -webkit-touch-callout:none;
  user-select:none;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
#micBtnWrapper:active{ transform:scale(0.92); }
#micBtnWrapper.recording{
  background: var(--lncommunity-red) !important;
  animation: pulse-record 1.2s infinite !important;
  transform: scale(1.08);
}
.chat-input-wrapper.recording-active{
  background:#111b21 !important;
  border:1px solid rgba(255,77,109,0.35) !important;
}
#chatRecordingVisualFinal{flex:1;display:none;align-items:center;gap:12px;width:100%;min-width:0}
.chat-input-wrapper.recording-active #chatRecordingVisualFinal{display:flex !important}
.chat-input-wrapper.recording-active #chatInputMessage,
.chat-input-wrapper.recording-active > svg{ display:none !important; }

.rec-dot-final{width:10px;height:10px;background:#ff4d6d;border-radius:50%;flex-shrink:0;animation:recPulseFinal 1s infinite;box-shadow:0 0 0 4px rgba(255,77,109,0.2)}
@keyframes recPulseFinal{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(1.15)}}
#recordingDurationFinal{font-weight:700;font-size:15px;color:#fff;min-width:42px; font-variant-numeric:tabular-nums}
.eq-final-container{display:flex;align-items:center;gap:3px;height:20px;flex:1}
.eq-bar-final{width:3px;background:#00a884;border-radius:2px;display:inline-block;animation:eqBounce 0.6s infinite ease-in-out}
.eq-bar-final:nth-child(2){animation-delay:0.08s} .eq-bar-final:nth-child(3){animation-delay:0.16s}
.eq-bar-final:nth-child(4){animation-delay:0.24s} .eq-bar-final:nth-child(5){animation-delay:0.05s}
@keyframes eqBounce{0%,100%{transform:scaleY(0.5);opacity:0.7}50%{transform:scaleY(1.2);opacity:1}}
.cancel-hint-final{font-size:13px;color:#8696a0;display:flex;align-items:center;gap:4px;white-space:nowrap;margin-left:auto}
.cancel-hint-final span{font-size:18px}
.cancel-hint-final.active{color:#ff4d6d !important;font-weight:600}

#voicePreviewOverlay{position:absolute;left:8px;right:8px;bottom:8px;background:#202c33;padding:14px 16px;display:none;align-items:center;gap:12px;z-index:60;border-radius:24px;border:1px solid #2a3942;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
#voicePreviewOverlay.active{display:flex;animation:slideUp 0.22s ease}
#voicePreviewOverlay audio{flex:1;max-width:180px;height:36px}
.vn-preview-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.vn-btn-delete{width:36px;height:36px;border-radius:50%;background:rgba(255,77,109,0.15);color:#ff4d6d;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vn-btn-send{width:42px;height:42px;border-radius:50%;background:var(--lncommunity-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.2)}
.vn-bubble-custom{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:18px;background:#0084ff;color:#fff;min-width:220px;max-width:280px}
.msg-friend .vn-bubble-custom{background:#f0f2f5;color:#050505}
.vn-play-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.msg-friend .vn-play-btn{background:var(--lncommunity-primary);color:#fff}
.vn-wave{flex:1;height:28px;display:flex;align-items:center;gap:2px}
.vn-wave span{width:3px;background:currentColor;opacity:0.7;border-radius:2px;display:inline-block}
.vn-duration{font-size:12px;opacity:0.9;min-width:32px;text-align:right;font-variant-numeric:tabular-nums}
#micLockHint{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.75);color:#fff;padding:8px 14px;border-radius:18px;font-size:13px;display:none;z-index:70;white-space:nowrap;backdrop-filter:blur(6px)}
#micLockHint.show{display:block;animation:slideUp 0.2s ease}
#micBtnWrapper{ background:transparent !important; box-shadow:none !important; width:38px !important; height:38px !important; }
#micBtnWrapper svg{ fill:var(--lncommunity-text-gray) !important; transition:0.2s; }
#micBtnWrapper.recording{ background:rgba(228,30,63,0.12) !important; }
#micBtnWrapper.recording svg{ fill:var(--lncommunity-red) !important; transform:scale(1.15); }
#micBtnWrapper:active{ transform:scale(0.9); }
/* ===== WHATSAPP CLONE 100% SEPERTI FOTO ===== */
#globalChatBox{
  background: #ffffff !important;
  background-image: none !important;
  background-repeat: repeat !important;
  background-size: 400px !important;
}
#globalChatBox::before{
  content:''; position:absolute; inset:0;
  background: rgba(229,221,213,0.92);
  backdrop-filter: blur(2px);
  z-index:0; pointer-events:none;
}

/* HEADER - putih persis foto */
#globalChatBox .chat-header{
  position:relative; z-index:2;
  background:#ffffff !important;
  border-bottom:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.08) !important;
  padding:8px 12px !important;
  height:60px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
#globalChatBox .chat-header-left{ gap:10px !important; }
#globalChatBox .chat-back-btn{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:#54656f !important;
}
#globalChatBox .chat-back-btn img{ display:none !important; }
#globalChatBox .chat-back-btn::before{
  content:'←'; font-size:22px; font-weight:400; color:#54656f; line-height:1;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* avatar 40px bulat */
#chatFriendAvatar{
  width:40px !important; height:40px !important; border-radius:50% !important;
  background-size:cover !important; flex-shrink:0;
}
#chatFriendNama{
  font-size:16.5px !important; font-weight:600 !important; color:#111b21 !important; line-height:1.1 !important;
}
#chatFriendStatus{
  font-size:13px !important; color:#667781 !important; margin-top:2px !important;
}
/* 3 titik kanan */
.chat-header::after{
  content:'⋮'; font-size:22px; color:#54656f; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  letter-spacing:2px; font-weight:600;
}

/* MESSAGES AREA */
#chatMessagesContainer{
  position:relative; z-index:1;
  background: transparent !important;
  padding:12px 8px 16px !important;
  gap:6px !important;
  background-image: none !important;
}

/* DATE PILL 29 Juni 2026 */
.wa-date-pill{
  align-self:center; background:#f0f2f5; background:rgba(8,102,255,0.08); color:#65676b; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:20px; box-shadow:none; border:1px solid rgba(0,0,0,0.06);
  margin:8px 0 12px; text-transform:none; letter-spacing:0.2px;
}

/* ENCRYPT NOTICE - LN COMMUNITY STYLE (sesuai warna aplikasi) */
.wa-encrypt-notice, .ln-community-notice{
  align-self:center; max-width:92%; background:#E7F3FF; background:rgba(8,102,255,0.10); color:#050505; font-size:12.5px; line-height:1.45;
  padding:10px 14px; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,0.06); border:1px solid rgba(8,102,255,0.12);
  text-align:left; position:relative; margin:6px 0 14px; display:flex; align-items:flex-start;
}
.wa-encrypt-notice::before{
  content:''; display:none;
}
.wa-encrypt-notice b{ font-weight:600; color:#050505; }
.wa-encrypt-notice span[style*="color:#0866ff"]{ color:#0866ff !important; }

/* BUBBLES - override agar mirip WA kalau mau, tapi tetap support existing */
.msg-bubble{ max-width:75% !important; border-radius:8px !important; padding:8px 10px !important; font-size:14.5px !important; line-height:1.35 !important; box-shadow:0 1px 0.5px rgba(0,0,0,0.13) !important; position:relative; }
.msg-self{ background:var(--lncommunity-primary) !important; background:#0866ff !important; align-self:flex-end !important; border-radius:18px 18px 4px 18px !important; color:#ffffff !important; }
.msg-self a, .msg-self span{ color:#ffffff !important; }
.msg-friend{ background:#f0f2f5 !important; align-self:flex-start !important; border-radius:18px 18px 18px 4px !important; color:#050505 !important; }

.msg-friend{ background:#ffffff !important; align-self:flex-start !important; border-top-left-radius:0 !important; color:#111b21 !important; }

/* INPUT AREA - persis foto */
#globalChatBox .chat-input-area{
  position:relative; z-index:2;
  background:#f0f2f5 !important; background: #f0f0f0 !important;
  border-top:none !important;
  padding:6px 10px 10px 10px !important;
  gap:8px !important;
  align-items:flex-end !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}
#globalChatBox .chat-input-wrapper{
  background:#ffffff !important;
  border-radius:24px !important;
  padding:6px 6px 6px 10px !important;
  gap:6px !important;
  flex:1 !important;
  min-height:44px !important;
  box-shadow:0 1px 1px rgba(0,0,0,0.08) !important;
  border:1px solid #ffffff !important;
}
#globalChatBox .chat-input-wrapper svg{ width:26px !important; height:26px !important; fill:#54656f !important; opacity:0.95; flex-shrink:0; }
#globalChatBox #chatInputMessage{
  font-size:16px !important; padding:8px 4px !important; color:#111b21 !important;
  background:transparent !important;
}
#globalChatBox #chatInputMessage::placeholder{ color:#667781 !important; }

/* MIC BUTTON biru bulat seperti foto */
#micBtnWrapper{
  width:48px !important; height:48px !important; min-width:48px !important;
  background:#0084ff !important; background:var(--lncommunity-primary,#0b93f6) !important;
  border-radius:50% !important; box-shadow:0 1px 2px rgba(0,0,0,0.2) !important;
  display:flex !important; align-items:center; justify-content:center !important;
}
#micBtnWrapper svg{ fill:#ffffff !important; width:22px !important; height:22px !important; }
#micBtnWrapper.recording{ background:#e41e3f !important; animation:pulse-record 1.1s infinite !important; }

#sendBtnWrapper{
  width:48px !important; height:48px !important; min-width:48px !important;
  background:var(--lncommunity-primary,#0b93f6) !important; border-radius:50% !important;
}

/* Hilangkan background abu lama */
.chat-input-wrapper.recording-active{ background:#ffffff !important; border-color:#e9edef !important; }
.wa-wallpaper-layer{
  position:absolute; inset:0; z-index:0;
  background-color:#e5ddd5;
  background-image:url('https://camo.githubusercontent.com/3a5b0f8e4c6b6e9e2e8e8e8e8e8e8e8e8e8e8e8/68747470733a2f2f7765622e77686174736170702e636f6d2f696d672f62672d636861742d74696c652d6c696768745f61346265353132653731353839623133623731343432303133323438392e706e67');
  background-repeat:repeat; background-size:420px;
  transition: background 0.35s ease;
}
.wa-wallpaper-layer.dark{ background-color:#111b21; }
.wa-menu-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#54656f; font-size:22px; z-index:3;
}
.wa-menu-btn:active{ background:rgba(0,0,0,0.06); }
.wa-dropdown{
  position:absolute; right:12px; top:56px; background:#fff; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18); min-width:180px; z-index:10;
  padding:6px 0; display:none; overflow:hidden;
}
.wa-dropdown.show{ display:block; animation:waDrop 0.18s ease; }
@keyframes waDrop{ from{opacity:0; transform:translateY(-6px) scale(0.98)} to{opacity:1; transform:translateY(0) scale(1)} }
.wa-dropdown-item{ padding:12px 16px; font-size:14.5px; color:#111b21; cursor:pointer; display:flex; align-items:center; gap:12px; }
.wa-dropdown-item:hover{ background:#f5f6f6; }
.wa-dropdown-item svg{ width:20px; height:20px; fill:#54656f; flex-shrink:0; }

/* Modal Wallpaper */
#waWallpaperModal{
  position:fixed; inset:0; z-index:5000; display:none; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(2px);
}
#waWallpaperModal.show{ display:flex; }
.wa-wp-sheet{
  width:100%; max-width:520px; background:#fff; border-radius:20px 20px 0 0;
  max-height:85vh; display:flex; flex-direction:column; animation:sheetUp 0.28s cubic-bezier(0.2,0.8,0.2,1);
  overflow:hidden;
}
@keyframes sheetUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
.wa-wp-header{ padding:16px 20px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e9edef; flex-shrink:0; }
.wa-wp-title{ font-size:18px; font-weight:600; color:#111b21; }
.wa-wp-close{ width:32px; height:32px; border-radius:50%; background:#f0f2f5; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wa-wp-body{ padding:16px 16px 24px; overflow-y:auto; flex:1; }
.wa-wp-section{ margin-bottom:20px; }
.wa-wp-label{ font-size:13px; font-weight:600; color:#667781; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.wa-wp-colors{ display:flex; gap:12px; flex-wrap:wrap; }
.wa-color-dot{ width:44px; height:44px; border-radius:50%; cursor:pointer; border:3px solid #fff; box-shadow:0 0 0 1px #e9edef, 0 1px 3px rgba(0,0,0,0.12); transition:transform 0.15s; position:relative; }
.wa-color-dot:active{ transform:scale(0.92); }
.wa-color-dot.active{ box-shadow:0 0 0 2px #0084ff, 0 2px 8px rgba(0,0,0,0.15); }
.wa-color-dot.active::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,0.4); font-size:16px; }
.wa-wp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wa-wp-thumb{ aspect-ratio:1; border-radius:12px; overflow:hidden; cursor:pointer; position:relative; border:2px solid transparent; background-size:cover; background-position:center; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.wa-wp-thumb.active{ border-color:#0084ff; box-shadow:0 0 0 2px rgba(0,132,255,0.2); }
.wa-wp-thumb span{ position:absolute; bottom:6px; left:6px; right:6px; background:rgba(0,0,0,0.55); color:#fff; font-size:11px; padding:3px 6px; border-radius:6px; text-align:center; backdrop-filter:blur(4px); }
.wa-upload-btn{
  width:100%; padding:12px; border:1.5px dashed #d1d7db; border-radius:12px; background:#f8f9fa; color:#54656f; font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
}
.wa-upload-btn:hover{ background:#f0f2f5; border-color:#aebac1; }
.wa-wp-footer{ padding:12px 16px; border-top:1px solid #e9edef; display:flex; gap:10px; flex-shrink:0; }
.wa-btn{ flex:1; padding:12px; border-radius:24px; font-size:14.5px; font-weight:600; cursor:pointer; text-align:center; }
.wa-btn-secondary{ background:#f0f2f5; color:#111b21; }
.wa-btn-primary{ background:#0084ff; color:#fff; }
/* FINAL FIX V3: 1 BACK ICON SAJA, STYLE SAMA KAYAK PROFIL */
#globalChatBox .chat-header{
  padding-left:10px !important;
  padding-right:12px !important;
  gap:8px !important;
}
#globalChatBox .chat-header-left{
  margin-left:0 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
#globalChatBox .chat-back-btn{
  display:flex !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:#f0f2f5 !important;
  color:#050505 !important;
  flex-shrink:0 !important;
  position:relative !important;
}
#globalChatBox .chat-back-btn::before,
#globalChatBox .chat-back-btn::after,
#globalChatBox .chat-header::before,
#globalChatBox .chat-header::after{
  display:none !important;
  content:none !important;
}
#globalChatBox .chat-back-btn img{
  display:none !important;
}
#globalChatBox .chat-back-btn svg{
  width:20px !important;
  height:20px !important;
  fill:#050505 !important;
  display:block !important;
}
/* HAPUS TOTAL TITIK 3 */
.wa-menu-btn,
#waHeaderDrop,
.wa-dropdown{
  display:none !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
#chatFriendAvatar{ margin-left:0 !important; }
/* === FIX ANTI TEMBUS CHAT - FINAL V3 === */
html, body {
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: auto !important;
}

/* Jadikan modal inbox & chat sebagai layer solid terisolasi */
#messengerInboxModal,
#globalChatBox {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  z-index: 9998 !important;
  isolation: isolate !important;
  contain: strict !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: hidden !important;
  overscroll-behavior-y: auto !important; overscroll-behavior: auto !important;
  background: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

#globalChatBox {
  z-index: 9999 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  display: none;
  flex-direction: column !important;
}

/* Ketika aktif */
#globalChatBox[style*="display: flex"],
#globalChatBox[style*="display:flex"],
#globalChatBox[style*="block"] {
  display: flex !important;
}

#messengerInboxModal[style*="display: flex"],
#messengerInboxModal[style*="display:flex"] {
  display: flex !important;
}

/* MATIKAN overlay transparan penyebab tembus */
#globalChatBox::before,
#globalChatBox::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Header - kunci, tidak ikut scroll */
#globalChatBox .chat-header,
#messengerInboxModal .msgr-header {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
  transform: translateZ(0) !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e9edef !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  width: 100% !important;
}

/* List chat inbox */
#messengerInboxModal .msgr-chat-list {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important; overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  background: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
  transform: translateZ(0) !important;
}

/* === CORE FIX: RUANGAN PESAN === */
#chatMessagesContainer {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important; /* penting untuk flex scroll */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important; overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: none !important;
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: repeat !important;
  background-size: 380px !important;
  background-image: none !important;
  padding: 12px 8px calc(16px + env(safe-area-inset-bottom)) !important;
}

/* Lapisan wallpaper solid di belakang pesan, bukan transparan */
#chatMessagesContainer::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(229,221,213,0.88) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
}

/* Pastikan bubble tetap di atas wallpaper */
#chatMessagesContainer > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Input area - kunci di bawah, tidak fixed yang bikin bocor */
#globalChatBox .chat-input-area {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 10 !important;
  transform: translateZ(0) !important;
  background: #f0f2f5 !important;
  border-top: 1px solid #e9edef !important;
  padding: 8px 10px max(8px, env(safe-area-inset-bottom)) 10px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#globalChatBox .chat-input-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Cegah scroll chaining ke body */
#globalChatBox,
#messengerInboxModal,
#chatMessagesContainer,
.msgr-chat-list {
  touch-action: pan-y !important;
}

/* Ketika chat terbuka, kunci body biar feed belakang tidak ikut scroll & tidak tembus */
html:has(#globalChatBox[style*="display: flex"]),
html:has(#messengerInboxModal[style*="display: flex"]),
body:has(#globalChatBox[style*="display: flex"]),
body:has(#messengerInboxModal[style*="display: flex"]) {
  overflow: clip !important;
  height: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

/* Fallback untuk browser tanpa :has - via class .chat-open yang ditambah JS */
html.chat-open,
body.chat-open {
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  overscroll-behavior-y: auto !important;
}

/* Wallpaper layer lama - pastikan tidak bikin transparansi ganda */
.wa-wallpaper-layer {
  display: none !important; /* kita sudah pakai background di #chatMessagesContainer */
}

/* Search bar inbox */
.msgr-search-bar {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Fix iOS rubber band effect */
@supports (-webkit-touch-callout: none) {
  #globalChatBox,
  #messengerInboxModal {
    height: -webkit-fill-available !important;
    max-height: -webkit-fill-available !important;
  }
}
/* === REQUEST USER: BACKGROUND PUTIH + HANYA HAPUS CHAT === */
#globalChatBox,
#globalChatBox[style],
#chatMessagesContainer,
.msgr-chat-list {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

#globalChatBox::before,
#globalChatBox::after,
#chatMessagesContainer::before,
#chatMessagesContainer::after,
.wa-wallpaper-layer,
.wa-wallpaper-layer.dark {
  display: none !important;
  content: none !important;
  background: #ffffff !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Pastikan chat tetap putih bersih */
#chatMessagesContainer {
  background: #ffffff !important;
}

/* Modal wallpaper hapus permanen */
#waWallpaperModal,
.wa-wp-sheet,
.wa-wp-header,
.wa-wp-body,
.wa-wp-footer,
.wa-wp-colors,
.wa-wp-grid,
.wa-color-dot,
.wa-wp-thumb {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Dropdown hanya untuk hapus chat - styling tetap rapi */
.wa-dropdown {
  min-width: 160px !important;
  padding: 4px 0 !important;
  border-radius: 12px !important;
}
.wa-dropdown-item {
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  color: #e41e3f !important;
  font-weight: 500 !important;
}
.wa-dropdown-item:hover {
  background: #fff0f2 !important;
}

/* Bubble tetap terlihat jelas di background putih */
.msg-self {
  background: #0084ff !important;
  color: #fff !important;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08) !important;
}
.msg-friend {
  background: #f0f2f5 !important;
  color: #050505 !important;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06) !important;
}
/* === MODAL HAPUS CHAT CANTIK - MATCH APP STYLE === */
.custom-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.custom-modal-overlay.show {
  display: flex;
  opacity: 1;
}
.custom-modal-card {
  width: 100%;
  max-width: 340px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.12);
  padding: 24px 20px 16px;
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
  position: relative;
  overflow: hidden;
}
.custom-modal-overlay.show .custom-modal-card {
  transform: translateY(0) scale(1);
}
.custom-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  background: #fff0f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e41e3f;
}
.custom-modal-icon svg { width: 28px; height: 28px; fill: #e41e3f; }
.custom-modal-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111b21;
  margin: 0 0 8px;
  line-height: 1.3;
}
.custom-modal-card p {
  font-size: 14px;
  color: #667781;
  line-height: 1.45;
  margin: 0 0 20px;
  padding: 0 4px;
}
.custom-modal-card p b {
  color: #111b21;
  font-weight: 600;
}
.custom-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.btn-modal-cancel,
.btn-modal-delete {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, background 0.18s ease, opacity 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-modal-cancel {
  background: #f0f2f5;
  color: #111b21;
}
.btn-modal-cancel:hover { background: #e4e6eb; }
.btn-modal-cancel:active { transform: scale(0.97); }
.btn-modal-delete {
  background: #e41e3f;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(228,30,63,0.28);
}
.btn-modal-delete:hover { background: #d11a38; }
.btn-modal-delete:active { transform: scale(0.97); }
.btn-modal-delete:disabled {
  opacity: 0.7;
  pointer-events: none;
}

/* Animasi sukses kecil */
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
/* === HAPUS 1.1 & HAPUS SEMUA - PERMANEN === */
.msg-bubble {
  position: relative !important;
  user-select: none;
  -webkit-user-select: none;
}
.msg-bubble.msg-self {
  cursor: pointer;
}
.msg-bubble.msg-self:active {
  transform: scale(0.98);
  opacity: 0.9;
}
.msg-bubble.deleting {
  opacity: 0.4 !important;
  transform: scale(0.92) !important;
  pointer-events: none;
  transition: all 0.2s ease !important;
}

/* Indikator long-press */
.msg-bubble.long-pressing {
  animation: longPressPulse 0.5s ease-in-out infinite alternate;
}
@keyframes longPressPulse {
  from { transform: scale(1); box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
  to { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
}

/* Choice Modal - 2 opsi */
.choice-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.24s ease;
}
.choice-modal-overlay.show {
  display: flex;
  opacity: 1;
}
.choice-modal-sheet {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 8px 0 max(16px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2,0.8,0.2,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  max-height: 90vh;
  overflow-y: auto;
}
.choice-modal-overlay.show .choice-modal-sheet {
  transform: translateY(0);
}
.choice-handle {
  width: 36px;
  height: 4px;
  background: #d1d7db;
  border-radius: 2px;
  margin: 8px auto 16px;
}
.choice-title {
  font-size: 17px;
  font-weight: 700;
  color: #111b21;
  text-align: center;
  padding: 0 20px 6px;
}
.choice-subtitle {
  font-size: 13px;
  color: #667781;
  text-align: center;
  padding: 0 24px 16px;
  line-height: 1.4;
}
.choice-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.18s;
  border-top: 1px solid #f0f2f5;
}
.choice-option:first-of-type { border-top: none; }
.choice-option:hover { background: #f8f9fa; }
.choice-option:active { background: #f0f2f5; }
.choice-option-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.choice-option-icon.mine { background: #e7f3ff; color: #0084ff; }
.choice-option-icon.all { background: #ffebef; color: #e41e3f; }
.choice-option-icon.single { background: #ffebef; color: #e41e3f; }
.choice-option-text { flex: 1; text-align: left; }
.choice-option-title { font-size: 15px; font-weight: 600; color: #111b21; line-height: 1.2; }
.choice-option-desc { font-size: 12.5px; color: #667781; margin-top: 2px; line-height: 1.3; }
.choice-cancel {
  margin: 12px 16px 0;
  height: 48px;
  background: #f0f2f5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #111b21;
  cursor: pointer;
}
.choice-cancel:active { transform: scale(0.98); background: #e4e6eb; }

/* Toast */
.permanent-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #323232;
  color: #fff;
  padding: 12px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  z-index: 10002;
  opacity: 0;
  transition: all 0.28s cubic-bezier(0.2,0.8,0.2,1);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.permanent-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Toast untuk delete realtime */
.pusher-delete-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.9);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 12px;
  opacity: 0;
  transition: all 0.22s ease;
  pointer-events: none;
  z-index: 5;
}
.pusher-delete-flash.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
/* ====== FACEBOOK STYLE CHAT UPGRADE - LENGANDAI - TIDAK MERUSAK FUNGSI LAIN ====== */
#messengerInboxModal.msgr-modal {
  background: #FFFFFF !important;
  display: none;
  flex-direction: column;
}
#messengerInboxModal .msgr-header {
  padding: 16px 16px 8px !important;
  border-bottom: none !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}
#messengerInboxModal .msgr-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#messengerInboxModal .msgr-header-title {
  font-size: 24px;
  font-weight: 800;
  color: #050505;
  letter-spacing: -0.3px;
}
#messengerInboxModal .msgr-search-bar {
  margin: 0 16px !important;
  background: #F0F2F5 !important;
  border-radius: 50px !important;
  padding: 0 12px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
}
#messengerInboxModal .msgr-search-bar input {
  font-size: 15px !important;
  background: transparent !important;
}
#messengerInboxModal .msgr-search-bar input::placeholder {
  color: #65676B !important;
}
#messengerInboxModal .msgr-search-clear {
  width: 20px;
  height: 20px;
  background: #BCC0C4;
  color: white;
  border-radius: 50%;
  border: none;
  font-size: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
#messengerInboxModal .msgr-search-clear.show {
  display: flex !important;
}
#messengerInboxModal .msgr-chips {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
}
#messengerInboxModal .msgr-chips::-webkit-scrollbar { display: none; }
#messengerInboxModal .msgr-chip {
  height: 32px;
  padding: 0 14px;
  border-radius: 20px;
  border: none;
  background: #F0F2F5;
  color: #050505;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
#messengerInboxModal .msgr-chip.active {
  background: #E7F3FF !important;
  color: #0866FF !important;
}
#messengerInboxModal .msgr-active-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px;
  padding: 8px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #F0F2F5;
  flex: 0 0 auto;
}
#messengerInboxModal .msgr-active-row::-webkit-scrollbar { display: none; }
#messengerInboxModal .msgr-active-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px;
  min-width: 60px;
  cursor: pointer;
  flex-shrink: 0;
}
#messengerInboxModal .msgr-active-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  background: #E4E6EB !important;
  overflow: visible !important;
}
#messengerInboxModal .msgr-active-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
#messengerInboxModal .msgr-active-name {
  display: block !important;
  font-size: 12px !important;
  color: #050505 !important;
  text-align: center !important;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#messengerInboxModal .msgr-online-dot {
  width: 14px !important;
  height: 14px !important;
  background: #31A24C !important;
  border: 3px solid white !important;
  bottom: 0 !important;
  right: 0 !important;
}
#messengerInboxModal .msgr-chat-list {
  flex: 1 1 auto !important;
  background: #FFFFFF !important;
  padding: 8px 8px 100px !important;
  gap: 2px !important;
}
#messengerInboxModal .msgr-chat-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  transition: background 0.15s !important;
  position: relative !important;
  cursor: pointer !important;
}
#messengerInboxModal .msgr-chat-item:hover {
  background: #F2F3F5 !important;
}
#messengerInboxModal .msgr-chat-item:active {
  background: #E4E6EB !important;
}
#messengerInboxModal .msgr-chat-avatar {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  position: relative !important;
  overflow: visible !important;
}
#messengerInboxModal .msgr-chat-info {
  flex: 1 !important;
  overflow: hidden !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
#messengerInboxModal .msgr-chat-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#messengerInboxModal .msgr-chat-preview {
  font-size: 13px !important;
  color: #65676B !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#messengerInboxModal .msgr-chat-preview b {
  font-weight: 400 !important;
}
#messengerInboxModal .msgr-chat-preview .lnfb-unread {
  font-weight: 600 !important;
  color: #050505 !important;
}
#messengerInboxModal .msgr-chat-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: 8px;
}
#messengerInboxModal .msgr-chat-badge {
  background: #0866FF;
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
#messengerInboxModal .msgr-chat-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #F0F2F5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: #65676B;
}
#messengerInboxModal .msgr-chat-item:hover .msgr-chat-action-btn.chat {
  background: #0866FF;
  color: white;
}
#messengerInboxModal .msgr-context-menu {
  position: absolute;
  right: 12px;
  top: 62px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  width: 220px;
  z-index: 100;
  padding: 8px;
  display: none;
}
#messengerInboxModal .msgr-context-menu.show {
  display: block !important;
}
#messengerInboxModal .msgr-context-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
#messengerInboxModal .msgr-context-item:hover {
  background: #F0F2F5;
}
#messengerInboxModal .lnfb-typing-dots {
  display: inline-flex;
  gap: 2px;
}
#messengerInboxModal .lnfb-typing-dots span {
  width: 4px;
  height: 4px;
  background: #0866FF;
  border-radius: 50%;
  animation: lnfbBounce 1.4s infinite;
}
#messengerInboxModal .lnfb-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
#messengerInboxModal .lnfb-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lnfbBounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
/* FIX PERMANEN - Hapus badge 1 LNC dekat share - tidak bocor lagi */
.lnc-reward-badge, div.lnc-reward-badge { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; width:0 !important; height:0 !important; }
/* Putih full untuk login & daftar - old flow */
#authContainer{
  background: #ffffff !important;
  background-image: none !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
}
#authContainer::before, #authContainer::after{ display:none !important; }
.auth-bottom-card{
  background: #ffffff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100dvh !important;
  height: auto !important;
  justify-content: center !important;
  padding: 24px 22px 32px !important;
}
.auth-bottom-card::before{ display:none !important; }
.auth-logo-header{ display:none !important; }
.auth-logo-header-clean{
  color: #0866ff !important;
  text-shadow: none !important;
}
.auth-logo-header-clean::after{
  color: #65676b !important;
  opacity: 1 !important;
}
.auth-greeting{
  color: #050505 !important;
}
@media (min-width: 600px){
  #authContainer{
    background: #f0f2f5 !important;
  }
  .auth-bottom-card{
    max-width: 420px !important;
    min-height: auto !important;
    height: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.06) !important;
    border: 1px solid #e4e6eb !important;
    padding: 28px 26px 24px !important;
  }
}
.auth-logo-icon{
  width: 84px;
  height: 84px;
  margin: 12px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lnc-brand-logo{
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(8,102,255,0.28), 0 2px 8px rgba(0,0,0,0.08);
  background: #fff;
}
@media (max-height: 700px){
  .auth-logo-icon{ width: 64px; height: 64px; margin: 4px auto 8px; }
  .lnc-brand-logo{ width: 56px; height: 56px; }
}
/* Input icons */
.auth-input-group{ position: relative !important; }
.input-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.auth-input-new.has-icon{ padding-left: 42px !important; }
.auth-input-group:focus-within .input-icon svg{ stroke: #0866ff !important; }
.input-icon svg{ transition: 0.2s; }
/* === LN COMMUNITY SKELETON - MATCH TAMPILAN ASLI === */
@keyframes fbShimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.fb-skeleton {
  background-color: #e4e6eb;
  background-image: linear-gradient(90deg, #e4e6eb 0px, #f0f2f5 200px, #e4e6eb 400px);
  background-size: 800px 100%;
  animation: fbShimmer 1.2s infinite linear;
}
#homeSkeletonLoader {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;
  background: #f0f2f5;
}
/* STORIES - ukuran ikut asli 100x170 */
.fb-skel-stories {
  background: #fff;
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  overflow: hidden;
  border-bottom: 2px solid #c9ccd1;
  white-space: nowrap;
}
.fb-skel-story-item {
  min-width: 100px;
  width: 100px;
  height: 170px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: #e4e6eb;
}
/* POST CARD - ikut tampilan screenshot tanpa media */
.fb-skel-card {
  background: #fff;
  margin-bottom: 0;
  border-bottom: 2px solid #c9ccd1;
  padding: 0;
  overflow: hidden;
}
.fb-skel-card-header {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  align-items: center;
}
.fb-skel-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fb-skel-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fb-skel-line {
  height: 10px;
  border-radius: 4px;
}
.fb-skel-line.name { width: 130px; height: 14px; }
.fb-skel-line.date { width: 165px; height: 11px; }
.fb-skel-line.text { width: 85px; height: 15px; }
.fb-skel-header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}
.fb-skel-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
}
.fb-skel-content {
  padding: 4px 16px 14px;
}
.fb-skel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid #e4e6eb;
}
.fb-skel-footer-left {
  display: flex;
  gap: 18px;
  align-items: center;
}
.fb-skel-footer-btn {
  width: 52px;
  height: 18px;
  border-radius: 10px;
}
.fb-skel-footer-right {
  width: 48px;
  height: 18px;
  border-radius: 10px;
}
@media screen and (min-width: 601px) {
  #homeSkeletonLoader { max-width: 600px; }
}
@media screen and (max-width: 600px) {
  .fb-skel-card { border-radius: 0; }
}
/* Fix anti hitam tapi jangan timpa card Buat Cerita */
.story-card.create-story { background:#fff !important; }
.story-card:not(.create-story) { background:#111 !important; }
.story-create-img-area { background:#fff; }
.story-video-preview { background:#111; object-fit:cover; display:block; width:100%; height:100%; }
.story-video-preview::-webkit-media-controls { display:none !important; }
/* Pastikan teks Buat Cerita tetap terlihat */
.story-name.create-text { background:#fff; color:#050505 !important; padding-top:4px; }
/* Anti hitam saat loading - gradient halus bukan hitam pekat */
.story-bg { background:#e4e6eb !important; }
/* Profil tetap menampilkan tab lengkap di atas seperti tab lain */
#userProfileModal {
  top: 104px !important;
  height: calc(100dvh - 104px) !important;
  height: calc(100dvh - 104px) !important;
  bottom: 0 !important;
  z-index: 900 !important;
  background: #f0f2f5 !important;
  padding: 0 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
}
#userProfileModal .modal-card.full-screen {
  width: 100% !important;
  max-width: 600px !important;
  height: auto !important;
  min-height: calc(100dvh - 104px) !important;
  max-height: none !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}
/* Pastikan nav tetap di atas profil */
.nav-header {
  z-index: 1001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
/* Saat profil dibuka, sembunyikan view lain biar tidak dobel scroll */
body.profile-open .main-container > div[id$="View"] {
  display: none !important;
}
/* FIX: Tab bisa pindah tanpa close - jarak normal, navbar tetap fixed */
.navbar {
  position: fixed !important;
  top: 0 !important;
  z-index: 3300 !important;
}
.nav-tabs {
  z-index: 3300 !important;
}
#userProfileModal {
  z-index: 3200 !important;
}
.main-container {
  padding-top: var(--nav-height) !important;
}
#userProfileModal { top: var(--nav-height) !important; height: calc(100dvh - var(--nav-height)) !important; padding-top: 0 !important; }
#userProfileModal .modal-card.full-screen { padding-top: 0 !important; margin-top: 0 !important; }
#userProfileModal .fb-profile-container { padding-top: 0 !important; margin-top: 0 !important; }
#userProfileModal .fb-cover-wrapper { margin: 0 !important; width: 100% !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; }
#userProfileModal .fb-cover-img { border-radius: 0 !important; }
#profileFriendsListSection, .profile-friends-section { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden !important; }
.new-profile-actions { margin-bottom: 8px !important; }
.profile-tabs-new { margin-top: 8px !important; border-top: 1px solid var(--lncommunity-divider) !important; padding-top: 8px !important; }
.photo-grid-item{
  cursor:pointer !important;
  position:relative;
  overflow:hidden;
  border-radius:8px !important;
  background:#f0f2f5;
  aspect-ratio:1/1;
}
.photo-grid-item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
  transition:transform 0.2s ease;
}
.photo-grid-item:active img{
  transform:scale(0.97);
}
.photo-sub-tabs{
  display:flex;
  gap:8px;
  padding:12px;
  background:#fff;
  border-bottom:1px solid #e4e6eb;
  overflow-x:auto;
}
.photo-sub-tab{
  padding:8px 16px;
  border-radius:20px;
  border:none;
  background:#f0f2f5;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  cursor:pointer;
}
.photo-sub-tab.active{
  background:#e7f3ff !important;
  color:#0866ff !important;
}
#profileAvatarBoxWrapper, #profileAvatarBox{
  cursor:pointer !important;
}
#imageViewerModal{ background:#000 !important; }
#imageViewerModal > div{ background:#000 !important; }
#imageViewerContent{ background:#000 !important; }
#fullScreenPreviewImg{ background:#000 !important; }
#imageViewerModal #previewLikeBtn,
#imageViewerModal #previewSaveBtn,
#imageViewerModal #previewDeleteBtnBottom,
#imageViewerModal #previewShareBtn{
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,0.18) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,0.22) !important;
}
#imageViewerModal #previewLikeBtn svg,
#imageViewerModal #previewSaveBtn svg,
#imageViewerModal #previewDeleteBtnBottom svg,
#imageViewerModal #previewShareBtn svg{ stroke:#fff !important; }
#imageViewerModal #previewSaveBtn{ background:rgba(8,102,255,0.85) !important; border:none !important; }
.photo-grid-item{ cursor:pointer !important; }
#logoutConfirmModal{ z-index: 20000 !important; }
#logoutConfirmModal .modal-card{ z-index: 20001 !important; }
#userProfileModal{ z-index: 10000 !important; }
/* FIX: Comment modal tembus dari beranda/media di bagian bawah */
#commentBottomSheetModal{
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding-top: 0 !important;
  inset: 0 !important;
  position: fixed !important;
}
#commentBottomSheetModal .bottom-sheet-content{
  height: 88dvh !important;
  max-height: 92dvh !important;
  min-height: 60dvh !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border-radius: 20px 20px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  position: relative !important;
  bottom: 0 !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12) !important;
}
#popupCommentsList{
  background: #ffffff !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 16px !important;
}
#commentInputWrapper{
  background: #ffffff !important;
  background-color: #ffffff !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 12px)) 16px !important;
  border-top: 1px solid #e4e6eb !important;
  z-index: 20 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
}
/* Pastikan tidak ada celah transparan di bawah input */
#commentBottomSheetModal .bottom-sheet-content::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-bottom, 0px);
  background: #ffffff;
  z-index: 19;
  pointer-events: none;
}
/* FIXED: Chat header icon close/back di kanan atas - konsisten dengan list chat */
#globalChatBox .chat-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding: 12px 16px !important;
}
#globalChatBox .chat-header-left{
  flex:1 !important;
  min-width:0 !important;
  cursor:default !important;
}
#globalChatBox .chat-header-right{
  display:flex !important;
  align-items:center !important;
  margin-left:auto !important;
}
#globalChatBox .chat-header-right .msgr-icon-btn{
  background:#F0F2F5 !important;
  transition: background 0.2s;
}
#globalChatBox .chat-header-right .msgr-icon-btn:hover{
  background:#E4E6EB !important;
}
#globalChatBox .chat-header-right .msgr-icon-btn:active{
  transform:scale(0.92);
}
/* Sembunyikan back-btn lama jika masih ada di cache */
#globalChatBox .chat-back-btn{ display:none !important; }

/* Pastikan header inbox juga konsisten kanan */
#messengerInboxModal .msgr-header-top-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  width:100% !important;
}
#messengerInboxModal .msgr-header-icons{
  margin-left:auto !important;
}
/* =========================================================
   FINAL FIX 100% - Area Komentar Anti-Tembus
   Tidak merubah fungsi JS, hanya isolasi layout
   ========================================================= */
#commentBottomSheetModal{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  display: none;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 5500 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  isolation: isolate !important;
}
#commentBottomSheetModal[style*="display: flex"],
#commentBottomSheetModal[style*="display:flex"]{
  display: flex !important;
}

#commentBottomSheetModal .bottom-sheet-content{
  width: 100% !important;
  max-width: 600px !important;
  height: 88dvh !important;
  max-height: 88dvh !important;
  min-height: 50dvh !important;
  background: #ffffff !important;
  border-radius: 20px 20px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  position: relative !important;
  bottom: 0 !important;
  left: auto !important;
  right: auto !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.18) !important;
  isolation: isolate !important;
  contain: layout style !important;
  transform: translateZ(0) !important;
  animation: commentSheetUp 0.32s cubic-bezier(0.16,1,0.3,1) !important;
}
@keyframes commentSheetUp{
  from{ transform: translateY(100%) translateZ(0); }
  to{ transform: translateY(0) translateZ(0); }
}

/* Hilangkan pseudo element lama yang bikin celah */
#commentBottomSheetModal .bottom-sheet-content::after{
  display: none !important;
  content: none !important;
}

/* Header handle area - lock */
#commentBottomSheetModal .bottom-sheet-content > div:first-child{
  flex-shrink: 0 !important;
  background: #fff !important;
  position: relative !important;
  z-index: 5 !important;
  isolation: isolate !important;
}

/* LIST KOMENTAR - SATU-SATUNYA YANG SCROLL */
#popupCommentsList{
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  background: #ffffff !important;
  padding: 16px !important;
  padding-bottom: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  contain: content !important;
  scrollbar-width: thin !important;
}
#popupCommentsList::-webkit-scrollbar{
  width: 4px !important;
}
#popupCommentsList::-webkit-scrollbar-thumb{
  background: #ced0d4 !important;
  border-radius: 4px !important;
}

/* Setiap item komentar - anti tembus */
#popupCommentsList > div,
#popupCommentsList [id^="comment-box-"]{
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  contain: layout style !important;
}

/* Teks komentar - anti overflow horizontal */
#popupCommentsList [id^="comment-text-"],
#popupCommentsList [id^="comment-box-"] div[style*="font-size:15px"]{
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  box-sizing: border-box !important;
}

/* Replies container - batasi & scroll internal jika panjang */
#popupCommentsList [id^="comment-box-"] div[style*="margin-left"]{
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* INPUT WRAPPER - LOCK DI BAWAH, TIDAK STICKY TEMBUS */
#commentInputWrapper{
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 68px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 1px solid #e4e6eb !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px !important;
  z-index: 20 !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
  contain: layout style !important;
  transform: translateZ(0) !important;
}

/* Mention dropdown - terkurung di dalam modal */
#commentMentionDropdown{
  position: absolute !important;
  bottom: 75px !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 30 !important;
  background: #fff !important;
  border: 1px solid #e4e6eb !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
  isolation: isolate !important;
}

/* Reply preview - anti tembus */
#replyPreviewArea{
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Pastikan overlay tidak ikut scroll body */
body:has(#commentBottomSheetModal[style*="display: flex"]){
  overflow: hidden !important;
}

/* Mobile kecil - tetap proporsional */
@media (max-height: 700px){
  #commentBottomSheetModal .bottom-sheet-content{
    height: 92dvh !important;
    max-height: 92dvh !important;
  }
  #popupCommentsList{
    padding-bottom: 16px !important;
  }
}
@media (max-width: 600px){
  #commentBottomSheetModal .bottom-sheet-content{
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
  }
}
/* ===== FIX LIST TEMAN & USER SEARCH - ANTI TERPOTONG 100% ===== */
#searchUserModal{
  background: #fff !important;
}
#searchUserModal .modal-card.full-screen{
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#searchUserModal .modal-card.full-screen > div:first-child{
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #fff !important;
  padding: 12px 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
#fullSearchResultBox{
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)) 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Friend row - layout anti potong */
#fullSearchResultBox > div,
#friendsCategoryContainer > div,
#globalUsersContainer > div{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Override inline flex row dari createFriendRowCard */
#fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"],
#friendsCategoryContainer div[style*="display:flex; align-items:center; justify-content:space-between"],
#globalUsersContainer div[style*="display:flex; align-items:center; justify-content:space-between"]{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 68px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-bottom: 1px solid #f0f2f5 !important;
  background: #fff !important;
}

/* Kiri: avatar + nama - boleh mengecil */
#fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child,
#friendsCategoryContainer div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child,
#globalUsersContainer div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 90px) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Nama user - truncate jika panjang */
#fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child > div:last-child,
#friendsCategoryContainer div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child > div:last-child,
#globalUsersContainer div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child > div:last-child{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* Kanan: tombol - tidak boleh mengecil */
#fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"] > div:last-child,
#friendsCategoryContainer div[style*="display:flex; align-items:center; justify-content:space-between"] > div:last-child,
#globalUsersContainer div[style*="display:flex; align-items:center; justify-content:space-between"] > div:last-child{
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  max-width: 160px !important;
}

/* Tombol Tambah / Pesan / Hapus - compact biar tidak terpotong */
#fullSearchResultBox button,
#friendsCategoryContainer button,
#globalUsersContainer button{
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  min-width: fit-content !important;
  line-height: 1 !important;
}

/* Khusus yang 2 tombol Pesan + Hapus - lebih compact */
#friendsCategoryContainer div[style*="display:flex; gap:6px;"] button,
#globalUsersContainer div[style*="display:flex; gap:6px;"] button,
#fullSearchResultBox div[style*="display:flex; gap:6px;"] button{
  padding: 7px 10px !important;
  font-size: 12.5px !important;
}

/* Friends View utama */
#friendsView{
  background: #ffffff !important;
  min-height: 100dvh !important;
  padding-top: var(--nav-height) !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
#friendsView .friends-sub-tabs{
  position: sticky !important;
  top: var(--nav-height) !important;
  z-index: 10 !important;
  background: #ffffff !important;
  padding: 10px 12px !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  border-bottom: 1px solid #e4e6eb !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
#friendsView .friends-sub-tabs::-webkit-scrollbar{ display:none !important; }
#friendsCategoryContainer,
#globalUsersContainer{
  background: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: 10px !important;
  box-sizing: border-box !important;
}

/* Search input di friends view jika ada */
#friendsView input[type="text"],
#searchUserModal input[type="text"]{
  font-size: 16px !important; /* cegah zoom iOS */
}

/* Avatar di list - fixed size */
#fullSearchResultBox .profile-pic,
#friendsCategoryContainer .profile-pic,
#globalUsersContainer .profile-pic{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
}

/* Responsive kecil - 320px */
@media (max-width: 360px){
  #fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child,
  #friendsCategoryContainer div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child,
  #globalUsersContainer div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child{
    max-width: calc(100% - 80px) !important;
  }
  #fullSearchResultBox button,
  #friendsCategoryContainer button,
  #globalUsersContainer button{
    padding: 6px 9px !important;
    font-size: 12px !important;
  }
}
/* ===== FIX KHUSUS ICON SEARCH POJOK KANAN ATAS - ANTI TERPOTONG ===== */
#searchUserModal{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  background: #ffffff !important;
  z-index: 3000 !important;
  display: none;
  align-items: stretch !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#searchUserModal[style*="display: flex"],
#searchUserModal[style*="display:flex"]{
  display: flex !important;
}
#searchUserModal .modal-card.full-screen{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 600px !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}
/* Header search - fixed di atas */
#searchUserModal .modal-card.full-screen > div:first-child{
  flex: 0 0 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e4e6eb !important;
  position: relative !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}
#searchUserModal .modal-card.full-screen > div:first-child input#fullSearchInput{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 38px !important;
  background: #f0f2f5 !important;
  border-radius: 20px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* Result box - satu-satunya yang scroll */
#fullSearchResultBox{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  background: #ffffff !important;
  padding: 0 0 calc(20px + env(safe-area-inset-bottom, 12px)) 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}
#fullSearchResultBox::-webkit-scrollbar{ width:4px !important; }
#fullSearchResultBox::-webkit-scrollbar-thumb{ background:#ced0d4 !important; border-radius:4px !important; }

/* Setiap row hasil search - anti potong 100% */
#fullSearchResultBox > div{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f0f2f5 !important;
}

/* Override row flex dari JS */
#fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"]{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  min-height: 66px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #f0f2f5 !important;
}

/* Kiri */
#fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 88px) !important;
  overflow: hidden !important;
  gap: 10px !important;
}

/* Nama */
#fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"] > div:first-child > div:last-child{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Kanan tombol */
#fullSearchResultBox div[style*="display:flex; align-items:center; justify-content:space-between"] > div:last-child{
  flex: 0 0 auto !important;
  min-width: 80px !important;
  max-width: 110px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-left: 8px !important;
}

/* Tombol */
#fullSearchResultBox button{
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Avatar fixed */
#fullSearchResultBox .profile-pic{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  flex-shrink: 0 !important;
}

/* Empty state */
#fullSearchResultBox > div[style*="text-align:center"]{
  padding: 40px 20px !important;
  border: none !important;
}
/* PATCH PERMANEN: Sembunyikan header Reels agar tidak muncul lagi */
#reelsView > div[style*="position: absolute"][style*="top: 0"] { display:none !important; }
@keyframes slideUpNotif{from{transform:translateY(100%);} to{transform:translateY(0);}}
@keyframes pulseDotSearch{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.25); opacity:0.7; }
  100%{ transform:scale(1); opacity:1; }
}
#commentBottomSheetModal .bottom-sheet-content{
  height: calc(100dvh - var(--nav-height));
  max-height: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 20px 20px 0 0;
  background: #fff;
  overflow: hidden;
  /* Safe area untuk Pi Browser & iPhone */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#popupCommentsList{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 90px 16px !important; /* space extra buat input */
  position: relative;
}
#commentInputWrapper{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--lncommunity-light-gray);
  z-index: 10;
  /* FIX UTAMA: padding bottom extra buat nav bar Android + Pi Browser */
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px) + 20px) 16px !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
/* Di Pi Browser, keyboard muncul, viewport mengecil - input tetap di atas */
@supports (height: 100svh){
  #commentBottomSheetModal .bottom-sheet-content{
    height: calc(100svh - var(--nav-height));
  }
}
/* Untuk layar kecil Pi Browser */
@media (max-height: 700px){
  #commentInputWrapper{
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px) + 24px) 12px !important;
  }
  #popupCommentsList{
    padding-bottom: 100px !important;
  }
}
@keyframes slideUpShare{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* FB Real Look */
#newPostsBanner{position:sticky;top:56px;z-index:50;margin:12px auto;max-width:680px;background:#fff;border:1px solid #e4e6eb;box-shadow:0 4px 12px rgba(0,0,0,.1);border-radius:999px;padding:10px 16px;display:none;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:600;color:#0866ff;}
#newPostsBanner.show{display:flex;animation:slideDown .28s ease;}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.post-card{animation:fbIn .22s ease;}
@keyframes fbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.feed-skeleton{max-width:680px;margin:0 auto;padding:12px;}
.skel{height:14px;background:linear-gradient(90deg,#f0f2f5 25%,#e4e6eb 50%,#f0f2f5 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:8px;margin-bottom:10px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.infinite-loader{text-align:center;padding:24px;color:#65676b;font-weight:500;display:none;}
.infinite-loader.show{display:block;}
/* Toast untuk delete realtime */
.pusher-delete-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.9);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 12px;
  opacity: 0;
  transition: all 0.22s ease;
  pointer-events: none;
  z-index: 5;
}
.pusher-delete-flash.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
/* ===== Pi Browser - MODEL SAMA KAYAK GOOGLE, BEDA LOGO AJA ===== */
.auth-btn-pi.pi-browser-mode{
  background:#ffffff; color:#3c4043; border:1px solid #dadce0;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
  position:relative;
}
.auth-btn-pi.pi-browser-mode::before{ display:none; }
.pi-badge{
  background:#e7f3ff; color:#0866ff; font-size:10px; font-weight:800; padding:2px 6px;
  border-radius:20px; margin-left:6px; letter-spacing:0.3px; border:1px solid #c2d9ff;
.pi-hint{
  font-size:12px; color:var(--lncommunity-text-gray); text-align:center; margin:-4px 0 14px; line-height:1.4;
}
.pi-hint b{ color:#6A1B9A; }
:root{
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --kb: 0px;
  --nav-h: 0px;
  --input-h: 62px;
}

/* RESET CHAT BOX - SUPPORT SEMUA HP */
#globalChatBox{
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: 100svh !important;
  height: -webkit-fill-available !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  max-height: 100svh !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #ffffff !important;
  z-index: 9999 !important;
  contain: layout style paint !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}
#globalChatBox[style*="display: flex"],
#globalChatBox[style*="display:flex"],
#globalChatBox[style*="block"],
#globalChatBox.is-open{
  display: flex !important;
}

/* HEADER TETAP DI ATAS */
#globalChatBox .chat-header{
  flex: 0 0 auto !important;
  height: 60px !important;
  min-height: 60px !important;
  padding-top: max(8px, var(--sat)) !important;
  box-sizing: border-box !important;
  z-index: 20 !important;
}

/* PESAN AREA - FLEX 1, SCROLL */
#chatMessagesContainer{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 12px 8px calc(var(--input-h) + 16px) !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

/* INPUT AREA - KUNCI UTAMA ANTI KETUTUP */
#globalChatBox .chat-input-area{
  flex: 0 0 auto !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: var(--input-h) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 1px solid #e4e6eb !important;
  box-shadow: 0 -1px 8px rgba(0,0,0,0.06) !important;
  z-index: 50 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  /* PADDING BAWAH OTOMATIS: safe area + keyboard + extra buat nav bar android */
  padding: 10px 12px calc(10px + var(--sab) + var(--kb) + var(--nav-h) + 8px) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  transition: padding-bottom 0.2s ease !important;
}

/* Override inline style width:100vw penyebab ketutup */
#globalChatBox .chat-input-area[style]{
  width: 100% !important;
  max-width: 100% !important;
}

#globalChatBox .chat-input-wrapper{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#chatInputMessage{
  font-size: 16px !important; /* cegah zoom */
  line-height: 1.4 !important;
}

/* Saat keyboard terbuka, naikkan input */
html.keyboard-open #globalChatBox .chat-input-area{
  padding-bottom: calc(10px + var(--sab) + var(--kb) + 8px) !important;
}

/* ANDROID NAV BAR 3 TOMBOL - DETEKSI LEWAT CSS: tambah extra space di HP kecil */
@media (max-width: 768px){
  #globalChatBox .chat-input-area{
    /* minimal 20px extra buat nav bar gesture / 3 tombol */
    padding-bottom: calc(12px + var(--sab) + var(--kb) + var(--nav-h) + 14px) !important;
  }
  #chatMessagesContainer{
    padding-bottom: calc(var(--input-h) + var(--sab) + var(--nav-h) + 28px) !important;
  }
}

/* IPHONE X+ NOTCH & DYNAMIC ISLAND */
@supports (padding-bottom: env(safe-area-inset-bottom)){
  #globalChatBox .chat-input-area{
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--kb) + var(--nav-h) + 10px) !important;
  }
}

/* PI BROWSER KHUSUS - pakai -webkit-fill-available */
.pi-browser #globalChatBox{
  height: -webkit-fill-available !important;
  min-height: -webkit-fill-available !important;
}
.pi-browser #globalChatBox .chat-input-area{
  background: #ffffff !important;
  /* Pi Browser bottom bar sering 48px, kasih buffer */
  padding-bottom: calc(14px + var(--sab) + var(--kb) + var(--nav-h) + 16px) !important;
}

/* Hilangkan overlay palsu */
#globalChatBox::before,
#globalChatBox::after,
#chatMessagesContainer::before,
#chatMessagesContainer::after{
  display: none !important;
  content: none !important;
}

/* Pastikan body tidak scroll pas chat buka */
html.chat-open, body.chat-open{
  overflow: hidden !important;
  position: relative !important;
  height: 100% !important;
  height: -webkit-fill-available !important;
}
.post-name, .profile-pic, .profile-pic img, [data-profile-id] { cursor: pointer !important; }
.post-name:hover { text-decoration: underline !important; color: #0866ff !important; }
#userProfileModal { z-index: 10000 !important; }
@keyframes loginSuccessPop{
  0%{ transform: scale(0.85) translateY(20px); opacity:0; }
  100%{ transform: scale(1) translateY(0); opacity:1; }
}
@keyframes postSlideIn {
  from { opacity:0; transform: translateY(-16px) scale(0.98); }
  to { opacity:1; transform: translateY(0) scale(1); }
}
.post-card.new-post-anim{
  animation: postSlideIn 0.45s cubic-bezier(0.16,1,0.3,1) !important;
  will-change: transform, opacity;
}
@keyframes toastIn{
  from{ opacity:0; transform: translateX(-50%) translateY(-20px) scale(0.9); }
  to{ opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
}
#newPostsBanner{
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
#newPostsBanner.show{
  transform: translateX(-50%) translateY(0) !important;
}
.post-success-overlay{
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.post-success-overlay.show{
  display: flex !important;
  opacity: 1;
}
.post-success-card{
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.15);
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  text-align: center;
  position: relative;
}
.post-success-overlay.show .post-success-card{
  transform: translateY(0) scale(1);
}
.post-success-top{
  background: linear-gradient(135deg, #0866ff 0%, #075ce5 100%);
  padding: 20px 20px 36px;
  position: relative;
}
.post-success-check{
  width: 56px;
  height: 56px;
  background: #31a24c;
  border: 4px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: checkPop 0.5s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
@keyframes checkPop{
  0%{ transform: scale(0); }
  60%{ transform: scale(1.15); }
  100%{ transform: scale(1); }
}
.post-success-body{
  padding: 0 20px 16px;
  margin-top: -18px;
  position: relative;
  z-index: 2;
}
.post-success-avatar{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: #f0f2f5;
  margin: 0 auto 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-success-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-success-title{
  font-size: 19px;
  font-weight: 800;
  color: #050505;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.post-success-desc{
  font-size: 14px;
  color: #65676b;
  line-height: 1.5;
  margin: 0;
  padding: 0 4px;
}
.post-success-actions{
  display: flex;
  gap: 10px;
  padding: 16px 16px 16px;
  background: #f7f8fa;
  border-top: 1px solid #e4e6eb;
}
.post-success-btn{
  flex: 1;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}
.post-success-btn.primary{
  background: #0866ff;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(8,102,255,0.25);
}
.post-success-btn.primary:active{
  transform: scale(0.97);
  background: #075ce5;
}
.post-success-btn.secondary{
  background: #e4e6eb;
  color: #050505;
}
.post-success-btn.secondary:active{
  transform: scale(0.97);
  background: #d8dadf;
}
@media (max-width: 360px){
  .post-success-card{ max-width: 320px; }
}
/* Pastikan toast hitam tidak pernah terlihat */
#autoFeedToast,
.auto-feed-toast,
#newPostsBanner{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Efek halus untuk komentar & balasan - tanpa ubah realtime */
@keyframes commentSoftIn {
  0% { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(1px); }
  55% { opacity: 1; transform: translateY(-3px) scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes replySoftIn {
  0% { opacity: 0; transform: translateX(-10px) translateY(8px) scale(0.98); }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes replyContainerOpen {
  0% { opacity: 0; max-height: 0; transform: translateY(-6px); }
  100% { opacity: 1; max-height: 1000px; transform: translateY(0); }
}

.comment-smooth-enter{
  animation: commentSoftIn 0.48s cubic-bezier(0.16,1,0.3,1) both !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.reply-smooth-enter{
  animation: replySoftIn 0.40s cubic-bezier(0.16,1,0.3,1) both !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.replies-container-anim{
  animation: replyContainerOpen 0.35s cubic-bezier(0.16,1,0.3,1) both;
  overflow: hidden;
}

/* Haluskan scroll popup komentar */
#popupCommentsList{
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Beri transisi halus untuk semua comment box saat ada perubahan */
#popupCommentsList [id^="comment-box-"]{
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
#popupCommentsList [id^="comment-box-"]:hover{
  transform: translateY(-1px);
}
#homeView,
#friendsView,
#notifView,
#livestreamingView {
  padding-top: var(--nav-height) !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
  min-height: 100dvh !important;
  background: #ffffff !important;
}
#friendsView {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  overflow: visible !important;
  padding-top: var(--nav-height) !important;
  padding-bottom: 24px !important;
  background: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
#friendsView .friends-sub-tabs {
  position: sticky !important;
  top: var(--nav-height) !important;
  z-index: 990 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 12px 16px !important;
  gap: 10px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e4e6eb !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#friendsCategoryContainer,
#globalUsersContainer {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: #ffffff !important;
}
#reelsView {
  margin-top: var(--nav-height) !important;
  padding-top: 0 !important;
  height: calc(100dvh - var(--nav-height)) !important;
  min-height: calc(100dvh - var(--nav-height)) !important;
}
@media screen and (min-width: 601px) {
  #homeView,
  #friendsView,
  #notifView,
  #livestreamingView,
  #reelsView {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #friendsView {
    padding-top: var(--nav-height) !important;
  }
  #friendsView .friends-sub-tabs {
    top: var(--nav-height) !important;
    padding: 12px 16px !important;
  }
}
/* 1. Overlay full - cover sampai ke tombol HP */
#commentBottomSheetModal{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: 100svh !important;
  max-height: none !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 99999 !important;
  display: none;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}
#commentBottomSheetModal[style*="display: flex"],
#commentBottomSheetModal[style*="display:flex"],
#commentBottomSheetModal[style*="display: block"]{
  display: block !important;
}

/* 2. Content - POSITION ABSOLUTE BOTTOM 0 - KUNCI MENTOK */
#commentBottomSheetModal .bottom-sheet-content{
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 50vh !important;
  max-height: 92vh !important;
  max-height: 92dvh !important;
  max-height: 92svh !important;
  background: #ffffff !important;
  border-radius: 20px 20px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.25) !important;
  transform: none !important;
  animation: commentUpV7 0.32s cubic-bezier(0.16,1,0.3,1) !important;
}
@keyframes commentUpV7{
  from{ transform: translateY(100%); }
  to{ transform: translateY(0); }
}

/* 3. List */
#popupCommentsList{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: 16px !important;
  padding-bottom: 16px !important;
  background: #fff !important;
}

/* 4. INPUT WRAPPER - MENTOK TANPA CELAH, background putih sampai bawah */
#commentInputWrapper{
  position: relative !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-top: 1px solid #e4e6eb !important;
  z-index: 10 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* INI KUNCI: padding bawah mentok + safe area doang, tidak ada gap */
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)) 16px !important;
  box-shadow: none !important;
}
#popupCommentInput{
  font-size: 16px !important;
}

/* 5. Hilangkan semua pseudo yang bikin celah */
#commentBottomSheetModal .bottom-sheet-content::before,
#commentBottomSheetModal .bottom-sheet-content::after{
  display: none !important;
  content: none !important;
}

/* 6. Desktop tetap tengah tapi tetap mentok bawah */
@media (min-width: 769px){
  #commentBottomSheetModal .bottom-sheet-content{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 600px !important;
    min-width: 600px !important;
    width: 600px !important;
  }
  @keyframes commentUpV7{
    from{ transform: translateX(-50%) translateY(100%); }
    to{ transform: translateX(-50%) translateY(0); }
  }
}

/* 7. HP kecil - pastikan benar-benar mentok */
@media (max-width: 768px){
  #commentBottomSheetModal .bottom-sheet-content{
    border-radius: 16px 16px 0 0 !important;
    max-height: 94vh !important;
    max-height: 94dvh !important;
  }
  #commentInputWrapper{
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 10px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + 2px) !important;
  }
}
/* Matikan getar lama */
.comment-smooth-enter,
.reply-smooth-enter,
.replies-container-anim{
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* List stabil */
#popupCommentsList{
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
#popupCommentsList [id^="comment-box-"]{
  transition: none !important;
  transform: none !important;
}

/* Fade halus Facebook - cuma opacity + geser 4px, tanpa scale/blur */
@keyframes fbCommentFade{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.fb-comment-new{
  animation: fbCommentFade 0.24s ease-out both !important;
  will-change: opacity, transform;
}
.fb-reply-new{
  animation: fbCommentFade 0.22s ease-out both !important;
}
/* Global confirm tetap di atas */
#iosAlertOverlay{ z-index: 10000001 !important; }
#iosConfirmOverlay{ z-index: 10000002 !important; }
#iosPromptOverlay{ z-index: 10000003 !important; }

/* Modal komentar FULL sampai bawah - tanpa celah */
#commentBottomSheetModal{
  z-index: 99999 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(0,0,0,0.55) !important;
  display: none;
  overflow: hidden !important;
}
#commentBottomSheetModal[style*="display: flex"],
#commentBottomSheetModal[style*="display:flex"]{
  display: block !important;
}
#commentBottomSheetModal .bottom-sheet-content{
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  height: 92dvh !important;
  max-height: 92dvh !important;
  min-height: 92dvh !important;
  background: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#popupCommentsList{
  flex: 1 1 auto !important;
  min-height: 200px !important;
  overflow-y: auto !important;
  background: #fff !important;
  padding: 16px !important;
}
#commentInputWrapper{
  flex-shrink: 0 !important;
  margin-top: auto !important;
  background: #fff !important;
  border-top: 1px solid #e4e6eb !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px !important;
}
@media (min-width: 769px){
  #commentBottomSheetModal .bottom-sheet-content{
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px !important;
  }
}
/* Popup hapus di dalam modal */
#commentDeleteConfirmOverlay{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.58) !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 999 !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 16px !important;
}
#commentDeleteConfirmOverlay.show{ display: flex !important; }
#commentDeleteConfirmBox{
  width: 100% !important;
  max-width: 300px !important;
  background: #fff !important;
  border-radius: 16px !important;
  padding: 22px 18px 14px !important;
  text-align: center !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
  transform: scale(0.92) !important;
  opacity: 0 !important;
  transition: transform 0.24s cubic-bezier(0.16,1,0.3,1), opacity 0.2s !important;
}
#commentDeleteConfirmOverlay.show #commentDeleteConfirmBox{ transform: scale(1) !important; opacity: 1 !important; }
#cdcTitle{ font-weight:700; font-size:17px; color:#050505; margin-bottom:8px; }
#cdcMessage{ font-size:14px; color:#65676b; line-height:1.4; margin-bottom:18px; }
#cdcButtons{ display:flex; gap:10px; }
.cdc-btn{ flex:1; padding:11px 0; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; border:none; }
.cdc-btn-cancel{ background:#f0f2f5; color:#050505; }
.cdc-btn-delete{ background:#e41e3f; color:#fff; }

/* Pi Browser compat */
body.pi-modal-open, html.pi-modal-open{ overflow: hidden !important; }
.pi-browser #commentDeleteConfirmOverlay,
.pi-browser #iosConfirmOverlay{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* FIX BUG HAPUS KOMENTAR */

/* CRITICAL FIX - Hapus Komentar modal jangan muncul di bawah */
#commentDeleteConfirmOverlay{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,0.58) !important;
  display:none !important;
  justify-content:center !important;
  align-items:center !important;
  z-index:9999 !important;
  border-radius:20px 20px 0 0 !important;
  padding:16px !important;
}
#commentDeleteConfirmOverlay.show{ display:flex !important; }
#commentDeleteConfirmBox{
  width:100% !important; max-width:300px !important; background:#fff !important;
  border-radius:16px !important; padding:22px 18px 14px !important;
  text-align:center !important; box-shadow:0 12px 40px rgba(0,0,0,0.25) !important;
}
#cdcTitle{font-weight:700;font-size:17px;color:#050505;margin-bottom:8px}
#cdcMessage{font-size:14px;color:#65676b;line-height:1.4;margin-bottom:18px}
#cdcButtons{display:flex;gap:10px}
.cdc-btn{flex:1;padding:11px 0;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;border:none}
.cdc-btn-cancel{background:#f0f2f5;color:#050505}
.cdc-btn-delete{background:#e41e3f;color:#fff}

#commentDeleteConfirmOverlay.show #commentDeleteConfirmBox{transform:scale(1) !important;opacity:1 !important;}



/* === FIX TEMBUS BAWAH - FINAL V2 === */
#commentBottomSheetModal{
  z-index:99999 !important;
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  height:100vh !important; /* fallback */
  background:rgba(0,0,0,0.55) !important;
  display:none;
  overflow:hidden !important;
}
#commentBottomSheetModal[style*="display: flex"],
#commentBottomSheetModal[style*="display:flex"]{
  display:block !important;
}
#commentBottomSheetModal .bottom-sheet-content{
  position:absolute !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:600px !important;
  margin:0 auto !important;
  height:92dvh !important;
  max-height:92dvh !important;
  height:92vh !important; /* fallback Android */
  background:#fff !important;
  border-radius:20px 20px 0 0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  /* KUNCI: tutup celah bawah */
  padding-bottom:0 !important;
  box-shadow:0 -2px 20px rgba(0,0,0,0.1) !important;
}
#popupCommentsList{
  flex:1 1 auto !important;
  overflow-y:auto !important;
  background:#fff !important;
  padding:16px !important;
  -webkit-overflow-scrolling:touch !important;
}
#commentInputWrapper{
  flex-shrink:0 !important;
  position:relative !important;
  z-index:5 !important;
  background:#fff !important;
  border-top:1px solid #e4e6eb !important;
  margin:0 !important;
  padding:12px 16px max(12px, env(safe-area-inset-bottom, 0px)) 16px !important;
  /* pastikan putih solid sampai bawah */
  box-shadow:0 -1px 0 #fff, 0 10px 0 #fff !important;
}
/* Tambahan: buat area bawah input benar-benar putih solid */
#commentInputWrapper::after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-30px !important;
  height:40px !important;
  background:#fff !important;
  z-index:-1 !important;
  display:block !important;
}

/* Modal hapus tetap fix */
#commentDeleteConfirmOverlay{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,0.58) !important;
  display:none !important;
  justify-content:center !important;
  align-items:center !important;
  z-index:9999 !important;
  border-radius:20px 20px 0 0 !important;
}
#commentDeleteConfirmOverlay.show{ display:flex !important; }


/* FIX HAPUS EFEK BIRU SAAT KLIK */

/* === FIX HAPUS EFEK BIRU SAAT KLIK - TANPA UBAH FUNGSI === */
* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}
*:focus {
  outline: none !important;
  box-shadow: none !important;
}
a, button, div, span, img, svg {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
}
.btn-circle, .tab, .post-card, .story-card, .create-post-input, .auth-input-new, .auth-btn-pi, .auth-btn-google {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none;
  user-select: none;
}
.btn-circle:active, .tab:active, button:active {
  background-color: inherit !important;
  filter: brightness(0.97);
}
/* Untuk input tetap bisa select text */
input, textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}