* { box-sizing: border-box; margin: 0; padding: 0; } /* ===== Tema (3 pilihan via data-theme di ) ===== */ :root, :root[data-theme="light"] { /* Terang — WhatsApp klasik */ --green: #00a884; --green-dark: #008069; --bg: #eae6df; --panel: #ffffff; --panel-2: #f0f2f5; --border: #d1d7db; --divider: #f0f2f5; --text: #111b21; --muted: #667781; --bubble-me: #d9fdd3; --bubble-other: #ffffff; --input: #ffffff; --hover: #e9edef; --active: #f0f2f5; --pinned: #f6faf9; --pill: rgba(0,0,0,.05); --datesep: rgba(255,255,255,.92); --overlay: rgba(234,230,223,.6); --skel1: #eceff1; --skel2: #f5f7f8; --amber: #f0ad4e; --red: #e0524d; --blue: #2f80ed; /* gaya bubble (default WhatsApp klasik) */ --bubble-radius: 8px; --bubble-tail: 8px; --bubble-pad: 7px 10px 5px; --bubble-shadow: 0 1px 1px rgba(0,0,0,.06); --bubble-border: none; } :root[data-theme="dark"] { /* Gelap — dark mode teal */ --green: #00a884; --green-dark: #21c7a8; --bg: #0b141a; --panel: #111b21; --panel-2: #202c33; --border: #2a3942; --divider: #1f2a31; --text: #e9edef; --muted: #8696a0; --bubble-me: #005c4b; --bubble-other: #202c33; --input: #2a3942; --hover: #2a3942; --active: #2a3942; --pinned: #15212a; --pill: rgba(255,255,255,.08); --datesep: #1d282f; --overlay: rgba(11,20,26,.6); --skel1: #1b262c; --skel2: #243039; --amber: #f0ad4e; --red: #f15c57; --blue: #53bdeb; /* gaya bubble: modern membulat + sudut ekor asimetris */ --bubble-radius: 14px; --bubble-tail: 4px; --bubble-pad: 8px 12px 6px; --bubble-shadow: 0 1px 2px rgba(0,0,0,.35); --bubble-border: none; } :root[data-theme="senja"] { /* Senja — dark hangat (sunset) */ --green: #f0900c; --green-dark: #f6a93b; --bg: #1b1620; --panel: #241d2b; --panel-2: #2e2536; --border: #3c3245; --divider: #2a2230; --text: #f3ece4; --muted: #aa9cb2; --bubble-me: #4a3a26; --bubble-other: #2e2536; --input: #352b3e; --hover: #352b3e; --active: #3a2f44; --pinned: #2a2030; --pill: rgba(255,255,255,.07); --datesep: #2a2230; --overlay: rgba(27,22,32,.62); --skel1: #2a2230; --skel2: #352b3e; --amber: #f0ad4e; --red: #f15c57; --blue: #c79bff; /* gaya bubble: pillowy super bulat + shadow lembut */ --bubble-radius: 18px; --bubble-tail: 18px; --bubble-pad: 9px 14px 7px; --bubble-shadow: 0 2px 7px rgba(0,0,0,.3); --bubble-border: none; } :root[data-theme="bbm"] { /* BBM — versi TERANG, aksen #087099 */ --green: #087099; --green-dark: #086a8f; --bg: #eef3f5; --panel: #ffffff; --panel-2: #f2f5f6; --border: #d2d9dc; --divider: #eceff1; --text: #111b21; --muted: #667781; --bubble-me: #3689AA; --bubble-other: #D8D8D8; --input: #ffffff; --hover: #e9eef0; --active: #eef3f5; --pinned: #eef6fa; --pill: rgba(0,0,0,.06); --datesep: rgba(255,255,255,.92); --overlay: rgba(238,243,245,.6); --skel1: #e3e8ea; --skel2: #eef2f3; --amber: #f0ad4e; --red: #e0524d; --blue: #2f80ed; /* gaya bubble: kotak klasik BBM, flat + garis tepi */ --bubble-radius: 3px; --bubble-tail: 3px; --bubble-pad: 6px 10px 5px; --bubble-shadow: none; --bubble-border: 1px solid var(--border); } /* BBM: bubble lawan terang (#D8D8D8) → teks & elemen di dalamnya dibuat gelap biar terbaca */ :root[data-theme="bbm"] .bubble.other { color: #15171a; } :root[data-theme="bbm"] .bubble.other .meta { color: #5b6a73; } :root[data-theme="bbm"] .bubble.other .sender, :root[data-theme="bbm"] .bubble.other .body a, :root[data-theme="bbm"] .bubble.other .quoted .q-sender { color: #1f6f95; } :root[data-theme="bbm"] .bubble.other .quoted .q-text { color: #4a575f; } /* BBM terang: bubble-ku biru (#3689AA) → teks putih biar kebaca */ :root[data-theme="bbm"] .bubble.me { color: #fff; } :root[data-theme="bbm"] .bubble.me .meta { color: rgba(255,255,255,.82); } :root[data-theme="bbm"] .bubble.me .body a { color: #d6f0fb; } /* BBM: blok kutipan di bubble-ku (biru) → latar lebih gelap + teks terang biar terbaca */ :root[data-theme="bbm"] .bubble.me .quoted { background: rgba(0,0,0,.22); } :root[data-theme="bbm"] .bubble.me .quoted .q-sender { color: #cfe8f3; } :root[data-theme="bbm"] .bubble.me .quoted .q-text { color: #eaf4f9; } /* BBM: header (sidebar & percakapan) pakai aksen #087099, teksnya dibuat putih */ :root[data-theme="bbm"] .sidebar-head, :root[data-theme="bbm"] .conv-head { background: #087099; } :root[data-theme="bbm"] .sidebar-head .me, :root[data-theme="bbm"] .conv-title, :root[data-theme="bbm"] .back-btn, :root[data-theme="bbm"] .stats-line { color: #fff; } /* BBM: bar compose (footer kolom ketik) juga #087099; tombol kirim dibedakan (putih) */ :root[data-theme="bbm"] .compose { background: #087099; } :root[data-theme="bbm"] .send-btn { background: #fff; color: #087099; } :root[data-theme="bbm"] .send-btn:hover { background: #e8f3f8; } :root[data-theme="bbm"] .send-btn .btn-spin { border-color: rgba(8,112,153,.3); border-top-color: #087099; } html, body { height: 100%; overflow: hidden; } body { /* stack font ala WhatsApp Web (iOS→Helvetica Neue, Windows→Segoe UI, Android→Roboto) */ font-family: "Segoe UI", "Helvetica Neue", Helvetica, Roboto, "Lucida Grande", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: var(--panel-2); color: var(--text); } .hidden { display: none !important; } /* ---------- login ---------- */ .login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--green-dark); } .login-box { background: var(--panel); padding: 36px 32px; border-radius: 12px; width: 320px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.2); } .login-box h1 { color: var(--green-dark); margin-bottom: 6px; } .login-box p { color: var(--muted); margin-bottom: 18px; font-size: 14px; } .login-box input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; margin-bottom: 12px; background: var(--input); color: var(--text); } .login-box button { width: 100%; padding: 11px; background: var(--green); color: #fff; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .login-box button:hover { background: var(--green-dark); } .login-box button:disabled { opacity: .7; cursor: default; } .login-err { color: #c0392b; font-size: 13px; margin-top: 10px; min-height: 16px; } /* ---------- spinners ---------- */ .spinner { width: 26px; height: 26px; border: 3px solid rgba(0,168,132,.25); border-top-color: var(--green); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } .spinner.sm { width: 14px; height: 14px; border-width: 2px; } .btn-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- qr overlay ---------- */ .qr-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); } .qr-box { background: var(--panel); padding: 30px; border-radius: 12px; text-align: center; max-width: 360px; } .qr-box h2 { color: var(--green-dark); margin-bottom: 8px; } .qr-box p { color: var(--muted); font-size: 13px; margin-bottom: 16px; } .qr-frame { width: 260px; height: 260px; margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--panel-2); } .qr-box img { width: 260px; height: 260px; } .qr-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; } /* ---------- app layout ---------- */ .app { display: flex; height: 100vh; height: 100dvh; position: relative; overflow: hidden; } .sidebar { flex: 0 0 460px; width: 460px; /* lebar tetap, tidak ikut berubah */ min-width: 0; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .sidebar-head { position: relative; background: var(--panel-2); padding: 10px 14px; } .head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .head-row .me { flex: 1; min-width: 0; } /* tombol ikon (tema) */ .icon-btn { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%; background: transparent; font-size: 16px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; } .icon-btn:hover { background: var(--hover); } /* popover pemilih tema */ .theme-popover { position: absolute; top: 46px; right: 12px; z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 12px 14px; } /* popover "chat baru" */ .newchat-popover { position: absolute; top: 46px; left: 12px; right: 12px; z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 12px 14px; } .newchat-popover input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--input); color: var(--text); font-size: 14px; outline: none; margin-top: 8px; margin-bottom: 8px; } .newchat-popover #newChatGo { width: 100%; padding: 9px; border: none; border-radius: 8px; background: var(--green); color: #fff; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .newchat-popover #newChatGo:hover { background: var(--green-dark); } .nc-err { color: var(--red); font-size: 12.5px; margin-top: 8px; min-height: 14px; } .nc-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1; } .nc-close:hover { filter: brightness(.9); } .newchat-popover .theme-title { padding-right: 28px; } .theme-title { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 10px; } .theme-opts { display: flex; gap: 8px; flex-wrap: wrap; } .theme-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 60px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; transition: border-color .12s, color .12s; } .theme-opt:hover { border-color: var(--green); } .theme-opt.active { border-color: var(--green); color: var(--text); } .theme-prev { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); position: relative; overflow: hidden; } /* pratinjau tiap tema: separuh latar + lingkaran aksen */ .theme-prev[data-t="light"] { background: #eae6df; } .theme-prev[data-t="dark"] { background: #0b141a; } .theme-prev[data-t="senja"] { background: #1b1620; } .theme-prev[data-t="bbm"] { background: #eef3f5; } .theme-prev::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; } .theme-prev[data-t="light"]::after { background: #00a884; } .theme-prev[data-t="dark"]::after { background: #00a884; } .theme-prev[data-t="senja"]::after { background: #f0900c; } .theme-prev[data-t="bbm"]::after { background: #087099; } .accent-title { margin-top: 14px; } .accent-swatches { display: flex; gap: 9px; flex-wrap: wrap; } .swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0; border: 1px solid rgba(0,0,0,.15); transition: transform .1s; } .swatch:hover { transform: scale(1.12); } .swatch.active { outline: 2px solid var(--text); outline-offset: 2px; } .accent-default { background: var(--green); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .sidebar-head .me { font-weight: 600; color: var(--green-dark); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-head .me { font-weight: 600; color: var(--green-dark); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* status pill */ .status-pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .status-pill .dot { width: 8px; height: 8px; border-radius: 50%; } .status-pill.connected { background: rgba(0,168,132,.14); color: var(--green-dark); } .status-pill.connected .dot { background: var(--green); } .status-pill.connecting { background: rgba(240,173,78,.16); color: #9c6a13; } .status-pill.connecting .dot { background: var(--amber); animation: pulse 1.1s ease-in-out infinite; } .status-pill.syncing { background: rgba(47,128,237,.14); color: #1c63c9; } .status-pill.syncing .dot { background: var(--blue); animation: pulse 1.1s ease-in-out infinite; } .status-pill.offline { background: rgba(224,82,77,.14); color: #b53a36; } .status-pill.offline .dot { background: var(--red); } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } .stats-line { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .stats-line.bump { animation: bump .4s ease; } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.06); color: var(--green-dark); } 100% { transform: scale(1); } } .search { width: 100%; padding: 8px 12px; border: none; border-radius: 8px; background: var(--input); color: var(--text); font-size: 14px; outline: none; } /* filter tab grup/pribadi */ .chat-filters { display: flex; gap: 6px; margin-top: 8px; } .filter-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border: none; border-radius: 16px; cursor: pointer; background: var(--input); color: var(--muted); font-size: 13px; font-weight: 600; transition: background .12s, color .12s; } .filter-tab:hover { background: var(--hover); } .filter-tab.active { background: var(--green); color: #fff; } .filter-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; line-height: 16px; font-size: 11px; font-weight: 700; background: var(--pill); color: inherit; } .filter-tab.active .filter-count { background: rgba(255,255,255,.3); } /* sync banner */ .sync-banner { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(47,128,237,.08); color: #1c63c9; font-size: 12.5px; font-weight: 500; border-bottom: 1px solid var(--border); animation: slidedown .25s ease; } @keyframes slidedown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* chat list */ .chat-list { flex: 1; overflow-y: auto; } .chat-item { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--divider); cursor: pointer; animation: fadein .2s ease; } .chat-item .chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } /* avatar (foto profil) dengan fallback inisial */ .avatar { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; } .avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 16px; background: #9aa0a6; user-select: none; } .avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .15s; } .avatar-img.ok { opacity: 1; } .conv-head .avatar { width: 38px; height: 38px; } .conv-head .avatar-initials { font-size: 14px; } .chat-item:hover { background: var(--panel-2); } .chat-item.active { background: var(--active); } .chat-item.pinned { background: var(--pinned); } .chat-item.pinned.active { background: var(--active); } .chat-item .pin-btn { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--hover); font-size: 13px; cursor: pointer; line-height: 1; opacity: 0; transition: opacity .12s; display: flex; align-items: center; justify-content: center; } .chat-item:hover .pin-btn { opacity: 1; } .chat-item .pin-btn:hover { background: rgba(0,168,132,.18); } .chat-item .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .chat-item .row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .chat-item .name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-item .time { font-size: 12px; color: var(--muted); flex-shrink: 0; } .chat-item .preview { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* hasil pencarian isi pesan */ .search-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--panel-2); font-size: 12.5px; } .search-head-q { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-exit { flex-shrink: 0; border: none; width: 24px; height: 24px; border-radius: 50%; background: var(--hover); color: var(--text); cursor: pointer; font-size: 12px; line-height: 1; } .search-exit:hover { background: var(--active); } .search-result { padding: 10px 14px; border-bottom: 1px solid var(--divider); cursor: pointer; } .search-result:hover { background: var(--panel-2); } .search-result .sr-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .search-result .sr-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result .sr-time { font-size: 11.5px; color: var(--muted); flex-shrink: 0; } .search-result .sr-snippet { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-result .sr-snippet mark { background: #fde68a; color: #1a1a1a; border-radius: 2px; padding: 0 1px; } /* unread */ .chat-item .badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--green); color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* badge @ (di-tag / dibalas) */ .chat-item .mention { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; } .chat-item.unread .name { font-weight: 800; } .chat-item.unread .preview { color: var(--text); font-weight: 500; } .chat-item.unread .time { color: var(--green-dark); font-weight: 700; } /* empty / placeholder list states */ .list-msg { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; } /* skeleton shimmer */ .skel-item { padding: 12px 14px; border-bottom: 1px solid var(--divider); } .skel-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg,var(--skel1) 25%,var(--skel2) 37%,var(--skel1) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .skel-line.short { width: 45%; margin-bottom: 8px; height: 13px; } .skel-line.long { width: 85%; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ---------- conversation ---------- */ .conversation { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); } .conv-empty { flex: 1; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--muted); font-size: 16px; } .empty-art { font-size: 56px; opacity: .35; } .conv-view { flex: 1; display: flex; flex-direction: column; min-height: 0; } .conv-head { display: flex; align-items: center; gap: 12px; background: var(--panel-2); padding: 14px 18px; border-left: 1px solid var(--border); } .conv-title { font-weight: 600; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .back-btn { display: none; flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--green-dark); font-size: 22px; cursor: pointer; align-items: center; justify-content: center; line-height: 1; } .back-btn:hover { background: var(--hover); } .messages-wrap { flex: 1; position: relative; min-height: 0; display: flex; } .messages { flex: 1; overflow-y: auto; padding: 18px 8% 18px 8%; display: flex; flex-direction: column; gap: 4px; } .conv-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--overlay); backdrop-filter: blur(1px); } .jump-btn { position: absolute; bottom: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: var(--panel); color: var(--green-dark); border: none; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.22); animation: fadein .2s ease; } .jump-btn:hover { background: var(--hover); } .jump-dot { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 2px solid var(--panel); } .bubble { /* lebar maksimum ala WhatsApp: 65% di layar sempit, mentok ~480px di layar lebar supaya teks panjang otomatis turun baris & enak dibaca */ max-width: min(65%, 30rem); padding: var(--bubble-pad); border-radius: var(--bubble-radius); font-size: 14px; line-height: 1.35; box-shadow: var(--bubble-shadow); border: var(--bubble-border); word-wrap: break-word; position: relative; animation: fadein .18s ease; } @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .bubble.me { align-self: flex-end; background: var(--bubble-me); border-bottom-right-radius: var(--bubble-tail); } .bubble.other { align-self: flex-start; background: var(--bubble-other); border-bottom-left-radius: var(--bubble-tail); } .bubble.pending { opacity: .6; } .bubble .sender { font-size: 12px; font-weight: 600; color: var(--green-dark); margin-bottom: 2px; } .bubble .body { white-space: pre-wrap; overflow-wrap: anywhere; } .bubble .body a { color: var(--green-dark); text-decoration: underline; word-break: break-all; } .bubble .body a:hover { opacity: .85; } /* pesan hanya-emoji: besar & tanpa bubble */ .bubble.emoji-only { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 2px; } .bubble.emoji-only .body { font-size: 44px; line-height: 1.15; } /* menu konteks pesan */ .msg-menu { position: fixed; z-index: 300; min-width: 168px; padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.28); } .msg-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; color: var(--text); padding: 9px 12px; border-radius: 6px; cursor: pointer; font-size: 13.5px; } .msg-menu button:hover { background: var(--hover); } .bubble .meta { font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 2px; } .bubble .del-mark { color: #f0524a; font-weight: 600; } .bubble.deleted .body { opacity: .92; } /* konten tetap kebaca, sedikit diredupkan */ /* kutipan (reply) di dalam bubble */ .bubble .quoted { border-left: 3px solid var(--green); background: var(--pill); border-radius: 4px; padding: 4px 8px; margin-bottom: 4px; cursor: pointer; max-width: 100%; overflow: hidden; } .bubble.me .quoted { background: var(--pill); } .bubble .quoted .q-sender { font-size: 12px; font-weight: 600; color: var(--green-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bubble .quoted .q-text { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bubble.flash { animation: flash 1s ease; } @keyframes flash { 0%,100% { background-color: inherit; } 30% { background-color: #fff6c5; } } /* tombol menu pesan ⋮ (muncul saat hover bubble; klik = menu konteks) */ .bubble .menu-btn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border: none; border-radius: 50%; background: var(--hover); color: var(--muted); font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1; opacity: 0; transition: opacity .12s; display: flex; align-items: center; justify-content: center; } .bubble:hover .menu-btn { opacity: 1; } .bubble .menu-btn:hover { background: var(--green); color: #fff; } /* pembatas tanggal (Hari ini / Kemarin / tanggal) */ .date-sep { display: flex; justify-content: center; margin: 8px 0; } .date-sep span { background: var(--datesep); color: var(--muted); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.1); text-transform: none; } .load-older { text-align: center; padding: 8px; color: var(--green-dark); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .load-older:hover { text-decoration: underline; } .load-older.busy { color: var(--muted); cursor: default; text-decoration: none; } .load-older.done { color: var(--muted); cursor: default; text-decoration: none; } /* media di dalam bubble */ .bubble .media { display: block; border-radius: 6px; margin-bottom: 4px; max-width: 100%; } .bubble img.media { max-height: 330px; cursor: pointer; } .bubble video.media { max-height: 352px; width: 100%; background: #000; } .bubble .media-video { position: relative; display: inline-block; cursor: pointer; } .bubble .media-video img.media, .bubble .media-video video.media { max-height: 330px; } /* thumbnail gambar dari chat orang lain dibuat 20% lebih besar */ .bubble.other:has(img.media) { max-width: min(78%, 36rem); } .bubble.other img.media, .bubble.other .media-video img.media { max-height: 396px; } /* gambar masuk: state loading / gagal muat */ .bubble .media-img { position: relative; display: inline-block; line-height: 0; overflow: hidden; border-radius: 6px; } .bubble .media-img img.show { display: block; } /* loader full-res tak terlihat (di belakang thumbnail), hanya untuk memicu fetch + onload swap */ .bubble .media-img img.media-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .bubble .media-img.loading img.show { filter: blur(3px); transform: scale(1.02); } /* samarkan thumbnail kasar saat memuat */ .bubble .media-img.failed img.show { filter: brightness(.8); } .bubble .media-img .media-spin, .bubble .media-img .media-retry { display: none; } .bubble .media-img.loading .media-spin { /* di-tengah pakai calc (BUKAN transform translate) supaya tak bentrok dgn animasi rotate spinner — kalau pakai translate, transform-nya ketiban rotate → goyang, tak muter */ display: block; position: absolute; top: calc(50% - 7px); left: calc(50% - 7px); filter: drop-shadow(0 0 2px rgba(0,0,0,.55)); /* kontras di atas gambar terang */ } .bubble .media-img.failed .media-retry { display: inline-flex; align-items: center; gap: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 7px 13px; border: none; border-radius: 18px; cursor: pointer; white-space: nowrap; background: rgba(0,0,0,.72); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; } .bubble .media-img.failed .media-retry:hover { background: rgba(0,0,0,.88); } .bubble .media-video .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 4px; } /* chip dokumen / arsip di dalam bubble (klik = unduh) */ .bubble .doc-chip { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 8px 10px; background: var(--pill); border-radius: 8px; cursor: pointer; min-width: 200px; max-width: 320px; } .bubble.me .doc-chip { background: var(--pill); } .bubble .doc-chip:hover { background: var(--hover); } .bubble .doc-chip .doc-ic { font-size: 26px; line-height: 1; flex-shrink: 0; } .bubble .doc-chip .doc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bubble .doc-chip .doc-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bubble .doc-chip .doc-meta { font-size: 11.5px; color: var(--muted); } .bubble .doc-chip .doc-dl { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; } .attach-thumb .doc-emoji { font-size: 28px; } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; } .lb-content { max-width: 92vw; max-height: 92vh; display: flex; align-items: center; justify-content: center; } .lb-media { max-width: 92vw; max-height: 92vh; border-radius: 4px; } .lb-loading { color: #fff; } .lb-close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 16px; cursor: pointer; } .lb-close:hover { background: rgba(255,255,255,.3); } /* ---------- compose / send bar ---------- */ .compose { background: var(--panel-2); position: relative; } .send-bar { display: flex; gap: 8px; padding: 12px 16px; align-items: flex-end; } .attach-btn, .emoji-btn { flex-shrink: 0; width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--input); font-size: 18px; cursor: pointer; color: var(--green-dark); line-height: 1; } .attach-btn:hover, .emoji-btn:hover { background: var(--hover); } /* panel pemilih emoji */ .emoji-panel { position: absolute; bottom: 64px; left: 12px; z-index: 30; width: 320px; max-width: calc(100% - 24px); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; display: flex; flex-direction: column; } .emoji-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--panel-2); } .emoji-tabs .etab { flex: 1; border: none; background: transparent; cursor: pointer; padding: 8px 0; font-size: 17px; line-height: 1; opacity: .6; border-bottom: 2px solid transparent; } .emoji-tabs .etab:hover { opacity: 1; } .emoji-tabs .etab.active { opacity: 1; border-bottom-color: var(--green); } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; max-height: 240px; overflow-y: auto; } .emoji-grid button { border: none; background: transparent; cursor: pointer; font-size: 21px; line-height: 1; padding: 5px 0; border-radius: 6px; } .emoji-grid button:hover { background: var(--hover); } .emoji-grid button img.bbm-pick { width: 28px; height: 28px; object-fit: contain; display: block; margin: 0 auto; } .bubble .body img.bbm-emo { width: 22px; height: 22px; vertical-align: -5px; object-fit: contain; } /* gambar BBM versi kecil di preview list / hasil cari / kutipan */ .chat-item .preview img.bbm-emo, .search-result .sr-snippet img.bbm-emo, .bubble .quoted .q-text img.bbm-emo, .reply-bar-text img.bbm-emo { width: 15px; height: 15px; vertical-align: -3px; object-fit: contain; } .emoji-grid .egroup-label { grid-column: 1 / -1; font-size: 11px; color: var(--muted); font-weight: 600; padding: 6px 2px 2px; text-transform: uppercase; letter-spacing: .03em; } .send-input { flex: 1; min-width: 0; padding: 10px 14px; border: none; border-radius: 20px; font-size: 14px; outline: none; font-family: inherit; line-height: 1.4; min-height: 42px; max-height: 120px; overflow-y: auto; background: var(--input); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; } .send-input:empty:before { content: attr(data-ph); color: var(--muted); pointer-events: none; } /* chip mention di kolom ketik (atomik, non-editable) */ .send-input .mention { color: var(--green-dark); font-weight: 600; background: var(--pill); border-radius: 4px; padding: 0 3px; white-space: nowrap; } /* picker @mention (autocomplete anggota grup) — sama pola dgn emoji-panel */ .mention-picker { position: absolute; bottom: 64px; left: 12px; z-index: 30; width: 320px; max-width: calc(100% - 24px); max-height: 240px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; } .mention-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 7px 10px; border-radius: 8px; color: var(--text); } .mention-item:hover, .mention-item.active { background: var(--hover); } .mention-av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600; } .mention-name { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mention-num { font-size: 11px; color: var(--muted); white-space: nowrap; } /* ----- stiker ----- */ /* bubble stiker: tanpa latar/bayangan (ala WA), hanya gambar + waktu */ .bubble.sticker-msg { background: transparent; box-shadow: none; border: none; padding: 0; max-width: none; } .bubble.sticker-msg .meta { color: var(--muted); } .sticker { display: inline-block; line-height: 0; } .sticker-img { width: 140px; height: 140px; object-fit: contain; display: block; } .sticker-fallback { font-size: 13px; color: var(--muted); padding: 6px 2px; line-height: 1.6; } /* stiker favorit = tab terakhir di panel emoji → grid emoji jadi 4-kolom */ .emoji-grid.stickers { grid-template-columns: repeat(4, 1fr); gap: 6px; } .sticker-cell { position: relative; cursor: pointer; border-radius: 8px; padding: 4px; } .sticker-cell:hover { background: var(--hover); } .sticker-cell > img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; } .sticker-rm { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; line-height: 18px; text-align: center; cursor: pointer; display: none; padding: 0; } .sticker-cell:hover .sticker-rm { display: block; } .sticker-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13px; padding: 22px 12px; line-height: 1.6; } .send-input img.bbm-emo { width: 22px; height: 22px; vertical-align: -5px; object-fit: contain; } /* pesan yang isinya hanya emoticon BBM → gambar besar tanpa bubble */ .bubble.bbm-only { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 2px; } .bubble.bbm-only .body img.bbm-emo { width: 57px; height: 57px; vertical-align: middle; } .send-btn { padding: 0 20px; min-width: 86px; height: 42px; background: var(--green); color: #fff; border: none; border-radius: 20px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .send-btn:hover { background: var(--green-dark); } .send-btn:disabled { opacity: .7; cursor: default; } /* bar reply (sedang membalas pesan) */ .reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--panel-2); animation: slidedown .2s ease; } .reply-bar-info { flex: 1; min-width: 0; border-left: 3px solid var(--green); padding-left: 10px; display: flex; flex-direction: column; gap: 1px; } .reply-bar-sender { font-size: 12.5px; font-weight: 600; color: var(--green-dark); } .reply-bar-text { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reply-cancel { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--input); color: var(--muted); font-size: 14px; cursor: pointer; } .reply-cancel:hover { background: var(--hover); color: var(--red); } /* preview lampiran sebelum kirim */ .attach-preview { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); animation: slidedown .2s ease; } .attach-thumb { width: 54px; height: 54px; border-radius: 8px; flex-shrink: 0; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; font-size: 24px; } .attach-thumb img, .attach-thumb video { width: 100%; height: 100%; object-fit: cover; } .attach-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .attach-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attach-meta { font-size: 12px; color: var(--muted); } .attach-cancel { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--input); color: var(--muted); font-size: 14px; cursor: pointer; } .attach-cancel:hover { background: var(--hover); color: var(--red); } /* ---------- toasts ---------- */ .toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { background: #2a3942; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: toastin .25s ease; max-width: 80vw; } .toast.err { background: #b53a36; } .toast.ok { background: var(--green-dark); } .toast.out { animation: toastout .25s ease forwards; } @keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastout { to { opacity: 0; transform: translateY(10px); } } /* ===================== MOBILE (≤768px) ===================== */ @media (max-width: 768px) { /* satu panel penuh layar: list dulu, percakapan menggeser masuk saat chat dibuka */ .sidebar { flex: 0 0 100%; width: 100%; min-width: 0; border-right: none; } .conversation { position: absolute; inset: 0; z-index: 20; background: var(--bg); transform: translateX(100%); transition: transform .22s ease; } .app.chat-open .conversation { transform: translateX(0); } /* tampilkan tombol kembali */ .back-btn { display: flex; } /* input/compose: naik dari home indicator (safe-area) tapi gak terlalu tinggi + bar lebih tipis */ .compose { padding-bottom: env(safe-area-inset-bottom, 0px); } /* saat keyboard muncul, home indicator ketutup keyboard → buang gap safe-area */ :root.kb-open .compose { padding-bottom: 0; } .send-bar { padding: 8px 12px; } .attach-btn, .emoji-btn { width: 38px; height: 38px; font-size: 17px; } .send-btn { height: 38px; min-width: 76px; } .send-input { min-height: 38px; padding: 8px 14px; } .chat-item { -webkit-user-select: none; user-select: none; } /* mobile: pin/unpin lewat SWIPE KIRI, bukan tombol → sembunyikan tombol pin */ .chat-item .pin-btn { display: none; } .chat-list { overflow-x: hidden; } /* indikator aksi saat swipe kiri (muncul dari kanan mengisi celah) */ .chat-item.sw-pin::after { content: "📌"; position: absolute; left: 100%; top: 0; bottom: 0; width: 96px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--green); color: #fff; } .bubble .menu-btn { opacity: .55; } /* filter Semua/Pribadi/Grup → bar MENGAMBANG di bawah (ala WA iOS), naik dari tepi layar (+ safe-area home indicator) biar tidak kepotong */ .chat-filters { position: fixed; left: 12px; right: 12px; z-index: 15; margin-top: 0; bottom: env(safe-area-inset-bottom, 0px); /* mentok bawah aman (di atas home indicator) */ background: var(--green); border: none; border-radius: 16px; /* bar ikut warna header */ box-shadow: 0 4px 16px rgba(0,0,0,.25); padding: 9px 8px; /* agak tebal */ } /* tombol filter di bar mengambang: putih. Aktif = putih solid, non-aktif = putih transparan */ .chat-filters .filter-tab { padding: 8px 8px; background: rgba(255,255,255,.22); color: #fff; } .chat-filters .filter-tab.active { background: #fff; color: var(--green-dark); } .chat-filters .filter-tab .filter-count { background: rgba(255,255,255,.28); color: #fff; } .chat-filters .filter-tab.active .filter-count { background: var(--green); color: #fff; } .chat-list { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } /* ruang utk bar */ .app.chat-open .chat-filters { display: none; } /* sembunyi saat di percakapan */ /* bubble & padding lebih lega di layar sempit */ .messages { padding: 12px 5%; } .bubble { max-width: 82%; } /* sidebar full-width → batasi lebar header agar rapi */ .sidebar { max-width: 100%; } /* popover tema sedikit lebih lebar agar gampang disentuh */ .theme-popover { right: 10px; } .swatch { width: 32px; height: 32px; } /* cegah auto-zoom browser HP saat fokus ke input (terjadi bila font <16px). Font 16px menonaktifkan auto-zoom TANPA mematikan pinch-zoom. */ .search, .send-input, .login-box input, #tokenInput, .newchat-popover input { font-size: 16px; } }