/* =====================================================================
   SOCIAL LAYER — login, profil, chat
   Memakai variabel tema yang sudah ada (--accent, --surface, dst)
   sehingga otomatis ikut 5 tema aplikasi.
===================================================================== */

/* ---------- LOGIN ---------- */
#login-screen {
    position: fixed; inset: 0; z-index: 9990;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--splash-bg-grad);
    overflow-y: auto;
}
#login-screen.show { display: flex; animation: fadeIn .6s ease both; }
#login-screen.leaving { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.lg-wrap { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Bar equalizer versi "dijeda": tinggi statis, bergerak saat proses masuk */
.login-eq i { animation-play-state: paused; }
.login-eq.busy i { animation-play-state: running; }
.lg-title { font-size: 1.5rem; letter-spacing: .04em; margin-bottom: 8px; }
.lg-sub { font-size: .9rem; line-height: 1.5; color: var(--text-secondary); margin-bottom: 26px; max-width: 280px; }
.lg-note { font-size: .72rem; line-height: 1.5; color: var(--text-muted); margin-top: 16px; max-width: 280px; }
.lg-err { min-height: 18px; margin-top: 12px; font-size: .78rem; line-height: 1.4; color: #ff6b6b; max-width: 300px; }
.lg-step { width: 100%; display: flex; flex-direction: column; align-items: center; }
.g-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 14px 18px; border-radius: 999px;
    background: #ffffff; color: #1f1f1f; font-weight: 700; font-size: 15px;
    border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 28px rgba(0,0,0,.35);
    transition: transform .2s ease, opacity .2s ease;
}
.g-btn[disabled] { opacity: .65; pointer-events: none; }
.lg-primary {
    width: 100%; padding: 14px 18px; border-radius: 999px; font-weight: 800; font-size: 15px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent);
}
.lg-primary[disabled] { opacity: .45; pointer-events: none; }
.lg-link { margin-top: 14px; font-size: .78rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.lg-field { position: relative; width: 100%; }
.lg-field span.at { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 700; }
.sx-input {
    width: 100%; background: var(--surface); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 14px; padding: 13px 14px;
    font-size: 15px; outline: none; box-shadow: var(--nm-shadow-inset-sm);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.sx-input:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color)); box-shadow: var(--nm-shadow-inset); }
.sx-input::placeholder { color: var(--text-muted); }
.lg-field .sx-input { padding-left: 16px; text-align: left; }
.lg-hint { min-height: 18px; margin: 8px 0 16px; font-size: .76rem; line-height: 1.4; color: var(--text-muted); }
.lg-hint.ok { color: #4ade80; }
.lg-hint.bad { color: #ff6b6b; }

/* ---------- AVATAR & BADGE ---------- */
.pf-av {
    position: relative; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
    background: linear-gradient(135deg, var(--accent-3), var(--accent));
    color: var(--accent-contrast);
}
.pf-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.social-badge {
    position: absolute; top: -2px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: #ff4d5e; color: #fff; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-elevated);
    animation: sxPop .4s cubic-bezier(.34,1.56,.4,1) both;
}
.social-badge.hidden { display: none; }
@keyframes sxPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- PROFIL ---------- */
.pf-hero { position: relative; }
.pf-banner { position: relative; height: 132px; overflow: hidden; background: linear-gradient(135deg, var(--accent-3), var(--accent)); }
.pf-banner img { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) saturate(1.3); opacity: .75; }
.pf-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--bg-color) 100%); }
.pf-topbar { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); left: 14px; right: 14px; display: flex; justify-content: space-between; z-index: 2; }
.pf-topbar .grp { display: flex; gap: 8px; }
.pf-round {
    position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg-color) 62%, transparent); color: var(--text-primary);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--border-color);
}
.pf-row { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px; margin-top: -46px; position: relative; z-index: 2; }
.pf-row .pf-av { width: 96px; height: 96px; font-size: 40px; border: 4px solid var(--bg-color); box-shadow: var(--nm-shadow-flat); }
.pf-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-weight: 800; font-size: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent); margin-bottom: 6px;
}
.pf-pill.ghost { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: var(--nm-shadow-flat-sm); }
.pf-id { padding: 12px 16px 0; text-align: left; }
.pf-id h1 { font-size: 1.55rem; font-weight: 900; line-height: 1.15; word-break: break-all; }
.pf-status { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-muted); margin-top: 3px; }
.pf-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.pf-status.on { color: #4ade80; }
.pf-status.on .dot { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.pf-bio { margin-top: 10px; font-size: .92rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.pf-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: var(--surface); border: 1px solid var(--border-color); color: var(--text-primary); max-width: 100%;
}
.pf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.pf-chip svg { color: var(--accent); flex-shrink: 0; }
.pf-chip.bday { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.pf-sec { padding: 22px 16px 0; text-align: left; }
.pf-sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pf-sec-h h3 { font-size: 1rem; font-weight: 800; }
.pf-mini { font-size: .74rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-color); color: var(--accent); }
.pf-empty { padding: 18px 14px; border-radius: 16px; border: 1px dashed var(--border-color); font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
.pf-song { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; cursor: pointer; transition: background .25s ease; }
.pf-song:active { background: var(--surface); }
.pf-song img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface); }
.pf-song .t { font-size: .9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-song .a { font-size: .76rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-song .go { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-secondary); flex-shrink: 0; }
.pf-pls { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.pf-pl { flex: 0 0 120px; cursor: pointer; }
.pf-pl .cv { width: 120px; height: 120px; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.pf-pl .cv img { width: 100%; height: 100%; object-fit: cover; }
.pf-pl .n { margin-top: 7px; font-size: .84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pl .c { font-size: .72rem; color: var(--text-muted); }
.pf-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-gal .it { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer; }
.pf-gal .it img { width: 100%; height: 100%; object-fit: cover; }
.pf-gal .add { display: flex; align-items: center; justify-content: center; color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pf-modal { position: fixed; inset: 0; z-index: 150; overflow-y: auto; background: var(--bg-color); padding-bottom: 60px; animation: sxSlideIn .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes sxSlideIn { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Editor profil */
.pf-editor { position: fixed; inset: 0; z-index: 180; overflow-y: auto; background: var(--bg-color); animation: sxSlideIn .3s cubic-bezier(.22,1,.36,1) both; }
.ed-wrap { max-width: 480px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top, 0px)) 18px 40px; text-align: left; }
.ed-label { display: block; font-size: .76rem; font-weight: 800; margin: 18px 0 7px; color: var(--text-secondary); }
.ed-count { float: right; font-weight: 600; color: var(--text-muted); }

/* Sheet dari bawah + lightbox */
.sx-sheet-back { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.55); animation: fadeIn .2s ease both; }
.sx-sheet-back.out { opacity: 0; transition: opacity .2s ease; }
.sx-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 401; max-width: 480px; margin: 0 auto; max-height: 82vh; overflow-y: auto;
    border-radius: 26px 26px 0 0; background: var(--bg-elevated); border: 1px solid var(--border-color); border-bottom: none;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); text-align: left;
    animation: slideUp .35s cubic-bezier(.22,1,.36,1) both;
}
.sx-sheet.out { transform: translateY(100%); transition: transform .22s ease; }
.sx-grab { width: 40px; height: 4px; border-radius: 99px; background: var(--border-color); margin: 0 auto 14px; }
.sx-act { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); border-radius: 14px; text-align: left; }
.sx-act:active { background: var(--surface); }
.sx-act.danger { color: #ff6b6b; }
.sx-check { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: all .2s ease; margin-left: auto; }
.pf-song.on .sx-check, .sx-check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.sx-lightbox { position: fixed; inset: 0; z-index: 420; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; animation: fadeIn .2s ease both; }
.sx-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 12px; }
.sx-lightbox .bar { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); left: 14px; right: 14px; display: flex; justify-content: space-between; }

/* Baris hasil pencarian pengguna */
.sx-user-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background .25s ease; text-align: left; }
.sx-user-row:active, .sx-user-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sx-user-row .sx-un { font-weight: 800; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-user-row .sx-bio { font-size: .76rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-sec-label { padding: 10px 14px 4px; font-size: .72rem; font-weight: 800; color: var(--accent); }

/* ---------- CHAT ---------- */
#chat-inbox, #chat-room { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg-color); }
#chat-inbox { z-index: 165; animation: sxSlideIn .3s cubic-bezier(.22,1,.36,1) both; }
#chat-room { z-index: 170; animation: sxSlideIn .3s cubic-bezier(.22,1,.36,1) both; }
.chat-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    background: radial-gradient(ellipse 90% 50% at 50% -8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }
.chat-bg::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; opacity: .06;
    background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 15px);
    -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.chat-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-color); text-align: left; }
.chat-head .ttl { flex: 1; min-width: 0; cursor: pointer; }
.chat-head .ttl b { display: block; font-size: .98rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .ttl small { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-muted); min-height: 14px; }
.chat-head .ttl small.on { color: #4ade80; }
.chat-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-primary); flex-shrink: 0; }
.chat-icon-btn:active { background: var(--surface); }
#chat-msgs { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 14px 12px 8px; display: flex; flex-direction: column; overscroll-behavior: contain; }
#chat-msgs::-webkit-scrollbar { display: none; }
.cm-date { align-self: center; margin: 14px 0 8px; padding: 4px 12px; border-radius: 999px; font-size: .68rem; font-weight: 800; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-color); }
.cm-row { display: flex; flex-direction: column; margin-top: 3px; max-width: 100%; }
.cm-row.first { margin-top: 10px; }
.cm-row.me { align-items: flex-end; }
.cm-row.them { align-items: flex-start; }
.cm-wrap { position: relative; max-width: 82%; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cm-wrap.has-react { margin-bottom: 13px; }
.cm-wrap.armed .cm-bubble { filter: brightness(1.12); }
.cm-swipe-ic { position: absolute; left: -38px; top: 50%; transform: translateY(-50%) scale(.6); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--accent); opacity: 0; transition: opacity .15s ease, transform .2s ease; }
.cm-wrap.armed .cm-swipe-ic { opacity: 1; transform: translateY(-50%) scale(1); }
.cm-wrap.flash .cm-bubble { animation: cmFlash 1.1s ease; }
@keyframes cmFlash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); } }
.cm-bubble { position: relative; padding: 9px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.42; word-break: break-word; white-space: pre-wrap; text-align: left; animation: cmIn .32s cubic-bezier(.22,1,.36,1) both; }
.cm-row.me .cm-bubble { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); transform-origin: bottom right; }
.cm-row.them .cm-bubble { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-color); transform-origin: bottom left; }
.cm-row.me.last .cm-bubble { border-bottom-right-radius: 6px; }
.cm-row.them.last .cm-bubble { border-bottom-left-radius: 6px; }
@keyframes cmIn { from { opacity: 0; transform: scale(.88) translateY(8px); } to { opacity: 1; transform: none; } }
.cm-bubble.cm-del { font-style: italic; opacity: .6; background: transparent !important; border: 1px dashed var(--border-color) !important; color: var(--text-muted) !important; }
.cm-bubble.jumbo { font-size: 40px; line-height: 1.15; padding: 2px 4px; background: none !important; border: none !important; }
.cm-quote { margin-bottom: 6px; padding: 6px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; cursor: pointer; border-left: 3px solid; background: rgba(0,0,0,.16); overflow: hidden; }
.cm-row.me .cm-quote { border-color: var(--accent-contrast); }
.cm-row.them .cm-quote { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cm-quote b { display: block; font-size: 11.5px; margin-bottom: 1px; }
.cm-quote span { display: block; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-react { position: absolute; bottom: -13px; display: flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 13px; line-height: 20px;
    background: var(--bg-elevated); border: 1px solid var(--border-color); box-shadow: var(--nm-shadow-flat-sm); animation: sxPop .35s cubic-bezier(.34,1.56,.4,1) both; }
.cm-react small { font-size: 11px; font-weight: 800; color: var(--text-secondary); }
.cm-row.me .cm-react { right: 10px; }
.cm-row.them .cm-react { left: 10px; }
.cm-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: .66rem; color: var(--text-muted); }
.cm-meta svg { width: 14px; height: 14px; }
.cm-meta .seen { color: var(--accent); }
.cm-song { display: flex; align-items: center; gap: 11px; min-width: 210px; cursor: pointer; }
.cm-disc { position: relative; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.2); background: var(--surface); }
.cm-disc img { width: 100%; height: 100%; object-fit: cover; }
.cm-disc::after { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-color); box-shadow: 0 0 0 2px rgba(255,255,255,.28); }
.cm-disc.spin img { animation: spinRecord 6s linear infinite; }
.cm-song .tx { min-width: 0; flex: 1; }
.cm-song .tx b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-song .tx span { display: block; font-size: 11.5px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-song .pl { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.2); flex-shrink: 0; }
.typing-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.typing-eq i { display: block; width: 3px; border-radius: 2px; background: var(--accent); animation: sxTy .7s ease-in-out infinite; }
.typing-eq i:nth-child(2) { animation-delay: .15s; }
.typing-eq i:nth-child(3) { animation-delay: .3s; }
.typing-eq i:nth-child(4) { animation-delay: .45s; }
@keyframes sxTy { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.cm-typing .cm-bubble { padding: 12px 16px; }
.cm-typing .typing-eq { height: 14px; }
.chat-replybar { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--bg-elevated); border-top: 1px solid var(--border-color); text-align: left; animation: slideUp .25s ease both; }
.chat-replybar .bar { width: 3px; align-self: stretch; border-radius: 3px; background: var(--accent); }
.chat-replybar .tx { flex: 1; min-width: 0; }
.chat-replybar b { display: block; font-size: .74rem; color: var(--accent); }
.chat-replybar span { display: block; font-size: .8rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--border-color); }
.chat-input { flex: 1; resize: none; max-height: 120px; min-height: 44px; border-radius: 22px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border-color);
    color: var(--text-primary); font-size: 15px; line-height: 1.3; outline: none; box-shadow: var(--nm-shadow-inset-sm); }
.chat-input::placeholder { color: var(--text-muted); }
.chat-side-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface); color: var(--accent); border: 1px solid var(--border-color); }
.chat-send { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
    transition: transform .25s cubic-bezier(.34,1.56,.4,1), opacity .2s ease; }
.chat-send.idle { opacity: .45; box-shadow: none; transform: scale(.92); }
.cr-empty { margin: auto; text-align: center; padding: 30px; color: var(--text-muted); font-size: .84rem; line-height: 1.6; max-width: 260px; }

/* Sheet reaksi */
.sx-prev { margin: 0 4px 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); font-size: .85rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-react-row { display: flex; justify-content: space-between; padding: 4px 2px 12px; }
.sx-react-btn { width: 48px; height: 48px; border-radius: 50%; font-size: 27px; display: flex; align-items: center; justify-content: center; background: var(--surface);
    animation: sxPop .4s cubic-bezier(.34,1.56,.4,1) both; transition: transform .2s cubic-bezier(.34,1.56,.4,1); }
.sx-react-btn:active { transform: scale(1.35); }
.sx-react-btn.on { background: color-mix(in srgb, var(--accent) 26%, var(--surface)); box-shadow: 0 0 0 2px var(--accent); }

/* Inbox */
.ib-list { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 8px 10px 30px; }
.ib-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; cursor: pointer; text-align: left; transition: background .25s ease; }
.ib-item:active { background: var(--surface); }
.ib-item .nm { font-weight: 800; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-item .lm { font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-item.unread .lm { color: var(--text-primary); font-weight: 700; }
.ib-item .tm { font-size: .68rem; color: var(--text-muted); }
.ib-item .ub { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .cm-bubble, .sx-react-btn, .social-badge, .cm-react { animation: none !important; }
    .typing-eq i { animation-duration: 1.6s; }
}

#nav-me-badge { top: -5px; right: -6px; }

/* Centang biru verified */
.vbadge { display: inline-flex; vertical-align: -0.14em; margin-left: .25em; flex-shrink: 0; }
.vbadge { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vb-tip { position: fixed; z-index: 100000; padding: 5px 11px; border-radius: 999px; background: #1d9bf0; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: none; animation: vbTipIn .16s ease-out; }
@keyframes vbTipIn { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
.vbadge svg { display: block; filter: drop-shadow(0 1px 2px rgba(29,155,240,.45)); }
.sx-un, .ib-item .nm, .chat-head .ttl b { display: flex; align-items: center; min-width: 0; }
.sx-un .nm-t, .ib-item .nm .nm-t, .chat-head .ttl b .nm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }


/* =====================================================================
   LIRIK DI DALAM COVER (full player)
   Warna mengikuti tema: --accent / --accent-2 / --accent-contrast
===================================================================== */
#full-cover { transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease; }
#full-lyrics-panel {
    opacity: 0; transform: scale(.94); pointer-events: none;
    transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
        linear-gradient(165deg, color-mix(in srgb, var(--accent) 12%, #0d0e15), #0d0e15 75%);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    box-shadow: 0 0 42px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 0 1px rgba(255,255,255,.03);
}
#full-player.lyrics-on #full-cover { opacity: 0; transform: scale(.9) rotate(-2deg); filter: blur(6px); pointer-events: none; }
#full-player.lyrics-on #full-cover-overlay { display: none; }
#full-player.lyrics-on #full-lyrics-panel { opacity: 1; transform: none; pointer-events: auto; }

#lyrics-scroll-container {
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.lyric-pad { padding: 46% 0 54%; }
.lyric-line {
    text-align: center; font-weight: 800; font-size: 1.18rem; line-height: 1.32; letter-spacing: -.01em;
    padding: 7px 2px; cursor: pointer; word-break: break-word;
    color: var(--accent-2); opacity: .38; transform: scale(.94); transform-origin: center;
    transition: opacity .35s cubic-bezier(.25,1,.5,1), transform .35s cubic-bezier(.25,1,.5,1), color .35s ease;
    will-change: opacity, transform;
}
.lyric-line.active-lyric {
    opacity: 1; color: var(--accent); transform: scale(1.07);
    text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
}
.lyric-line.past-lyric { opacity: .2; }
.lyric-line.lyric-plain { opacity: .88; transform: none; cursor: default; padding: 6px 2px; font-size: 1.02rem; }
.lyric-end { text-align: center; margin-top: 28px; font-size: .7rem; letter-spacing: .25em; color: var(--accent-2); opacity: .35; }
.fp-spin { border: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-top-color: var(--accent); }
.fp-empty { color: var(--accent-2); opacity: .75; }

.fp-sync {
    position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 4px;
    padding: 3px; border-radius: 999px; background: rgba(13,14,21,.72);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.fp-sync button { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.fp-sync button:active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.fp-sync span { min-width: 20px; padding: 0 3px; text-align: center; font-size: 11px; font-weight: 800; color: var(--accent-2); }
.fp-sync span.hidden { display: none; }

/* Tombol lirik di full player */
.fp-lyric-btn { transition: transform .2s ease, background .3s ease, color .3s ease, box-shadow .3s ease; }
.fp-lyric-btn.on {
    background: var(--accent) !important; color: var(--accent-contrast) !important; border-color: transparent !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    #full-cover, #full-lyrics-panel, .lyric-line { transition: none; }
}

/* =====================================================================
   BERANDA & MINI PLAYER — memakai warna tema
===================================================================== */
.home-bar { background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
.home-chip-on { background: var(--accent) !important; color: var(--accent-contrast) !important; border: 1px solid transparent !important; box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 38%, transparent); }
.home-greet-sub { color: var(--accent-2); }
.home-link { color: var(--accent); }
.home-av { border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)); display: inline-flex; }
.home-av > * { border: 2px solid var(--bg-color); border-radius: 50%; }
.home-av .pf-av { border: 2px solid var(--bg-color); }
.home-dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; border: 2px solid var(--bg-color); }
.home-dot.hidden { display: none; }
.home-recent-on { box-shadow: 0 0 0 2px var(--accent), 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.home-recent-play {
    position: absolute; right: 7px; bottom: 7px; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--accent-contrast);
    box-shadow: 0 4px 12px rgba(0,0,0,.4); opacity: 0; transform: translateY(6px) scale(.9);
    transition: opacity .25s ease, transform .25s ease;
}
.home-recent-card:hover .home-recent-play, .home-recent-card:active .home-recent-play { opacity: 1; transform: none; }
@media (hover: none) { .home-recent-play { opacity: 1; transform: none; } }

#mini-player-inner.mini-inner { border-color: color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.1)); box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); }
#mini-artist.mini-lyric { color: var(--accent-2) !important; font-weight: 700; }
#mini-play-btn { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; color: var(--accent); }

/* =====================================================================
   LIBRARY — aksen mengikuti tema (menggantikan rose/amber/biru tetap)
===================================================================== */
.lib-sub { margin-top: 2px; font-size: .78rem; font-weight: 600; color: var(--accent-2); }
.lib-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent-3) 14%, transparent) 70%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.08)); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 14%, transparent); }
.lib-hero-ic { background: linear-gradient(135deg, var(--accent), var(--accent-3)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); }
.lib-row-on { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.lib-view .text-rose-400, .lib-view .text-rose-500, .lib-view .text-amber-400, .lib-view .text-blue-400 { color: var(--accent); }
.lib-view .bg-rose-400 { background-color: var(--accent); }
.lib-view .fill-rose-500 { fill: var(--accent); }
.lib-view .border-amber-400 { border-color: var(--accent); }
.lib-view .bg-rose-500\/10, .lib-view .bg-amber-500\/10 { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.lib-view .border-rose-500\/20, .lib-view .border-amber-500\/20 { border-color: color-mix(in srgb, var(--accent) 28%, transparent); }

/* =====================================================================
   FOLLOW & STATISTIK PROFIL
===================================================================== */
.pf-acts { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pf-acts .pf-pill { margin-bottom: 0; padding: 10px 16px; }
.pf-pill[disabled] { opacity: .55; pointer-events: none; }
.pf-stats { display: flex; gap: 22px; margin-top: 12px; }
.pf-stats button { display: flex; align-items: baseline; gap: 6px; text-align: left; color: var(--text-secondary); font-size: .8rem; }
.pf-stats b { font-size: 1.05rem; font-weight: 900; color: var(--text-primary); }
.pf-stats button:active span { color: var(--accent); }
.pf-fy { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; background: var(--surface); border: 1px solid var(--border-color); color: var(--text-secondary); vertical-align: 1px; }
.pf-fy.hidden { display: none; }

/* =====================================================================
   NOTIFIKASI, INFO, PENCARIAN & PLAYLIST
===================================================================== */
.nf-banner {
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px; z-index: 450;
    max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
    border-radius: 20px; text-align: left;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-color));
    box-shadow: 0 14px 38px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 16%, transparent);
    animation: nfIn .45s cubic-bezier(.22,1,.36,1) both;
}
.nf-banner.out { opacity: 0; transform: translateY(-120%); transition: opacity .25s ease, transform .25s ease; }
@keyframes nfIn { from { opacity: 0; transform: translateY(-120%) scale(.96); } to { opacity: 1; transform: none; } }
.nf-banner .tx { min-width: 0; flex: 1; }
.nf-banner .tx b { display: flex; align-items: center; font-size: .9rem; font-weight: 800; }
.nf-banner .tx span { display: block; font-size: .8rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-banner .x { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }

.hist-chip { display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-color); overflow: hidden; max-width: 100%; }
.hist-chip button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: .8rem; font-weight: 600; color: var(--text-primary); min-width: 0; }
.hist-chip button:first-child { padding-right: 4px; }
.hist-chip button:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.hist-chip button:last-child { color: var(--text-muted); padding-left: 4px; padding-right: 10px; }
.hist-chip svg { color: var(--accent); flex-shrink: 0; }
.hist-chip button:last-child svg { color: var(--text-muted); }

.empty-ic { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }

.info-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: 999px; font-size: .84rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); }
.info-btn-ghost { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-color); }
.info-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-color); }
.info-stat svg { color: var(--accent); }
.info-stat b { font-size: 1.1rem; font-weight: 900; }
.info-stat span { font-size: .64rem; color: var(--text-muted); font-weight: 700; }
.info-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.pl-share-btn { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-color); }
.pl-share-btn.on { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
#library-modal .text-rose-400, #library-modal .text-amber-400 { color: var(--accent); }
#library-modal .bg-rose-400 { background-color: var(--accent); }
#library-modal .border-amber-400 { border-color: var(--accent); }

/* =====================================================================
   CHAT: HUB GLOBAL / PRIVATE
===================================================================== */
.hub-wrap { padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 24px; text-align: left; }
.hub-title { font-size: 1.8rem; font-weight: 900; letter-spacing: -.02em; }
.hub-seg { display: flex; gap: 6px; margin: 14px 0 16px; padding: 4px; border-radius: 999px; background: var(--surface-card, var(--surface)); border: 1px solid var(--border-color); }
.hub-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border-radius: 999px; font-size: .86rem; font-weight: 800; color: var(--text-secondary); transition: background .25s ease, color .25s ease; }
.hub-seg button.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); box-shadow: 0 6px 16px rgba(var(--accent-rgb), .3); }
.hub-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff4d5e; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.hub-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: 22px; text-align: left; background: var(--surface-card, var(--surface)); border: 1px solid rgba(var(--accent-rgb), .3); box-shadow: 0 10px 28px rgba(var(--accent-rgb), .12); transition: transform .22s ease; }
.hub-card:active { transform: scale(.98); }
.hub-card b { display: block; font-size: 1.05rem; font-weight: 900; }
.hub-card small { display: block; margin-top: 3px; font-size: .76rem; line-height: 1.4; color: var(--text-secondary); }
.hub-go { color: var(--accent); flex-shrink: 0; }
.hub-globe { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent-3, var(--accent))); color: var(--accent-contrast); }
.hub-globe.big { width: 56px; height: 56px; border-radius: 18px; }
.hub-note { margin-top: 12px; font-size: .72rem; line-height: 1.5; color: var(--text-muted); }
.cm-name { margin: 0 0 2px 10px; font-size: .68rem; font-weight: 800; color: var(--accent-2); display: flex; align-items: center; }

/* ===== Bagikan potongan lirik ===== */
.cm-lyric .ly-lines { border-left: 3px solid var(--accent, #f4c84e); padding-left: 10px; margin: 2px 0 10px; }
.cm-lyric .ly-lines p { margin: 0 0 4px; font-weight: 700; font-style: italic; line-height: 1.38; }
.cm-lyric .cm-song { min-width: 0; }
.ly-pick { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.6); }
.ly-sheet { width: 100%; max-width: 520px; max-height: 82vh; max-height: 82dvh; display: flex; flex-direction: column; background: #161618; border: 1px solid rgba(255,255,255,.08); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0,0,0,.5); animation: fpSheetSlide .3s cubic-bezier(.22,1,.36,1) forwards; }
.ly-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ly-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #fff; }
.ly-head p { margin: 2px 0 0; font-size: 12px; color: rgba(255,255,255,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw; }
.ly-x { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ly-hint { margin: 10px 0 8px; font-size: 12px; color: rgba(255,255,255,.5); }
.ly-list { flex: 1; min-height: 120px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.ly-row { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; color: rgba(255,255,255,.5); font-size: 15px; font-weight: 600; line-height: 1.35; transition: background .15s, color .15s; }
.ly-row.sel { background: rgba(255,255,255,.12); color: #fff; }
.ly-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.ly-foot span { font-size: 12.5px; color: rgba(255,255,255,.6); font-weight: 600; }
.ly-send { background: var(--accent, #f4c84e); color: #19210b; font-weight: 800; font-size: 14px; padding: 11px 26px; border-radius: 999px; }