/* ========================================================= Theme tokens — dark (default) + light + accent overrides. Set on by include/theme.php (data-theme, data-accent). ========================================================= */ :root{ --bg:#0e1621; --panel:#17212b; --panel2:#242f3d; --panel3:#1b2733; --panel4:#202b36; --panel5:#1e2a38; --border:#2b3a4a; --text:#f5f5f5; --text2:#aebac9; --muted:#6f7b8c; --muted2:#8a94a3; --accent:#2AABEE; --accent-hover:#2496d3; --accent-soft:#173a55; --bubble-in:#182533; --bubble-out:#2b5278; --danger:#f0616d; --danger-hover:#d94e5a; --success:#00d94b; --warning:#f0c75e; --warning2:#f0a94f; --chat-bg:linear-gradient(180deg,#0e1621 0%,#101b26 100%); --landing-bg:linear-gradient(180deg,#0e1621 0%,#12202e 100%); } [data-accent="green"]{--accent:#00c853;--accent-hover:#00a844;--accent-soft:#1a3a2e;} [data-accent="purple"]{--accent:#a370f7;--accent-hover:#8b5cf6;--accent-soft:#3a2a55;} [data-accent="red"]{--accent:#f0616d;--accent-hover:#d94e5a;--accent-soft:#3a1f28;} [data-accent="orange"]{--accent:#f0a94f;--accent-hover:#e8932f;--accent-soft:#3a2f17;} [data-accent="pink"]{--accent:#f06595;--accent-hover:#e0507f;--accent-soft:#3a1f2e;} [data-theme="light"]{ --bg:#eef2f7; --panel:#ffffff; --panel2:#f2f5f9; --panel3:#e6ebf2; --panel4:#dfe6ee; --panel5:#e9eef4; --border:#d5dde6; --text:#1c2733; --text2:#3d4d5f; --muted:#5f6e80; --muted2:#8a97a6; --bubble-in:#ffffff; --bubble-out:#d4ecfb; --chat-bg:linear-gradient(180deg,#eef2f7 0%,#e3e9f1 100%); --landing-bg:linear-gradient(180deg,#eef2f7 0%,#e3e9f1 100%); } /* ========================================================= MyChat — Telegram-style dark theme ========================================================= */ *{margin:0;padding:0;box-sizing:border-box;} body.app-body{ font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:var(--bg);color:var(--text);overflow:hidden; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%; } a{text-decoration:none;} ::-webkit-scrollbar{width:6px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:#3a4d61;} /* ---------- app layout ---------- */ .app{display:flex;height:100vh;height:100dvh;} /* ---------- sidebar ---------- */ .sidebar{ width:380px;min-width:380px;background:var(--panel); display:flex;flex-direction:column;border-right:1px solid var(--border); } .sidebar-header{ display:flex;align-items:center;padding:10px 14px; background:var(--panel);border-bottom:1px solid var(--border); } .sidebar-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;} .sidebar-profile{flex:1;min-width:0;margin-left:10px;display:flex;flex-direction:column;} .sidebar-name{font-weight:600;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-sub{color:var(--muted);font-size:12px;} .sidebar-actions{display:flex;} .sidebar-actions a{color:var(--muted);font-size:18px;margin-left:14px;transition:color .2s,transform .2s;} .sidebar-actions a:hover{color:var(--accent);transform:translateY(-1px);} .sidebar-search{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);} .sidebar-search input{ flex:1;min-width:0;background:var(--panel2);border:none;border-radius:18px; padding:8px 14px;color:var(--text);font-size:14px;outline:none;transition:background .2s; } .global-search-btn{ background:none;border:none;color:var(--muted);font-size:17px;padding:6px 4px; cursor:pointer;flex-shrink:0;transition:color .2s,transform .2s; } .global-search-btn:hover{color:var(--accent);transform:translateY(-1px);} .sidebar-search input:focus{background:var(--border);} .sidebar-search input::placeholder{color:var(--muted);} .chat-list{flex:1;overflow-y:auto;list-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;} .chat-list li a{display:flex;align-items:center;padding:9px 12px;transition:background .15s;} .chat-list li a:hover{background:var(--panel4);} .chat-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;margin-right:12px;flex-shrink:0;} .chat-info{flex:1;min-width:0;} .chat-line{display:flex;align-items:center;justify-content:space-between;margin:1px 0;} .chat-name{color:var(--text);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chat-time{color:var(--muted);font-size:12px;margin-left:8px;flex-shrink:0;} .chat-preview{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:8px;} .chat-preview.typing{color:var(--accent);font-style:italic;} .chat-preview.call-state{color:var(--accent);} .missed-call-badge{ display:inline-flex;align-items:center;gap:4px;background:var(--danger);color:#fff; border-radius:12px;min-width:20px;height:20px;line-height:1;padding:0 7px; font-size:11.5px;font-weight:600;flex-shrink:0;justify-content:center; animation:missedPulse 1.4s ease-in-out infinite; } .missed-call-badge i{font-size:10px;} @keyframes missedPulse{0%,100%{opacity:1;}50%{opacity:.45;}} /* ---------- in-chat search (filter bar inside chat.php) ---------- */ .chat-search-bar{ display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel); border-bottom:1px solid var(--border); } .chat-search-bar > .fa-search{color:var(--muted);font-size:14px;flex-shrink:0;} .chat-search-bar input{ flex:1;min-width:0;background:var(--panel2);border:none;border-radius:16px; padding:7px 12px;color:var(--text);font-size:14px;outline:none;transition:background .2s; } .chat-search-bar input:focus{background:var(--border);} .chat-search-bar input::placeholder{color:var(--muted);} .chat-search-count{color:var(--muted);font-size:12px;white-space:nowrap;flex-shrink:0;} .chat-search-nav,.chat-search-close{ background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer; padding:5px 6px;flex-shrink:0;transition:color .2s,transform .2s; } .chat-search-nav:hover,.chat-search-close:hover{color:var(--accent);transform:translateY(-1px);} /* current match gets a blue ring (like WhatsApp's pinned search) */ .msg.search-current .bubble{box-shadow:0 0 0 2px var(--accent), 0 4px 14px rgba(42,171,238,.25);} .msg.search-current .msg-system-text{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;} /* ---------- global message search (Ctrl+F) ---------- */ .search-modal{ width:min(600px,95vw);max-height:82vh;background:var(--panel);border-radius:14px; display:flex;flex-direction:column;overflow:hidden; } .search-modal-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--panel2);} .search-modal-head > .fa-search{color:var(--muted);font-size:15px;flex-shrink:0;} .search-modal-head input{ flex:1;min-width:0;background:var(--panel2);border:none;border-radius:18px; padding:10px 14px;color:var(--text);font-size:15px;outline:none;transition:background .2s; } .search-modal-head input:focus{background:var(--border);} .search-hint{color:var(--muted);font-size:12px;padding:8px 14px;border-bottom:1px solid var(--border);} .search-hint b{color:#9fb3c8;font-weight:600;} .search-results{flex:1;overflow-y:auto;padding:6px 8px;-webkit-overflow-scrolling:touch;} .search-count{color:var(--muted);font-size:12px;padding:6px 10px;} .search-result{ display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px; transition:background .15s; } /* forward-from-list: wrap row so the ✈ button sits beside the result link */ .search-result-wrap{display:flex;align-items:center;border-radius:10px;transition:background .15s;} .search-result-wrap:hover{background:var(--panel4);} .search-result-wrap:hover .search-result{background:transparent;} .search-result-wrap .search-result{flex:1;min-width:0;} .search-forward-btn{ background:none;border:none;color:var(--muted);font-size:14px;width:34px;height:34px; border-radius:8px;cursor:pointer;flex-shrink:0;margin-right:6px; transition:background .15s,color .15s; } .search-forward-btn:hover{background:var(--border);color:var(--text);} .search-result:hover{background:var(--panel4);} .search-result img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;} .search-result-info{flex:1;min-width:0;} .search-result-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;} .search-result-name{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .search-group-tag{font-size:10px;font-weight:600;color:var(--accent);border:1px solid rgba(42,171,238,.35);border-radius:4px;padding:1px 4px;vertical-align:1px;} .search-result-time{font-size:11px;color:var(--muted);flex-shrink:0;} .search-result-snippet{font-size:13px;color:#9fb3c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;} .search-result-snippet mark{background:#3a6ea5;color:#fff;border-radius:3px;padding:0 2px;} .search-sender{color:var(--accent);font-size:12px;} .search-empty,.search-loading{color:var(--muted);text-align:center;padding:26px 14px;font-size:14px;} .search-loading .fa{margin-right:6px;} .search-more-btn{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%; margin:10px 0 8px;padding:10px 12px;background:var(--panel2);border:none;border-radius:10px; color:var(--accent);font-size:14px;font-family:inherit;cursor:pointer;transition:background .15s; } .search-more-btn:hover{background:var(--border);} .search-more-btn:disabled{color:var(--muted);cursor:default;} /* clear-all-missed-calls bar (sidebar, under the search box) */ .missed-bar{ display:none;align-items:center;justify-content:space-between;gap:10px; background:#3a1f28;border-bottom:1px solid var(--border);padding:8px 12px; } .missed-bar-label{ display:inline-flex;align-items:center;gap:6px;color:var(--danger); font-size:12.5px;font-weight:600;min-width:0; } .missed-bar-label i{font-size:12px;flex-shrink:0;} .missed-bar-count{color:var(--text);} .missed-bar-word{color:var(--danger);} .missed-clear-btn{ background:var(--danger);color:#fff;border:none;border-radius:8px; padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0; transition:background .15s,transform .1s; } .missed-clear-btn:hover{background:var(--danger-hover);} .missed-clear-btn:active{transform:scale(.95);} .chat-badge{ background:var(--accent);color:#fff;border-radius:10px;min-width:20px;height:20px; line-height:20px;text-align:center;font-size:12px;font-weight:600;padding:0 6px;flex-shrink:0; } .chat-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;} .chat-dot.online{background:var(--success);box-shadow:0 0 6px rgba(0,217,75,.6);} .chat-dot.offline{background:#5e6b7a;} /* WhatsApp/Telegram-style avatar overlays: the green online dot (bottom-right corner) and the unread-count badge (top-right corner) sit ON the profile image, not at the far right of the row. */ .avatar-badge-wrap{ position:relative;display:inline-block;flex-shrink:0;margin-right:12px; } .avatar-badge-wrap .chat-avatar{margin-right:0;display:block;} .chat-avatar-ring .avatar-badge-wrap{margin-right:0;} .avatar-online-dot{ position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%; background:#5e6b7a;border:2.5px solid var(--panel);z-index:2; } .avatar-online-dot.online{background:var(--success);box-shadow:0 0 6px rgba(0,217,75,.6);} .avatar-unread-badge{ position:absolute;top:-6px;right:-6px;background:var(--accent);color:#fff; border-radius:11px;min-width:20px;height:20px;line-height:20px;text-align:center; font-size:11px;font-weight:700;padding:0 5px;z-index:3; border:2px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.35); } /* inline People results in the sidebar quick-search (typing @handle or name surfaces users you haven't chatted with yet — like WhatsApp's contact finder) */ .people-section{ display:flex;align-items:center;padding:9px 14px 4px;font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--muted); background:var(--panel);position:sticky;top:0;z-index:2; } .person-row a{display:flex;align-items:center;padding:9px 12px;transition:background .15s;} .person-row a:hover{background:var(--panel4);} .person-row .chat-avatar{margin-right:12px;} .person-row .chat-dot{margin:0 0 0 8px;} .person-handle{color:var(--accent);font-weight:600;} .person-about{color:var(--muted);} .person-start{ margin-left:10px;color:var(--accent);font-size:16px;flex-shrink:0; opacity:.6;transition:opacity .15s,transform .15s; } .person-row a:hover .person-start{opacity:1;transform:scale(1.12);} .person-row a:hover .person-handle{color:var(--accent-hover);} li.no-chats{color:var(--muted);font-size:14px;text-align:center;padding:30px 16px;line-height:1.6;} .sidebar-footer{padding:10px;border-top:1px solid var(--border);} .logout-btn{ color:var(--danger);text-decoration:none;font-size:14px;display:block;text-align:center; padding:8px;border-radius:8px;transition:background .2s; } .logout-btn:hover{background:var(--panel4);} /* ---------- main pane ---------- */ .main{flex:1;display:flex;flex-direction:column;min-width:0;} .empty-state{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; color:var(--muted);text-align:center;padding:20px; } .empty-state i{font-size:64px;color:var(--accent);margin-bottom:16px;animation:float 3s ease-in-out infinite;} @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} .empty-state h2{color:var(--text);font-size:26px;margin-bottom:8px;letter-spacing:.5px;} .empty-state p{font-size:15px;max-width:340px;line-height:1.6;} .empty-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;} .btn-primary{ background:var(--accent);color:#fff;padding:10px 18px;border-radius:8px;font-weight:600; border:none;cursor:pointer;font-size:14px;display:inline-block;transition:background .2s,transform .1s; } .btn-primary:hover{background:var(--accent-hover);color:#fff;} .btn-primary:active{transform:scale(.97);} .btn-secondary{ background:var(--panel2);color:var(--text);padding:10px 18px;border-radius:8px;font-weight:600; border:none;cursor:pointer;font-size:14px;display:inline-block;transition:background .2s; } .btn-secondary:hover{background:var(--border);color:var(--text);} .btn-danger{ background:var(--danger);color:#fff;padding:10px 18px;border-radius:8px;font-weight:600; border:none;cursor:pointer;font-size:14px;transition:background .2s; } .btn-danger:hover{background:var(--danger-hover);} /* ---------- chat view ---------- */ .chat-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg);} .chat-header{ display:flex;align-items:center;padding:8px 14px;background:var(--panel); border-bottom:1px solid var(--border); } .back-btn{display:none;color:var(--muted);font-size:20px;margin-right:12px;transition:color .2s;} .back-btn:hover{color:var(--text);} .header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;} .header-handle{color:var(--accent);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;} .header-info{margin-left:12px;flex:1;min-width:0;} .header-name{color:var(--text);font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .header-status{color:var(--muted);font-size:12.5px;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} .header-about{ color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:100%; } .header-status.online{color:var(--success);} .header-status.typing{color:var(--accent);font-style:italic;} .header-actions a{color:var(--muted);font-size:17px;margin-left:16px;transition:color .2s;} .header-actions a:hover{color:var(--accent);} .header-icon-btn{ background:none;border:none;color:var(--muted);font-size:17px;margin-left:16px; padding:0;cursor:pointer;transition:color .2s,transform .1s; } .header-icon-btn:hover{color:var(--accent);} .header-icon-btn:active{transform:scale(.9);} .header-icon-btn.muted{color:var(--warning);} /* WhatsApp-style ⋮ header menu (settings + advanced options) */ .header-menu-wrap{position:relative;display:inline-flex;margin-left:16px;} .header-menu-wrap .menu-btn{margin-left:0;} .header-menu{ display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:235px; background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:6px; box-shadow:0 10px 34px rgba(0,0,0,.55);z-index:80;animation:fadeIn .14s ease; } .header-menu.open{display:block;} .menu-item{ display:flex;align-items:center;gap:12px;width:100%;background:none;border:none; color:var(--text);font-size:14px;text-align:left;padding:10px 12px;border-radius:9px; cursor:pointer;font-family:inherit;transition:background .15s;text-decoration:none; } .menu-item i{width:18px;text-align:center;color:var(--muted);flex-shrink:0;} .menu-item:hover{background:var(--panel4);color:var(--text);} /* menu links sit inside .header-actions, so re-assert menu styling over the .header-actions a rule (specificity fix) */ .header-menu .menu-item{color:var(--text);font-size:14px;margin-left:0;transition:background .15s;} .header-menu .menu-item:hover{color:var(--text);} .menu-item.muted i,.menu-item.archived i,.menu-item.locked i{color:var(--warning);} .header-menu .menu-item.danger,.header-menu .menu-item.danger i{color:var(--danger);} .header-menu .menu-item.danger:hover{background:var(--panel4);color:var(--danger);} .header-menu .menu-item.danger:hover i{color:var(--danger);} .menu-sep{height:1px;background:var(--border);margin:6px 8px;} @media (max-width:480px){ .header-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);overflow-y:auto;} } .header-icon-btn.muted:hover{color:var(--warning);} /* ---------- pinned message bar ---------- */ .pinned-bar{ display:flex;align-items:center;gap:10px;background:var(--panel3); border-bottom:1px solid var(--border);padding:8px 14px;flex-shrink:0; } .pinned-bar .pinned-icon{color:var(--warning);font-size:14px;} .pinned-info{flex:1;min-width:0;} .pinned-label{color:var(--warning);font-size:11.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;} .pinned-label i{display:none;} .pinned-text{ color:var(--text2);font-size:13px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;margin-top:1px; } .pinned-jump{ background:var(--panel2);border:none;color:var(--accent);border-radius:50%;width:30px;height:30px; cursor:pointer;flex-shrink:0;transition:background .15s;font-size:13px; } .pinned-jump:hover{background:var(--border);} .pinned-unpin{ background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer; padding:4px;flex-shrink:0;transition:color .15s; } .pinned-unpin:hover{color:var(--text);} /* muted bell in the conversation list */ .muted-bell{color:var(--muted);font-size:12px;margin-right:6px;flex-shrink:0;} /* jump-to-pinned highlight */ .msg.flash-highlight .bubble{ animation:flashPulse 1.8s ease; } @keyframes flashPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(42,171,238,0);} 25%{box-shadow:0 0 0 3px rgba(42,171,238,.55);} } .action-btn.active{color:var(--warning);} .messages{ flex:1;overflow-y:auto;padding:16px 18px; display:flex;flex-direction:column; background:var(--chat-bg); -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain; } .msg{display:flex;margin-bottom:6px;align-items:flex-end;position:relative;animation:fadeIn .25s ease; touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none; } /* WhatsApp-style swipe-left-to-reply visual feedback */ .msg.swiping{transform:translateX(-18px);opacity:.7;transition:transform .15s ease,opacity .15s ease;} @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} .msg.incoming{justify-content:flex-start;} .msg.outgoing{justify-content:flex-end;} .msg-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;margin-right:8px;flex-shrink:0;align-self:flex-end;} /* column under the bubble: bubble row (bubble + actions side by side) then reactions */ .msg-col{display:flex;flex-direction:column;align-items:flex-start;max-width:65%;min-width:0;} .msg.outgoing .msg-col{align-items:flex-end;} .msg-bubble-row{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0;position:relative;} .msg.outgoing .msg-bubble-row{flex-direction:row-reverse;} .bubble{ max-width:100%;padding:8px 12px;border-radius:12px;font-size:15px;line-height:1.45; position:relative;word-wrap:break-word;overflow-wrap:break-word;color:var(--text); } .msg.incoming .bubble{background:var(--bubble-in);border-top-left-radius:2px;} .msg.outgoing .bubble{background:var(--bubble-out);border-top-right-radius:2px;} .msg-name{font-size:12.5px;font-weight:600;color:var(--accent);display:block;margin-bottom:2px;} .msg-time{font-size:11px;color:var(--muted);margin:0 6px;align-self:flex-end;white-space:nowrap;flex-shrink:0;} /* ---------- read receipts (WhatsApp-style ticks) ---------- */ .msg.outgoing .bubble{padding-bottom:17px;} .msg.outgoing .bubble.img-bubble{padding-bottom:0;} .msg-tick{ position:absolute;right:6px;bottom:4px;font-size:10px;line-height:1; color:#a9b8c9;display:inline-flex;align-items:center;gap:0; text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none; } .msg-tick i + i{margin-left:-3px;} .msg-tick.read{color:#53bdeb;} /* ---------- WhatsApp-style composer (compact single pill) ---------- */ .composer{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:var(--panel);} .composer-pill{ flex:1;min-width:0;display:flex;align-items:center;min-height:44px; background:var(--panel2);border:1px solid var(--border);border-radius:22px;padding:0 4px; transition:border-color .2s,background .2s; } .composer-pill:focus-within{background:var(--border);border-color:#3b4a5c;} .composer-pill button{ background:none;border:none;color:#8696a0;width:38px;height:42px;flex-shrink:0; font-size:18px;cursor:pointer;border-radius:50%;padding:0; display:flex;align-items:center;justify-content:center; transition:color .15s,transform .1s; } .composer-pill button:hover{color:var(--accent);} .composer-pill button:active{transform:scale(.9);} .composer-pill #msg-input{ flex:1;min-width:0;background:transparent;border:none;outline:none; color:var(--text);font-size:15px;padding:0 8px;height:42px; } .composer-pill #msg-input::placeholder{color:var(--muted);} .composer #send-btn{ background:var(--accent);color:#fff;border:none;border-radius:50%;width:44px;height:44px; font-size:17px;cursor:pointer;flex-shrink:0;padding:0; display:flex;align-items:center;justify-content:center; transition:background .2s,transform .1s; } .composer #send-btn:hover{background:var(--accent-hover);} .composer #send-btn:active{transform:scale(.94);} /* ---------- system messages (e.g. ownership transfer) ---------- */ .msg-system{ display:flex;justify-content:center;margin:10px 0;animation:fadeIn .25s ease; } .msg-system-text{ background:var(--panel);border:1px solid #24303d;color:var(--muted2); font-size:12.5px;padding:5px 12px;border-radius:10px; max-width:80%;text-align:center;line-height:1.4; } /* ---------- message actions (react / reply / edit / delete) ---------- */ /* WhatsApp-style floating action bar: absolutely overlaid on the bubble so it can NEVER squeeze the message text (inline flex used to crush short messages like "hi" down to one character per line on narrow screens) */ .msg-actions{ display:none;gap:4px;flex-wrap:wrap;justify-content:center;flex-shrink:0; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); max-width:min(320px,calc(100vw - 16px)); background:var(--panel3);border:1px solid var(--border);border-radius:10px;padding:3px; z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.4); } .msg:hover .msg-actions,.msg-actions:hover,.msg.show-actions .msg-actions{display:flex;} .action-btn{ background:none;border:none;color:var(--text2);font-size:14px;width:30px;height:30px; border-radius:8px;cursor:pointer;transition:background .15s,color .15s; } .action-btn:hover{background:var(--panel2);color:var(--text);} .action-btn.danger:hover{color:var(--danger);} /* floating emoji picker */ .react-picker{ position:fixed;z-index:1100;display:flex;flex-wrap:wrap;gap:2px;background:var(--panel); border:1px solid var(--border);border-radius:14px;padding:6px;max-width:calc(100vw - 16px); box-shadow:0 8px 30px rgba(0,0,0,.5);animation:fadeIn .15s ease; } .react-option{ background:none;border:none;font-size:22px;width:38px;height:38px;border-radius:10px; cursor:pointer;transition:transform .12s,background .12s; } .react-option:hover{background:var(--panel2);transform:scale(1.18);} .react-option.active{background:var(--accent-soft);outline:2px solid var(--accent);outline-offset:-1px;} .react-remove{ background:none;border:none;color:var(--danger);font-size:12.5px;padding:7px 10px; cursor:pointer;border-bottom:1px solid var(--border);margin-bottom:4px;display:block;width:100%; text-align:left;border-radius:8px;font-weight:600; } .react-remove:hover{background:var(--panel2);} /* heart burst when reacting via long-press (WhatsApp-style pop) */ .burst-wrap{position:absolute;bottom:6px;right:12px;width:0;height:0;pointer-events:none;z-index:6;} .msg.incoming .burst-wrap{right:auto;left:12px;} .burst-heart{ position:absolute;bottom:0;left:0;opacity:0;line-height:1; will-change:transform,opacity;animation:burstFly .9s ease-out forwards; text-shadow:0 2px 8px rgba(0,0,0,.4); } /* MAIN burst particle: the selected emoji, big, pops straight up while the small accent hearts orbit out around it */ .burst-main{ position:absolute;bottom:0;left:0;opacity:0;line-height:1;z-index:1; font-size:42px;will-change:transform,opacity; animation:burstMain .95s ease-out forwards; text-shadow:0 3px 14px rgba(0,0,0,.45); } @keyframes burstFly{ 0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0deg);} 12%{opacity:1;transform:translate(0,-3px) scale(1.15) rotate(0deg);} 100%{opacity:0;transform:translate(var(--dx,24px),var(--dy,-46px)) scale(.85) rotate(var(--rot,0deg));} } @keyframes burstMain{ 0%{opacity:0;transform:translate(-50%,8px) scale(.4) rotate(-8deg);} 18%{opacity:1;transform:translate(-50%,-2px) scale(1.3) rotate(4deg);} 100%{opacity:0;transform:translate(-50%,var(--dy,-74px)) scale(1.05) rotate(0deg);} } /* WhatsApp-style floating emoji (chip-tap add): the picked emoji drifts up through the chat as the big main particle, with small hearts trailing behind */ .float-react{ position:fixed;z-index:3000;pointer-events:none;line-height:1; } .float-main{ position:absolute;left:0;top:0;font-size:52px; animation:floatReact 1.6s ease-out forwards; text-shadow:0 4px 18px rgba(0,0,0,.45); will-change:transform,opacity; } .float-heart{ position:absolute;left:0;top:0;font-size:15px;opacity:0; animation:floatTrail 1.6s ease-out forwards; text-shadow:0 2px 10px rgba(0,0,0,.4); will-change:transform,opacity; } /* children are absolutely positioned inside the 0-width wrapper anchored at the bubble center, so each keyframe includes translate(-50%,...) to keep them horizontally centered on that anchor point */ @keyframes floatReact{ 0%{opacity:0;transform:translate(-50%,24px) scale(.4);} 15%{opacity:1;transform:translate(-50%,0) scale(1.15);} 100%{opacity:0;transform:translate(-50%,-160px) scale(1.05);} } @keyframes floatTrail{ 0%{opacity:0;transform:translate(-50%,8px) scale(.5);} 12%{opacity:.9;transform:translate(-50%,0) scale(.95);} 100%{opacity:0;transform:translate(-50%,-120px) scale(.8);} } @media (prefers-reduced-motion: reduce){ .burst-heart,.burst-main,.float-react{animation:none;display:none;} } /* reaction chips under the bubble */ .msg-reactions{display:flex;flex-wrap:wrap;gap:4px;margin:3px 2px 0;} .react-chip{ background:var(--panel3);border:1px solid var(--border);color:var(--text2);font-size:12px; padding:2px 8px;border-radius:12px;cursor:pointer;user-select:none; transition:background .15s,border-color .15s; } .react-chip:hover{background:var(--panel2);} .react-chip.mine{background:var(--accent-soft);border-color:var(--accent);color:#fff;} /* lightweight app toast (copy / forward feedback) */ #app-toast{ position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(8px); background:var(--border);color:var(--text);padding:9px 16px;border-radius:20px;font-size:13px; opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3000; box-shadow:0 6px 20px rgba(0,0,0,.45);white-space:nowrap;max-width:92vw; } #app-toast.show{opacity:1;transform:translateX(-50%) translateY(0);} /* forward message modal: scrollable chat list */ .forward-list{max-height:56vh;overflow-y:auto;margin-top:6px;-webkit-overflow-scrolling:touch;} .forward-row{ display:flex;align-items:center;gap:12px;width:100%;background:none;border:none; padding:9px 10px;border-radius:10px;color:var(--text);font-size:14px;cursor:pointer; text-align:left;font-family:inherit;transition:background .15s; } .forward-row:hover{background:var(--panel4);} .forward-row img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;} .forward-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .forward-tag{background:var(--accent-soft);color:var(--accent);font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 8px;flex-shrink:0;} /* members popup: message-a-member button (WhatsApp-style personal DM) */ .member-msg-btn{ width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent); display:flex;align-items:center;justify-content:center;font-size:15px; flex-shrink:0;transition:background .15s,color .15s; } .member-msg-btn:hover{background:var(--accent);color:#fff;} /* reply quote */ .msg-quote{ background:var(--panel3);border-left:3px solid var(--accent);border-radius:6px; padding:5px 9px;margin-bottom:6px;cursor:pointer; } .msg-quote-name{display:block;color:var(--accent);font-size:12.5px;font-weight:600;} .msg-quote-text{color:var(--muted);font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* edited / deleted markers */ .msg-edited{color:var(--muted);font-size:11px;font-style:italic;margin-left:6px;} .msg-deleted{color:var(--muted);font-size:13px;font-style:italic;} /* inline edit form */ .edit-form{display:flex;gap:6px;align-items:center;} .edit-input{ flex:1;min-width:0;background:var(--panel2);border:1px solid var(--accent);border-radius:8px; padding:6px 10px;color:var(--text);font-size:14px;outline:none; } .edit-save,.edit-cancel{ background:var(--panel2);border:none;color:var(--text);border-radius:8px;padding:6px 12px; font-size:13px;cursor:pointer;flex-shrink:0;transition:background .15s; } .edit-save{background:var(--accent);color:#fff;} .edit-save:hover{background:var(--accent-hover);} .edit-cancel:hover{background:var(--border);} /* reply bar above the composer */ .reply-bar{ display:flex;align-items:center;background:var(--panel3);border-top:1px solid var(--border); padding:8px 14px;gap:10px;font-size:13px; } .reply-bar-info{flex:1;min-width:0;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .reply-bar-info i{color:var(--accent);margin-right:6px;} .reply-bar-close{ background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer; padding:0 4px;transition:color .15s; } .reply-bar-close:hover{color:var(--text);} /* ---------- privacy toggle (account + group settings) ---------- */ .privacy-toggle-row{ display:flex;align-items:center;gap:14px;cursor:pointer; background:var(--panel3);border:1px solid var(--border);border-radius:12px; padding:12px 14px;margin:0; } .privacy-toggle-row input{position:absolute;opacity:0;pointer-events:none;} .privacy-toggle-info{flex:1;min-width:0;} .privacy-toggle-title{display:block;color:var(--text);font-size:14px;font-weight:600;} .privacy-toggle-sub{display:block;color:var(--muted);font-size:12px;margin-top:3px;line-height:1.45;} .privacy-switch{ flex-shrink:0;width:46px;height:26px;border-radius:14px;background:var(--border); position:relative;transition:background .2s; } .privacy-switch::after{ content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%; background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.4); } .privacy-toggle-row input:checked + .privacy-switch{background:var(--accent);} .privacy-toggle-row input:checked + .privacy-switch::after{transform:translateX(20px);} .privacy-group-form{margin-top:12px;} /* live status under the privacy switch (auto-saves on toggle) */ .privacy-current{ display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px; margin:10px 2px 0;line-height:1.4; } .privacy-current i{color:var(--accent);} .privacy-current strong{color:var(--text);font-weight:600;} /* discover groups heading on groups.php */ .discover-title i{color:var(--accent);margin-right:6px;} /* ---------- image viewer popup (WhatsApp-style full-screen photo) ---------- */ .image-viewer{ display:none;position:fixed;inset:0;z-index:3000; background:rgba(0,0,0,.92);align-items:center;justify-content:center; animation:fadeIn .15s ease; } .image-viewer img{ max-width:94vw;max-height:90vh;border-radius:8px;object-fit:contain; box-shadow:0 12px 60px rgba(0,0,0,.6); } .image-viewer-close{ position:absolute;top:calc(14px + env(safe-area-inset-top));right:18px; background:rgba(255,255,255,.12);border:none;color:#fff;font-size:24px;line-height:1; width:42px;height:42px;border-radius:50%;cursor:pointer;z-index:3001; transition:background .15s,transform .1s; } .image-viewer-close:hover{background:rgba(255,255,255,.25);} .image-viewer-close:active{transform:scale(.92);} /* ---------- media messages ---------- */ .msg-image{ max-width:280px;max-height:280px;border-radius:10px;display:block;cursor:pointer; object-fit:cover;transition:transform .15s,box-shadow .15s; } .msg-image:hover{transform:scale(1.02);box-shadow:0 4px 14px rgba(0,0,0,.45);} .bubble.img-bubble{background:none;padding:0;border-radius:0;} .bubble.img-bubble .msg-name{margin-bottom:4px;} .composer .attach-btn{ background:var(--panel2);color:var(--muted);border:none;border-radius:50%;width:44px;height:44px; margin-right:8px;font-size:17px;cursor:pointer;flex-shrink:0;transition:background .2s,color .2s,transform .1s; } .composer .attach-btn:hover{background:var(--border);color:var(--accent);} .composer .attach-btn:active{transform:scale(.94);} /* ---------- WhatsApp-style voice recorder (hold to record) ---------- */ .composer #mic-btn{ background:var(--accent);color:#fff;border:none;border-radius:50%;width:44px;height:44px; font-size:16px;cursor:pointer;flex-shrink:0;padding:0; display:flex;align-items:center;justify-content:center; transition:background .2s,transform .1s;touch-action:none;user-select:none;-webkit-user-select:none; } .composer #mic-btn:hover{background:var(--accent-hover);} .composer #mic-btn:active{transform:scale(.94);} .composer #mic-btn.recording{background:var(--danger);animation:micPulse 1.1s ease-in-out infinite;} @keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(240,97,109,.45);}50%{box-shadow:0 0 0 9px rgba(240,97,109,0);}} .composer #mic-btn[hidden],.composer #send-btn[hidden]{display:none;} /* the 3 composer file inputs (gallery / camera / document) are JS triggers only — they must never render. Some author display rules override the UA [hidden] rule (same bug class as the attach menu), so force-hide them. */ .composer input[type="file"]{display:none !important;} /* recording bar shown above the composer while holding the mic */ .voice-rec{ flex:1 1 100%;display:flex;align-items:center;gap:10px; background:#172431;border:1px solid var(--border);border-radius:22px; padding:7px 14px;margin-bottom:8px;font-size:13px;color:var(--muted2); transition:border-color .2s,background .2s; } .voice-rec[hidden]{display:none;} .voice-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);flex-shrink:0;animation:recDot 1s ease-in-out infinite;} @keyframes recDot{0%,100%{opacity:1;}50%{opacity:.35;}} .voice-rec-timer{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;min-width:34px;} .voice-rec-hint{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .voice-rec-cancel{background:none;border:none;color:var(--muted2);font-size:14px;cursor:pointer;padding:4px;flex-shrink:0;} .voice-rec-cancel:hover{color:var(--text);} .voice-rec.cancelling{background:#3a2430;border-color:var(--danger);} .voice-rec.cancelling .voice-rec-hint{color:var(--danger);} .voice-rec.cancelling .voice-rec-dot{background:#ff8a94;} /* ---------- voice message bubble (WhatsApp-style player) ---------- */ .msg-voice{display:flex;align-items:center;gap:10px;min-width:200px;max-width:270px;padding:2px 0;} .voice-play{ width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0; background:rgba(255,255,255,.14);color:#fff;font-size:13px; display:flex;align-items:center;justify-content:center; transition:background .15s,transform .1s; } .voice-play:hover{background:rgba(255,255,255,.24);} .voice-play:active{transform:scale(.94);} .voice-play.playing{background:var(--accent);} .voice-wave{display:flex;align-items:center;gap:2.5px;height:22px;flex:1;min-width:0;} .voice-wave i{width:3px;border-radius:2px;background:currentColor;opacity:.55;height:8px;} .voice-wave i:nth-child(2){height:13px;}.voice-wave i:nth-child(3){height:10px;} .voice-wave i:nth-child(4){height:17px;}.voice-wave i:nth-child(5){height:12px;} .voice-wave i:nth-child(6){height:15px;}.voice-wave i:nth-child(7){height:9px;} .voice-wave i:nth-child(8){height:16px;}.voice-wave i:nth-child(9){height:11px;} .voice-wave i:nth-child(10){height:14px;}.voice-wave i:nth-child(11){height:8px;} .voice-wave i:nth-child(12){height:15px;}.voice-wave i:nth-child(13){height:12px;} .voice-wave i:nth-child(14){height:17px;}.voice-wave i:nth-child(15){height:10px;} .voice-wave i:nth-child(16){height:13px;}.voice-wave i:nth-child(17){height:9px;} .voice-wave i:nth-child(18){height:15px;}.voice-wave i:nth-child(19){height:11px;} .voice-wave i:nth-child(20){height:14px;} .voice-wave.playing i{animation:eqBar .8s ease-in-out infinite;} @keyframes eqBar{0%,100%{transform:scaleY(.5);}50%{transform:scaleY(1.5);}} .voice-dur{font-size:12px;color:#a9b8c9;font-variant-numeric:tabular-nums;min-width:32px;text-align:right;flex-shrink:0;} .voice-audio{display:none;} /* ---------- landing page ---------- */ .landing{ height:100vh;height:100dvh;display:flex;flex-direction:column;overflow-y:auto; -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain; background:var(--landing-bg); } .landing-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;} .landing-logo{color:var(--text);font-size:20px;font-weight:700;letter-spacing:.5px;} .landing-logo i{color:var(--accent);margin-right:8px;} .landing-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;} .landing-hero-icon{font-size:72px;color:var(--accent);margin-bottom:18px;animation:float 3s ease-in-out infinite;} .landing-hero h1{color:var(--text);font-size:48px;font-weight:700;margin-bottom:10px;letter-spacing:1px;} .landing-hero p{color:var(--muted);font-size:17px;max-width:460px;line-height:1.6;margin-bottom:26px;} .landing-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:0 28px 40px;max-width:960px;margin:0 auto;width:100%;} .feature-card{ background:var(--panel);border:1px solid var(--panel5);border-radius:12px;padding:20px; text-align:center;transition:transform .15s,border-color .15s; } .feature-card:hover{transform:translateY(-3px);border-color:var(--accent);} .feature-card i{font-size:28px;color:var(--accent);margin-bottom:10px;} .feature-card h3{color:var(--text);font-size:16px;margin-bottom:6px;} .feature-card p{color:var(--muted);font-size:13.5px;line-height:1.5;} .landing-footer{text-align:center;color:#5e6b7a;font-size:13px;padding:20px;} /* ---------- profile popup ---------- */ .modal-overlay{ display:none;position:fixed;inset:0;background:rgba(0,0,0,.65); align-items:center;justify-content:center;z-index:1000; } .profile-modal{ background:var(--panel);border-radius:14px;padding:26px 28px;width:320px;max-width:90%; text-align:center;position:relative;box-shadow:0 10px 40px rgba(0,0,0,.5);animation:fadeIn .2s ease; } .profile-modal-avatar{width:110px;height:110px;border-radius:50%;object-fit:cover;margin-bottom:12px;} .profile-modal-name{color:var(--text);font-size:20px;font-weight:600;word-wrap:break-word;} .profile-modal-status{color:var(--success);font-size:13px;margin:4px 0 10px;} .profile-modal-status.offline{color:var(--muted);} .profile-modal-bio{ color:var(--text2);font-size:14px;background:var(--panel3);border-radius:8px; padding:10px 12px;margin:10px 0;word-wrap:break-word; } .profile-modal-meta{display:flex;justify-content:center;gap:16px;color:var(--muted);font-size:13px;margin:8px 0 4px;flex-wrap:wrap;} .profile-modal-meta i{color:var(--accent);margin-right:4px;} .profile-modal-actions{margin-top:16px;} .profile-modal-actions .btn-secondary{width:100%;} .modal-close{ position:absolute;top:10px;right:14px;background:none;border:none; color:var(--muted);font-size:24px;line-height:1;cursor:pointer;transition:color .2s; } .modal-close:hover{color:var(--text);} /* ---------- mobile keyboard handling (visualViewport) ---------- body.kb-open is set by watchMobileKeyboard() in js/chat.js while the on-screen keyboard is up. The .app height is also set inline to the visual viewport height, so the composer stays above the keyboard. */ body.kb-open .attach-menu,body.kb-open .emoji-panel{ bottom:calc(82px + var(--kb-inset,0px)); } /* ---------- mobile bottom navigation ---------- */ .bottom-nav{display:none;} @media (max-width:768px){ .bottom-nav{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900; background:var(--panel);border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 12px rgba(0,0,0,.35); } .bottom-nav-item{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;padding:8px 4px;color:var(--muted);font-size:11px;min-height:54px; transition:color .15s;text-decoration:none;position:relative; } .bottom-nav-item i{font-size:19px;} .bn-icon-wrap{position:relative;display:inline-flex;} .bottom-nav-badge{ position:absolute;top:-5px;right:-10px;background:var(--danger);color:#fff; border-radius:10px;min-width:16px;height:16px;line-height:16px;padding:0 5px; font-size:10px;font-weight:700;text-align:center;display:inline-flex; align-items:center;justify-content:center;border:1.5px solid var(--panel); animation:badgePop .3s ease;box-sizing:content-box; } @keyframes badgePop{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}} .bottom-nav-item.active{color:var(--accent);} .bottom-nav-item:active{color:var(--text);} /* clearance so content isn't hidden behind the fixed nav */ body.has-bottom-nav{padding-bottom:calc(60px + env(safe-area-inset-bottom));} body.has-bottom-nav .sidebar{padding-bottom:calc(60px + env(safe-area-inset-bottom));} body.has-bottom-nav .page-wrap{padding-bottom:calc(80px + env(safe-area-inset-bottom));} } /* ---------- standalone pages (group, nearby, forms) ---------- */ .page-wrap{ height:100vh;height:100dvh;background:var(--bg);display:flex;flex-direction:column;align-items:center; padding:40px 16px;padding-top:calc(40px + env(safe-area-inset-top));overflow-y:auto; -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:thin; } .page-card{ width:100%;max-width:560px;background:var(--panel);border-radius:14px; padding:26px 28px;box-shadow:0 8px 30px rgba(0,0,0,.4); } .page-card h2{color:var(--text);font-size:22px;margin-bottom:4px;} .page-card .page-sub{color:var(--muted);font-size:14px;margin-bottom:20px;} .page-card label{display:block;color:var(--text2);font-size:13px;margin:14px 0 6px;} .page-card input[type=text],.page-card input[type=search],.page-card input[type=password],.page-card input[type=email],.page-card textarea,.page-card select{ width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:8px; padding:10px 12px;color:var(--text);font-size:14px;outline:none;font-family:inherit; } .page-card input:focus,.page-card textarea:focus,.page-card select:focus{border-color:var(--accent);} .page-card textarea{resize:vertical;min-height:70px;} .page-card .btn-primary{width:100%;margin-top:22px;font-size:15px;} .page-actions{display:flex;gap:10px;margin-top:22px;} .page-actions .btn-primary,.page-actions .btn-secondary{flex:1;margin-top:0;} /* ---------- people page search (people.php) ---------- */ .people-search-form{ display:flex;gap:8px;margin-bottom:16px; } .people-search-wrap{ flex:1;min-width:0;position:relative; } .people-search-wrap .fa-search{ position:absolute;left:13px;top:50%;transform:translateY(-50%); color:var(--muted);font-size:14px;pointer-events:none; } /* input specificity must beat .page-card input[type=text] (0,2,1) so the pill radius + left padding for the search icon actually apply */ .people-search-form .people-search-wrap input{ width:100%;background:var(--panel2);border:1px solid var(--border); border-radius:20px;padding:10px 14px 10px 36px;color:var(--text); font-size:14px;outline:none;font-family:inherit; transition:border-color .2s,background .2s; } .people-search-form .people-search-wrap input:focus{background:var(--border);border-color:#3b4a5c;} .people-search-form .people-search-wrap input::placeholder{color:var(--muted);} .people-search-form .btn-primary{ flex-shrink:0;width:auto;margin-top:0;border-radius:20px; padding:10px 18px;font-size:14px; } @media (max-width:480px){ .people-search-form .btn-primary{padding:10px 14px;font-size:13px;} } /* ---------- members popup (group chats) ---------- */ .header-status-clickable{cursor:pointer;} .header-status-clickable:hover{color:var(--text);} .header-status-clickable i{font-size:10px;margin-left:3px;vertical-align:1px;} .members-modal{ background:var(--panel);border-radius:14px;width:360px;max-width:92%; max-height:80vh;display:flex;flex-direction:column;overflow:hidden; position:relative;box-shadow:0 10px 40px rgba(0,0,0,.5);animation:fadeIn .2s ease; } .members-modal-head{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0; } .members-modal-head h3{color:var(--text);font-size:16px;} .members-modal-head h3 i{color:var(--accent);margin-right:6px;} .members-modal-head .modal-close{position:static;} .members-list{flex:1;overflow-y:auto;padding:8px 6px;-webkit-overflow-scrolling:touch;} .member-row{ display:flex;align-items:center;gap:10px;padding:8px 10px; border-radius:10px;transition:background .15s; } .member-row:hover{background:var(--panel4);} .member-row img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;} .member-info{flex:1;min-width:0;} .member-name{color:var(--text);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .member-status{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px;margin-top:2px;} .member-status .chat-dot{margin:0;} .member-online-tag{ background:var(--accent-soft);color:var(--success);font-size:10.5px;font-weight:600; border-radius:6px;padding:2px 8px;flex-shrink:0; } .members-loading{color:var(--muted);font-size:13px;text-align:center;padding:24px 10px;} .members-loading i{margin-right:6px;} .members-modal-actions{padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0;} /* ---------- call history ---------- */ .call-log-row{padding:10px 14px;} .call-dir{ width:40px;height:40px;border-radius:50%;flex-shrink:0;margin-right:10px; display:flex;align-items:center;justify-content:center;font-size:15px; } .call-dir.out{background:var(--accent-soft);color:var(--accent);} .call-dir.in{background:#173a2f;color:var(--success);} .call-status-line{ display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:13px;margin-top:2px; } .call-status-text{font-weight:600;} .call-status-line.answered .call-status-text{color:var(--success);} .call-status-line.missed .call-status-text{color:var(--danger);} .call-status-line.other .call-status-text{color:var(--text2);} .call-dur{color:var(--muted);font-weight:400;} .call-time{color:var(--muted);font-size:12px;flex-shrink:0;} /* ---------- calling overlay ---------- */ .call-overlay{ position:fixed;inset:0;background:rgba(6,12,20,.94);z-index:2000; display:flex;align-items:center;justify-content:center;padding:16px; } .call-card{ width:min(420px,94vw);background:var(--panel);border-radius:18px;padding:30px 22px; text-align:center;position:relative;display:flex;flex-direction:column;align-items:center; gap:6px;box-shadow:0 16px 60px rgba(0,0,0,.6);animation:fadeIn .2s ease; } .call-avatar{ width:120px;height:120px;border-radius:50%;object-fit:cover; border:3px solid var(--accent);margin-bottom:6px; } .call-name{color:var(--text);font-size:22px;font-weight:600;} .call-status{color:var(--muted2);font-size:14px;} .call-remote-video{ width:100%;max-height:52vh;border-radius:12px;background:var(--bg); display:none;object-fit:contain; } .call-local-video{ position:absolute;right:12px;bottom:12px;width:30%;max-width:150px; border-radius:10px;border:2px solid var(--accent);background:var(--bg); display:none;object-fit:cover;z-index:2; } .call-timer{color:var(--muted);font-size:13px;font-family:monospace;min-height:18px;} .call-actions{display:flex;gap:14px;margin-top:14px;justify-content:center;flex-wrap:wrap;} .call-btn{ width:58px;height:58px;border-radius:50%;border:none;cursor:pointer; font-size:22px;color:#fff;display:flex;align-items:center;justify-content:center; transition:transform .12s,background .15s; } .call-btn:active{transform:scale(.92);} .call-answer{background:var(--success);} .call-answer:hover{background:#00c244;} .call-decline,.call-hangup{background:var(--danger);} .call-decline:hover,.call-hangup:hover{background:var(--danger-hover);} .call-mute{background:var(--panel2);} .call-mute:hover{background:var(--border);} .call-mute.off{background:var(--warning);color:#3a2f17;} .call-mute.active{background:var(--accent);color:#fff;} .call-mute.active:hover{background:var(--accent-hover);} .call-local-video.cam-off{opacity:.25;border-color:var(--danger);} .call-ended{ display:none;flex-direction:column;align-items:center;gap:12px; color:var(--text2);font-size:15px;background:var(--panel);border-radius:18px; padding:34px 30px;width:min(340px,90vw);box-shadow:0 16px 60px rgba(0,0,0,.6); } .call-ended i{font-size:44px;color:var(--muted);} .call-ended .btn-secondary{margin-top:6px;width:100%;} /* ---------- group calls (mesh, up to 4) ---------- */ .gc-overlay{ position:fixed;inset:0;background:rgba(6,12,20,.97);z-index:2100; display:flex;flex-direction:column;padding:16px; padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); } .gc-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 12px;text-align:center;} .gc-title{color:var(--text);font-size:19px;font-weight:600;} .gc-status{color:var(--muted2);font-size:13px;} .gc-grid{ flex:1;display:grid;grid-template-columns:repeat(2,1fr); gap:10px;overflow-y:auto;align-content:start; -webkit-overflow-scrolling:touch; } .gc-tile{ position:relative;background:var(--panel);border-radius:12px;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; min-height:140px;aspect-ratio:4/3; } .gc-tile.me{border:2px solid var(--accent);} .gc-tile video{width:100%;height:100%;object-fit:cover;display:block;} .gc-tile .gc-vid-off{opacity:.2;} .gc-tile .gc-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);} .gc-tile .gc-name{ position:absolute;left:8px;bottom:6px;background:rgba(0,0,0,.55); border-radius:6px;padding:2px 8px;font-size:12px;color:var(--text); max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .gc-actions{display:flex;justify-content:center;gap:16px;padding:14px 0 4px;flex-wrap:wrap;} .gc-ended{ display:none;flex-direction:column;align-items:center;gap:12px; color:var(--text2);font-size:15px;background:var(--panel);border-radius:18px; padding:34px 30px;width:min(340px,90vw);margin:auto;box-shadow:0 16px 60px rgba(0,0,0,.6); } .gc-ended i{font-size:44px;color:var(--muted);} .gc-ended .btn-secondary{margin-top:6px;width:100%;} /* group call join banner */ .gc-join-banner{ position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:2200; display:none;align-items:center;gap:12px;background:var(--panel); border:1px solid var(--border);border-radius:14px;padding:10px 14px; box-shadow:0 10px 36px rgba(0,0,0,.55);max-width:min(480px,94vw); animation:fadeIn .2s ease; } .gc-banner-img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;} .gc-banner-info{flex:1;min-width:0;} .gc-banner-title{color:var(--text);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gc-banner-sub{color:var(--muted2);font-size:12.5px;margin-top:2px;} .gc-banner-join{padding:8px 16px;flex-shrink:0;} .gc-banner-dismiss{ background:var(--panel2);border:none;color:var(--text2);border-radius:50%; width:32px;height:32px;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s; } .gc-banner-dismiss:hover{background:var(--border);color:var(--text);} /* ---------- incoming-call toast (standalone pages) ---------- */ .call-toast{ position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-160%); z-index:2300;display:flex;align-items:center;gap:12px;background:var(--panel); border:1px solid var(--border);border-radius:14px;padding:10px 14px; box-shadow:0 10px 36px rgba(0,0,0,.55);max-width:min(440px,94vw); transition:transform .35s cubic-bezier(.2,.9,.3,1.15);pointer-events:none; } .call-toast.show{transform:translateX(-50%) translateY(0);pointer-events:auto;} .call-toast-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--accent);} .call-toast-info{flex:1;min-width:0;} .call-toast-name{color:var(--text);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .call-toast-status{color:var(--muted2);font-size:12.5px;margin-top:2px;} .call-toast-actions{display:flex;gap:10px;flex-shrink:0;} .call-toast-btn{ width:44px;height:44px;border-radius:50%;border:none;cursor:pointer; color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px; transition:transform .12s,background .15s; } .call-toast-btn:active{transform:scale(.92);} .call-toast-answer{background:var(--success);} .call-toast-answer:hover{background:#00c244;} .call-toast-decline{background:var(--danger);transform:rotate(135deg);} .call-toast-decline:hover{background:var(--danger-hover);} .call-toast-decline:active{transform:rotate(135deg) scale(.92);} /* ---------- notices ---------- */ .notice-banner{ display:flex;align-items:flex-start;gap:10px;background:#3a2f17; border:1px solid var(--warning);border-radius:10px;padding:12px 14px; color:var(--warning);font-size:13px;line-height:1.5;margin:12px 0 16px; } .notice-banner i{margin-top:2px;} /* ---------- group admin badges / management ---------- */ .admin-badge{ display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600; border-radius:6px;padding:1px 7px;margin-left:6px;vertical-align:1px; } .admin-badge.creator{background:#3a2f17;color:var(--warning);} .you-badge{ display:inline-block;background:var(--panel2);color:var(--muted);font-size:11px; border-radius:6px;padding:1px 7px;margin-left:6px;vertical-align:1px; } .msg-admin-badge{ background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:600; border-radius:6px;padding:0 5px;margin-left:6px;vertical-align:1px; } .admin-edit{margin:14px 0;} .admin-edit-summary{color:var(--accent);cursor:pointer;font-size:14px;margin-bottom:8px;} .admin-edit-summary:hover{text-decoration:underline;} .admin-edit-form{margin-top:8px;} .member-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;} .member-actions .btn-secondary,.member-actions .btn-danger{white-space:nowrap;} /* ---------- granular admin permissions ---------- */ .admin-perms{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;justify-content:flex-end;} .perm-check{ display:inline-flex;align-items:center;gap:4px;cursor:pointer; background:var(--panel3);border:1px solid var(--border);border-radius:8px; padding:3px 8px;font-size:11.5px;color:var(--text2);user-select:none; transition:background .15s,border-color .15s; } .perm-check:hover{background:var(--panel2);} .perm-check input{width:13px;height:13px;accent-color:var(--accent);cursor:pointer;} .perm-check input:checked + span{color:var(--text);} .perm-chip{ display:inline-block;background:var(--panel3);border:1px solid var(--border); color:var(--text2);font-size:10.5px;border-radius:6px;padding:1px 6px; margin-right:4px;margin-top:2px; } .member-perms{margin-top:2px;} /* ---------- audit log ---------- */ .audit-row{ display:flex;align-items:flex-start;gap:12px;padding:10px 4px; border-bottom:1px solid var(--panel5); } .audit-row:last-child{border-bottom:none;} .audit-icon{ width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--panel3); color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px; } .audit-info{flex:1;min-width:0;} .audit-line{display:flex;align-items:center;justify-content:space-between;gap:10px;} .audit-action{ color:var(--warning);font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase; } .audit-time{color:var(--muted);font-size:11.5px;flex-shrink:0;} .audit-details{color:var(--text2);font-size:13px;margin-top:2px;word-wrap:break-word;} .audit-actor{color:var(--text);font-weight:600;} /* member rows / nearby cards */ .person-card{ display:flex;align-items:center;background:var(--panel3);border-radius:12px; padding:12px 14px;margin-bottom:10px;transition:background .15s; } .person-card:hover{background:var(--panel4);} .person-card img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;} .person-info{flex:1;min-width:0;margin-left:12px;} .person-name{color:var(--text);font-weight:600;font-size:15px;} .person-sub{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .person-bio-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0;} .person-bio-line .person-sub{flex:1;min-width:0;} .person-bio-line .nearby-meta{flex-shrink:0;} .person-status{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px;margin-top:2px;} .person-status .chat-dot{margin:0;} /* message info panel (WhatsApp-style: tap the ✓✓ ticks) */ .msg-tick{cursor:pointer;} .msg-info-row{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--border);font-size:14px;} .msg-info-row:last-of-type{border-bottom:none;} .msg-info-label{color:var(--muted);} .msg-info-time{color:var(--text);} .msg-info-time.muted{color:var(--muted);} .msg-info-time.read{color:#4fc3f7;} .msg-info-readers{margin-top:6px;max-height:260px;overflow-y:auto;} .msg-info-reader{display:flex;align-items:center;gap:10px;padding:7px 2px;} .msg-info-reader img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;} .msg-info-reader-name{flex:1;min-width:0;color:var(--text);font-size:14px;} /* starred messages page (WhatsApp-style) */ .starred-row{display:flex;align-items:center;gap:10px;} .starred-link{display:flex;align-items:center;flex:1;min-width:0;color:inherit;} .starred-link img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;} .starred-snippet{white-space:normal;line-height:1.35;} .starred-snippet b{color:var(--text2);font-weight:600;} .starred-time{color:var(--muted);font-size:11.5px;margin-top:2px;} .unstar-btn{background:none;border:none;color:var(--warning);font-size:15px;cursor:pointer;padding:10px;border-radius:10px;flex-shrink:0;transition:background .15s,color .15s;} .unstar-btn:hover{background:var(--panel2);color:#ffd866;} .person-btn{flex-shrink:0;} .person-btn .btn-primary{padding:8px 14px;font-size:13px;} .person-btn .btn-secondary{padding:8px 14px;font-size:13px;} .check-row{ display:flex;align-items:center;padding:8px 10px;border-radius:8px;margin-bottom:4px;transition:background .15s; } .check-row:hover{background:var(--panel3);} .check-row img{width:38px;height:38px;border-radius:50%;object-fit:cover;margin-right:12px;} .check-row span{flex:1;color:var(--text);font-size:14px;} .check-row input{width:18px;height:18px;accent-color:var(--accent);} .location-prompt{text-align:center;padding:30px 10px;} .location-prompt i{font-size:56px;color:var(--accent);margin-bottom:14px;} .location-prompt p{color:var(--muted);margin-bottom:20px;line-height:1.6;} .nearby-meta{color:var(--success);font-size:12.5px;font-weight:600;} /* ---------- account settings ---------- */ .settings-card{max-width:640px;} .settings-back{margin-bottom:16px;display:inline-flex;align-items:center;gap:8px;} .settings-back i{font-size:13px;} /* profile header card */ .settings-profile{ display:flex;align-items:center;gap:16px;background:var(--panel3);border:1px solid var(--panel5); border-radius:12px;padding:18px;margin-bottom:22px; } .settings-avatar-wrap{position:relative;flex-shrink:0;} .settings-avatar{ width:86px;height:86px;border-radius:50%;object-fit:cover; border:2px solid var(--accent);display:block;transition:border-color .15s; } .settings-avatar-wrap:hover .settings-avatar{border-color:var(--text);} .settings-camera{ position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%; background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center; font-size:13px;border:2px solid var(--panel3);transition:background .15s,transform .1s; } .settings-avatar-wrap:hover .settings-camera{background:var(--accent-hover);transform:scale(1.08);} .settings-profile-info{flex:1;min-width:0;} .settings-profile-name{color:var(--text);font-size:19px;font-weight:600;word-wrap:break-word;} .settings-profile-email{color:var(--muted);font-size:13.5px;margin-top:2px;word-wrap:break-word;} .settings-profile-status{ display:flex;align-items:center;gap:6px;color:var(--success);font-size:12.5px;font-weight:600;margin-top:8px; } .settings-profile-status.offline{color:var(--muted);} .settings-profile-status .chat-dot{margin:0;} /* ---------- appearance (theme + accent picker) ---------- */ .theme-pills{display:flex;gap:8px;flex-wrap:wrap;} .theme-pill{position:relative;cursor:pointer;} .theme-pill input{position:absolute;opacity:0;pointer-events:none;} .theme-pill span{ display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:20px; background:var(--panel2);border:1px solid var(--border);color:var(--text); font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s; } .theme-pill span i{font-size:14px;} .theme-pill input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff;} .accent-swatches{display:flex;gap:10px;flex-wrap:wrap;} .accent-swatch{position:relative;cursor:pointer;width:34px;height:34px;border-radius:50%;} .accent-swatch input{position:absolute;opacity:0;pointer-events:none;} .accent-swatch .swatch{ display:block;width:34px;height:34px;border-radius:50%; border:2px solid var(--border);transition:transform .15s,box-shadow .15s,border-color .15s; } .accent-swatch input:checked + .swatch{ transform:scale(1.15);border-color:#fff; box-shadow:0 0 0 2px var(--accent),0 2px 8px rgba(0,0,0,.35); } .swatch-blue{background:#2AABEE;} .swatch-green{background:#00c853;} .swatch-purple{background:#a370f7;} .swatch-red{background:#f0616d;} .swatch-orange{background:#f0a94f;} .swatch-pink{background:#f06595;} .appearance-actions{display:flex;align-items:center;gap:12px;margin-top:6px;} .theme-saved{color:var(--success);font-size:13px;font-weight:600;} .theme-saved.err{color:var(--danger);} /* ---------- WhatsApp-style invite link (groups) ---------- */ .invite-section{margin:14px 0;padding:14px;background:var(--panel2);border:1px solid var(--border);border-radius:12px;} .invite-title{font-weight:600;color:var(--text);margin-bottom:4px;} .invite-title i{color:var(--accent);margin-right:6px;} .invite-sub{font-size:12.5px;color:var(--muted);margin-bottom:10px;line-height:1.5;} .invite-row{display:flex;gap:8px;} .invite-input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:9px 10px;} .invite-copy{flex-shrink:0;white-space:nowrap;} /* @username lines on person cards (find people / members) */ .person-handle{font-size:12.5px;color:var(--accent);margin:1px 0 2px;} .header-handle{font-size:12px;color:var(--accent);} [data-theme="light"] .accent-swatch input:checked + .swatch{border-color:var(--panel);box-shadow:0 0 0 2px var(--accent),0 2px 8px rgba(0,0,0,.18);} .settings-profile-link{ display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--accent); font-size:13px;text-decoration:none;transition:color .15s; } .settings-profile-link:hover{color:#7fd0ff;text-decoration:underline;} /* sections */ .settings-section{ background:var(--panel3);border:1px solid var(--panel5);border-radius:12px; padding:18px 18px 20px;margin-bottom:18px; } .settings-section-title{ display:flex;align-items:center;gap:8px;color:var(--text);font-size:14px; font-weight:600;margin-bottom:14px;letter-spacing:.3px;text-transform:uppercase; } .settings-section-title i{color:var(--accent);font-size:14px;} .settings-field{margin-bottom:14px;} .settings-field:last-child{margin-bottom:0;} .settings-field label{ display:flex;align-items:center;justify-content:space-between; color:var(--text2);font-size:12.5px;margin:0 0 6px;font-weight:500; } .char-count{color:var(--muted);font-size:11px;font-weight:400;} .settings-save{width:100%;font-size:15px;padding:12px;margin-top:4px;} /* gender pills */ .gender-pills{display:flex;gap:8px;flex-wrap:wrap;} .gender-pill{position:relative;} .gender-pill input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;} .gender-pill span{ display:inline-block;padding:9px 18px;border-radius:20px;background:var(--panel2); border:1px solid var(--border);color:var(--text2);font-size:13px;cursor:pointer; transition:background .15s,border-color .15s,color .15s;user-select:none; } .gender-pill input:checked + span{background:var(--accent-soft);border-color:var(--accent);color:var(--text);font-weight:600;} .gender-pill:hover span{border-color:#3a4d61;} /* security links */ .settings-link{ display:flex;align-items:center;gap:12px;width:100%;background:none;border:none; color:var(--text);font-size:14px;padding:10px 4px;cursor:pointer;text-align:left; font-family:inherit;border-radius:8px;transition:background .15s;margin-top:6px; } .settings-link:hover{background:var(--panel4);} .settings-link-icon{ width:36px;height:36px;border-radius:50%;background:var(--panel2);color:var(--accent); display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; } .settings-link .fa-chevron-right{margin-left:auto;color:var(--muted);font-size:12px;} /* inline alerts */ .form-alert{ display:flex;align-items:center;gap:10px;border-radius:10px;padding:12px 14px; font-size:13.5px;margin-bottom:18px;line-height:1.5; } .form-alert i{flex-shrink:0;} .form-alert.success{background:#173a2f;border:1px solid var(--success);color:var(--success);} .form-alert.error{background:#3a1f28;border:1px solid var(--danger);color:var(--danger);} /* recovery modal */ .settings-modal{ background:var(--panel);border-radius:14px;padding:24px;width:400px;max-width:92%; max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain; position:relative;box-shadow:0 10px 40px rgba(0,0,0,.5);animation:fadeIn .2s ease; } .settings-modal h3{color:var(--text);font-size:17px;margin-bottom:4px;} .settings-modal h3 i{color:var(--accent);margin-right:6px;} .settings-modal-sub{color:var(--muted);font-size:13px;margin-bottom:16px;line-height:1.5;} .settings-modal label{display:block;color:var(--text2);font-size:12.5px;margin:0 0 6px;} .settings-modal textarea{ width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:8px; padding:10px 12px;color:var(--text);font-size:14px;outline:none;font-family:inherit;resize:vertical; } .settings-modal textarea:focus{border-color:var(--accent);} .settings-modal-actions{display:flex;gap:10px;margin-top:16px;} .settings-modal-actions .btn-primary,.settings-modal-actions .btn-secondary{flex:1;margin-top:0;text-align:center;} /* profile photo upload page */ .upload-card{max-width:460px;} .upload-preview{ display:flex;flex-direction:column;align-items:center;gap:10px; background:var(--panel3);border:1px solid var(--panel5);border-radius:12px;padding:22px;margin-bottom:18px; } .upload-avatar-wrap{position:relative;} .upload-avatar{ width:120px;height:120px;border-radius:50%;object-fit:cover; border:3px solid var(--accent);transition:border-color .2s,transform .2s; } .upload-avatar.previewing{ border-color:var(--success); animation:avatarPop .3s ease; } @keyframes avatarPop{0%{transform:scale(.92);}100%{transform:scale(1);}} .upload-preview-tag{ position:absolute;left:50%;bottom:-10px;transform:translateX(-50%); display:none;align-items:center;gap:4px;background:var(--success);color:#0e1621; font-size:11px;font-weight:700;border-radius:10px;padding:3px 10px; white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35); } .upload-preview-tag.show{display:inline-flex;animation:fadeIn .2s ease;} .upload-name{color:var(--text);font-size:17px;font-weight:600;} .upload-hint{color:var(--muted);font-size:12.5px;} .upload-hint i{color:var(--accent);margin-right:4px;} .page-card input[type=file]{ background:var(--panel2);border:1px dashed var(--border);border-radius:8px; padding:10px;color:var(--text2);font-size:13px;width:100%;cursor:pointer; } .page-card input[type=file]::file-selector-button{ background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);border-radius:6px; padding:6px 12px;margin-right:10px;cursor:pointer;font-size:12.5px;font-weight:600; } .upload-file-name{ color:var(--muted);font-size:12.5px;margin-top:8px;word-wrap:break-word; } .upload-file-name i{color:var(--accent);margin-right:4px;} /* WhatsApp-style file picker: the native input is an invisible overlay that covers the styled button, so the browser's 'No file selected' text never appears and the design stays consistent */ .file-pick{position:relative;display:inline-block;width:100%;} .file-pick input[type="file"]{ position:absolute;inset:0;width:100%;height:100%;opacity:0; cursor:pointer;z-index:2; } .file-pick-btn{ display:flex;align-items:center;justify-content:center;gap:8px; background:var(--accent);color:#fff;border-radius:10px;padding:11px 16px; font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s; pointer-events:none; /* clicks land on the invisible input above */ } .file-pick:hover .file-pick-btn{background:var(--accent-hover);} .file-pick:active .file-pick-btn{transform:scale(.98);} .file-pick:focus-within .file-pick-btn{outline:2px solid var(--accent);outline-offset:2px;} .file-pick-btn i{font-size:15px;} /* ---------- responsive ---------- */ @media (max-width:768px){ /* one pane at a time, like a mobile app */ .sidebar{width:100%;min-width:100%;} body.in-chat .sidebar{display:none;} /* chats.php: hide the desktop empty-state pane — the chat list IS the page on mobile */ .home-main{display:none;} .back-btn{display:inline-block;margin-right:8px;} /* chat header fits narrow screens (safe-area top on notched phones) */ .chat-header{padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));} .header-info{margin-left:10px;} .header-icon-btn{margin-left:10px;} .header-menu-wrap{margin-left:10px;} .header-handle,.header-about{max-width:100%;} /* bigger touch targets */ .chat-list li a{padding:12px 14px;} .sidebar-actions a{padding:6px 8px;margin-left:6px;font-size:19px;} .header-actions a{padding:8px;margin-left:8px;font-size:19px;} .composer input{font-size:16px;} /* prevents iOS auto-zoom on focus */ .sidebar-search input{font-size:16px;} .composer button,.composer .attach-btn{width:46px;height:46px;} /* chat view */ .messages{padding:12px 12px;} .bubble{max-width:82%;} .msg-image{max-width:220px;max-height:220px;} .msg-avatar{width:28px;height:28px;} /* profile popup becomes a bottom sheet */ .modal-overlay{align-items:flex-end;} .profile-modal,.search-modal{ width:100%;max-width:100%;border-radius:16px 16px 0 0; padding-bottom:calc(26px + env(safe-area-inset-bottom)); animation:sheetUp .25s ease; } @keyframes sheetUp{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}} /* standalone pages */ .page-wrap{padding:24px 12px;padding-top:calc(24px + env(safe-area-inset-top));} .page-card{padding:20px 18px;} .page-card h2{font-size:20px;} /* settings */ .settings-profile{padding:14px;gap:12px;} .settings-avatar{width:68px;height:68px;} .settings-camera{width:27px;height:27px;font-size:12px;} .settings-profile-name{font-size:17px;} .settings-section{padding:14px;} .settings-back{margin-bottom:12px;} .check-row{padding:12px 8px;} .check-row img{width:40px;height:40px;} .check-row input{width:20px;height:20px;} .person-card{padding:10px 12px;} .person-card img{width:46px;height:46px;} .person-btn .btn-primary,.person-btn .btn-secondary{padding:8px 12px;font-size:12.5px;} /* empty state */ .empty-state i{font-size:54px;} .empty-state h2{font-size:22px;} /* active call: smaller controls so 5 fit on one line */ .call-card{padding:22px 14px;} .call-avatar{width:96px;height:96px;} .call-btn{width:52px;height:52px;font-size:20px;} .call-actions{gap:10px;margin-top:12px;} .call-local-video{width:34%;max-width:110px;} /* landing */ .landing-nav{padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));} .landing-hero{padding:30px 16px;} .landing-hero h1{font-size:38px;} .landing-hero-icon{font-size:58px;} .landing-features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:0 16px 28px;} .landing-footer{padding:16px;} } @media (max-width:480px){ .sidebar-avatar{width:38px;height:38px;} .chat-avatar{width:46px;height:46px;margin-right:10px;} .chat-name{font-size:14px;} /* keep the 5 sidebar header actions from crushing the name on small phones */ .sidebar-header{padding:8px 10px;} .sidebar-actions a{font-size:16px;margin-left:8px;padding:4px;} .sidebar-sub{font-size:11px;} .chat-line{gap:4px;} .chat-preview{font-size:12.5px;} .chat-badge,.missed-call-badge,.avatar-unread-badge{min-width:18px;height:18px;line-height:18px;font-size:10.5px;padding:0 5px;} .avatar-online-dot{width:12px;height:12px;border-width:2px;} .missed-call-badge{min-width:20px;line-height:1;} .header-avatar{width:36px;height:36px;} .header-name{font-size:15px;} .header-about{font-size:11.5px;} .header-status{font-size:11.5px;} .bubble{max-width:88%;font-size:14.5px;} .msg-time{font-size:10px;} .composer{padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom));} .person-sub{white-space:normal;overflow:visible;text-overflow:clip;} .person-bio-line{align-items:flex-start;} .person-status{font-size:11px;} .profile-modal-avatar{width:92px;height:92px;} .profile-modal-name{font-size:18px;} /* settings / profile management stack on phones */ .settings-profile{flex-direction:column;text-align:center;align-items:center;gap:10px;padding:16px 12px;} .settings-profile-info{width:100%;display:flex;flex-direction:column;align-items:center;} .settings-profile-name{font-size:17px;} .settings-profile-email{font-size:12px;} .settings-modal{padding:20px 16px;width:100%;max-width:94%;} .settings-field label{font-size:12.5px;} .page-card .settings-section{padding:14px 12px;} .landing-hero h1{font-size:32px;} .landing-hero p{font-size:15px;} .feature-card{padding:16px;} } /* ---------- @username handles + QR codes ---------- */ .profile-modal-handle{color:var(--accent);font-size:14.5px;font-weight:600;margin:2px 0 6px;text-align:center;} .settings-profile-handle{color:var(--accent);font-size:13.5px;font-weight:600;margin:2px 0 4px;} .settings-hint{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:2px;} .qr-modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:26px;width:340px;max-width:92vw;box-shadow:0 12px 40px rgba(0,0,0,.5);} .qr-modal h3{color:var(--text);font-size:19px;margin:0 0 4px;text-align:center;} .qr-modal h3 i{color:var(--accent);margin-right:6px;} .qr-modal-sub{color:var(--muted);font-size:13px;text-align:center;margin:0 0 16px;} .qr-box{display:flex;justify-content:center;align-items:center;background:#fff;border-radius:12px;padding:14px;margin:0 auto 14px;width:fit-content;} .qr-box canvas,.qr-box img{display:block;max-width:100%;} .qr-modal-link{color:#aeb7c2;font-size:12.5px;word-break:break-all;text-align:center;margin:0 0 16px;line-height:1.5;} .settings-modal .qr-box{margin-top:4px;} .settings-modal .qr-modal-link{margin-top:-4px;} /* (composer icon styles moved into the .composer-pill block above) */ /* blocked composer banner (private chats) */ .composer-blocked{ flex:1;background:var(--panel3);border:1px solid var(--border);border-radius:20px; padding:11px 16px;color:var(--muted2);font-size:13.5px;text-align:center;user-select:none; } .composer-blocked i{color:var(--danger);margin-right:6px;} /* attach menu (camera / gallery / document / location / contact) */ /* CRITICAL: author display:flex/grid overrides the UA [hidden]{display:none}, so without these rules the attach menu / emoji panel stay stuck visible and overlap the typing area. These !important rules make `hidden` work. */ .attach-menu[hidden],.emoji-panel[hidden]{display:none !important;} .attach-menu{ position:fixed;left:50%;transform:translateX(-50%);bottom:76px;z-index:1200; width:min(430px,calc(100vw - 20px)); background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:12px; box-shadow:0 12px 36px rgba(0,0,0,.55);animation:fadeIn .15s ease; display:grid;grid-template-columns:repeat(5,1fr);gap:4px; } .attach-item{ display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none; color:#e8edf2;font-size:11.5px;padding:10px 2px;border-radius:12px;cursor:pointer; transition:background .15s,color .15s,transform .1s; } .attach-item:hover{background:var(--panel2);color:var(--accent);} .attach-item:active{transform:scale(.94);} .attach-item i{ width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center; color:#fff;font-size:18px;background:var(--border); /* fallback if no tint matches */ transition:transform .15s,filter .15s;flex-shrink:0; } .attach-item:hover i{transform:scale(1.12);filter:brightness(1.15);} /* WhatsApp-style tinted circles per action */ .attach-item[data-attach="camera"] i{background:#4f6d8f;} .attach-item[data-attach="gallery"] i{background:#3e7b52;} .attach-item[data-attach="document"] i{background:#8a5a2b;} .attach-item[data-attach="location"] i{background:#c0523d;} .attach-item[data-attach="contact"] i{background:#5a5ad0;} /* emoji picker panel */ .emoji-panel{ position:fixed;left:50%;transform:translateX(-50%);bottom:76px;z-index:1200; width:min(430px,calc(100vw - 20px)); background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:10px; box-shadow:0 12px 36px rgba(0,0,0,.55);animation:fadeIn .15s ease; display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:280px;overflow-y:auto; } .emoji-btn{ background:none;border:none;font-size:20px;width:36px;height:36px;border-radius:8px; cursor:pointer;transition:background .12s,transform .12s; } .emoji-btn:hover{background:var(--panel2);transform:scale(1.22);} /* ---------- rich message bubbles: document / location / contact ---------- */ .msg-doc{display:flex;align-items:center;gap:12px;min-width:190px;max-width:270px;} .msg-doc-icon{ width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.18);color:var(--accent); display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; } .msg-doc-info{display:flex;flex-direction:column;gap:2px;min-width:0;} .msg-doc-name{ font-size:13.5px;font-weight:600;color:var(--text);word-break:break-all; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .msg-doc-dl{font-size:12px;color:var(--accent);text-decoration:none;} .msg-doc-dl:hover{text-decoration:underline;} .msg-loc{display:flex;align-items:flex-start;gap:12px;min-width:190px;max-width:270px;} .msg-loc>i{font-size:26px;color:var(--danger);flex-shrink:0;margin-top:2px;} .msg-loc-info{display:flex;flex-direction:column;gap:2px;min-width:0;} .msg-loc-label{font-size:13.5px;font-weight:600;color:var(--text);} .msg-loc-coords{font-size:11.5px;color:var(--muted);} .msg-loc-map{font-size:12px;color:var(--accent);text-decoration:none;} .msg-loc-map:hover{text-decoration:underline;} .msg-contact{display:flex;align-items:flex-start;gap:12px;min-width:190px;max-width:270px;} .msg-contact>i{font-size:30px;color:var(--accent);flex-shrink:0;} .msg-contact-info{display:flex;flex-direction:column;gap:2px;min-width:0;} .msg-contact-name{font-size:14px;font-weight:600;color:var(--text);} .msg-contact-phone,.msg-contact-email{font-size:12.5px;color:var(--text2);} .msg-contact-phone i,.msg-contact-email i{color:var(--muted);margin-right:5px;} .msg-contact-save{font-size:12px;color:var(--accent);text-decoration:none;margin-top:2px;} .msg-contact-save:hover{text-decoration:underline;} /* ---------- share-location / contact / report modals: inputs + select ---------- */ .settings-modal input[type=text],.settings-modal input[type=tel],.settings-modal input[type=email],.settings-modal select{ width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:8px; padding:10px 12px;color:var(--text);font-size:14px;outline:none;margin-bottom:14px; box-sizing:border-box;font-family:inherit; } .settings-modal input:focus,.settings-modal select:focus{border-color:var(--accent);} .settings-modal select{ appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 12px center;padding-right:34px; } .settings-modal select option{background:var(--panel);color:var(--text);} @media (max-width:768px){ .emoji-panel{grid-template-columns:repeat(7,1fr);max-height:240px;bottom:82px;} .attach-menu{bottom:82px;} .msg-doc,.msg-loc,.msg-contact{min-width:150px;max-width:230px;} } @media (max-width:480px){ /* chat header: compact for small phones */ .chat-header{padding:7px 8px;padding-top:calc(7px + env(safe-area-inset-top));} .back-btn{font-size:18px;margin-right:4px;} .header-avatar{width:34px;height:34px;} .header-name{font-size:15px;} .header-status{font-size:12px;} .header-handle,.header-about{font-size:11.5px;} .header-icon-btn{font-size:16px;margin-left:8px;} .header-menu-wrap{margin-left:8px;} .composer{padding:6px 10px;padding-bottom:calc(6px + env(safe-area-inset-bottom));} .composer #emoji-btn,.composer #attach-btn{width:42px;height:42px;font-size:17px;} .composer #mic-btn,.composer #send-btn{width:42px;height:42px;} .attach-menu{bottom:76px;} .emoji-panel{bottom:76px;grid-template-columns:repeat(6,1fr);} .msg-doc,.msg-loc,.msg-contact,.msg-voice{min-width:150px;max-width:220px;} .drop-overlay-box{padding:30px 34px;} .drop-overlay-box i{font-size:40px;} .drop-overlay-box p{font-size:17px;} } /* ---------- drag & drop file upload overlay ---------- */ .drop-overlay{ position:fixed;inset:0;z-index:2400; background:rgba(14,22,33,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center; animation:fadeIn .15s ease;pointer-events:none; } .drop-overlay[hidden]{display:none;} .drop-overlay-box{ display:flex;flex-direction:column;align-items:center;gap:10px; padding:42px 56px;border:3px dashed var(--accent);border-radius:22px; background:rgba(42,171,238,.08); } .drop-overlay-box i{font-size:52px;color:var(--accent);animation:float 3s ease-in-out infinite;} .drop-overlay-box p{font-size:20px;font-weight:700;color:var(--text);margin:0;} .drop-overlay-box span{font-size:12.5px;color:var(--muted2);} /* ---------- delete for me / everyone ---------- */ .settings-modal-actions .btn-primary,.settings-modal-actions .btn-secondary{flex:1;margin-top:0;text-align:center;} /* ---------- archived chats ---------- */ .archived-folder{ margin:0 10px 4px;border-radius:12px;background:var(--panel);border:1px solid var(--panel5); } .archived-folder a{display:flex;align-items:center;padding:10px 12px;} .archived-folder:hover{background:var(--panel3);border-color:var(--accent);} .archived-icon{ width:40px;height:40px;border-radius:50%;background:var(--panel2);color:var(--text2); display:flex;align-items:center;justify-content:center;font-size:17px;margin-right:12px;flex-shrink:0; } .lock-badge{ color:var(--warning2);font-size:12px;margin-left:6px;display:inline-flex; } .archived-page .archived-head{ display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--panel); border-bottom:1px solid var(--panel5); } .archived-page .archived-head h2{color:var(--text);font-size:18px;margin:0;} .archived-page .archived-head h2 i{color:var(--accent);margin-right:6px;} .archived-list{padding:12px;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:thin;} .archived-row{ display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--panel5); border-radius:12px;padding:8px 12px;margin-bottom:8px;transition:border-color .15s; } .archived-row:hover{border-color:var(--accent);} .archived-main{flex:1;display:flex;align-items:center;min-width:0;} .archived-row .unarchive-btn{flex-shrink:0;font-size:12.5px;padding:7px 12px;} /* ---------- locked chats (secret chat gate) ---------- */ .lock-screen{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:40px 24px;text-align:center;gap:8px; } .lock-screen-icon{ font-size:52px;color:var(--warning2);margin-bottom:10px; animation:float 3s ease-in-out infinite; } .lock-screen h3{color:var(--text);font-size:20px;margin:0;} .lock-screen p{color:var(--muted);font-size:14px;margin:0 0 12px;max-width:300px;line-height:1.5;} .lock-screen input[type=password]{ width:min(280px,80%);background:var(--panel2);border:1px solid var(--border);border-radius:20px; padding:12px 18px;color:var(--text);font-size:15px;outline:none;margin-bottom:12px; } .lock-screen input[type=password]:focus{border-color:var(--warning2);} .lock-screen .btn-primary{ width:min(280px,80%);background:var(--warning2);border-color:var(--warning2);font-size:15px; } .lock-screen .btn-primary:hover{background:#e89a35;} .lock-error{ color:var(--danger);font-size:13px;margin:0 0 10px; } .header-icon-btn.archived{color:var(--accent);} .header-icon-btn.locked{color:var(--warning2);} @media (max-width:480px){ .lock-screen-icon{font-size:44px;} .lock-screen h3{font-size:18px;} .archived-row{flex-wrap:wrap;} .archived-row .unarchive-btn{width:100%;} } /* ---- E2E banner + encrypted message placeholders ---- */ .e2e-banner{ display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:12.5px; line-height:1.45; background:linear-gradient(90deg, rgba(64,145,255,.14), rgba(64,145,255,.05)); border-bottom:1px solid rgba(64,145,255,.22); color:#a8c4e0; cursor:default; user-select:none; } .e2e-banner i.fa-lock{ color:#5ea6ff; font-size:13px; flex:none; } .e2e-banner.warn{ background:linear-gradient(90deg, rgba(255,170,0,.12), rgba(255,170,0,.04)); border-bottom-color:rgba(255,170,0,.25); color:#d9c29a; } .e2e-banner.warn i.fa-lock{ color:#ffb54d; } .e2e-banner.secure{ background:linear-gradient(90deg, rgba(62,195,133,.12), rgba(62,195,133,.04)); border-bottom-color:rgba(62,195,133,.22); color:#a9d9c0; } .e2e-banner.secure i.fa-lock{ color:#3ec385; } .e2e-banner b{ font-weight:600; } .msg .msg-encrypted{ display:inline-flex; align-items:center; gap:6px; color:#8aa2bd; font-style:italic; font-size:13.5px; } .msg .msg-encrypted i.fa-lock{ color:#7fb3ff; font-size:12px; } .msg .msg-encrypted.decrypted{ color:inherit; font-style:normal; } /* ---- E2E unlock / setup modal ---- */ .e2e-modal{ max-width:420px; text-align:center; } .e2e-modal-head{ font-size:34px; color:#5ea6ff; margin-bottom:6px; } .e2e-modal #e2e-pass{ width:100%; padding:11px 13px; margin:10px 0 6px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:var(--panel); color:var(--text); font-size:14px; box-sizing:border-box; } .e2e-modal #e2e-pass:focus{ outline:none; border-color:#5ea6ff; } .e2e-modal-err{ color:#ff6b6b; font-size:12.5px; margin:4px 0; min-height:16px; } .e2e-modal-foot{ font-size:11.5px; color:#7d8ea3; margin-top:12px; } /* ========================================================= WhatsApp-style Status (status.php) ========================================================= */ .status-page{ overflow-y:auto; } .status-card{ max-width:640px; margin:0 auto; padding:10px 0 24px; } .status-my{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); } .status-ring{ position:relative; width:54px; height:54px; border-radius:50%; flex-shrink:0; padding:3px; background:conic-gradient(from 210deg,var(--accent),#00d94b,var(--accent),var(--accent)); } .status-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:2px solid var(--panel); box-sizing:border-box; } .status-ring.seen{ background:var(--border); } .status-ring.empty{ background:transparent; border:1px dashed var(--muted); padding:2px; } .status-my-info{ flex:1; min-width:0; } .status-my-name{ font-weight:600; font-size:15px; color:var(--text); } .status-my-sub{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .status-add-btns{ display:flex; gap:8px; } .status-add-btn{ width:38px; height:38px; border-radius:50%; border:none; color:#fff; background:var(--accent); font-size:15px; cursor:pointer; transition:transform .15s,background .15s; display:flex; align-items:center; justify-content:center; } .status-add-btn:hover{ transform:scale(1.08); background:var(--accent-hover); } .status-section-title{ display:flex; align-items:center; gap:7px; padding:14px 16px 4px; font-size:12px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); } .status-section-title i{ color:var(--accent); } .status-row{ display:flex; align-items:center; gap:12px; padding:8px 14px; cursor:pointer; transition:background .15s; } .status-row:hover{ background:var(--panel4); } .status-row .status-ring{ width:48px; height:48px; } .status-row-info{ flex:1; min-width:0; } .status-row-name{ font-weight:600; font-size:15px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .status-row-sub{ font-size:12.5px; color:var(--muted); } /* text status color swatches */ .text-status-colors{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px; } .ts-color{ width:32px; height:32px; border-radius:50%; cursor:pointer; position:relative; transition:transform .15s; border:2px solid transparent; } .ts-color:hover{ transform:scale(1.15); } .ts-color.sel{ border-color:var(--text); transform:scale(1.2); } #text-status-body{ width:100%; min-height:90px; resize:vertical; background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:14px; margin-top:12px; outline:none; } #text-status-body:focus{ border-color:var(--accent); } #photo-status-caption{ width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:14px; outline:none; } #photo-status-caption:focus{ border-color:var(--accent); } /* ========================================================= Status viewer (full screen, WhatsApp-style) ========================================================= */ .sv-overlay{ position:fixed; inset:0; z-index:4000; background:#0b1117; color:#fff; display:none; flex-direction:column; overflow:hidden; } .sv-progress{ display:flex; gap:4px; padding:12px 10px 2px; } .sv-seg{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.22); overflow:hidden; } .sv-seg.done .sv-fill{ width:100% !important; background:#fff; } .sv-fill{ display:block; height:100%; width:0; background:#fff; border-radius:2px; } .sv-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; } .sv-head-info{ display:flex; align-items:center; gap:10px; min-width:0; } .sv-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.25); } .sv-head-text{ min-width:0; } .sv-name{ font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sv-time{ font-size:12px; color:rgba(255,255,255,.6); } .sv-head-actions{ display:flex; gap:6px; } .sv-btn{ width:36px; height:36px; border-radius:50%; border:none; color:#fff; font-size:15px; cursor:pointer; background:rgba(255,255,255,.12); transition:background .15s,transform .15s; display:flex; align-items:center; justify-content:center; } .sv-btn:hover{ background:rgba(255,255,255,.25); transform:scale(1.05); } .sv-body{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:0; padding:8px 0 70px; } .sv-media{ max-width:96%; max-height:100%; object-fit:contain; border-radius:6px; } .sv-text{ max-width:86%; padding:34px 26px; border-radius:14px; text-align:center; font-size:24px; font-weight:600; line-height:1.45; word-wrap:break-word; } .sv-caption{ position:absolute; left:14px; right:14px; bottom:64px; text-align:center; font-size:14px; color:rgba(255,255,255,.92); background:rgba(0,0,0,.38); padding:7px 12px; border-radius:14px; word-wrap:break-word; } .sv-foot{ position:absolute; left:0; right:0; bottom:0; padding:12px; display:flex; justify-content:center; } .sv-reply-btn{ display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; background:var(--accent); color:#fff; font-size:14px; font-weight:600; padding:9px 20px; border-radius:20px; transition:background .15s,transform .15s; } .sv-reply-btn:hover{ background:var(--accent-hover); transform:translateY(-1px); } .sv-viewers-panel{ position:absolute; right:10px; top:56px; width:250px; max-height:60%; overflow:hidden; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.5); display:flex; flex-direction:column; z-index:5; } .sv-viewers-head{ padding:10px 14px; font-weight:600; font-size:13px; border-bottom:1px solid var(--border); color:var(--text); } .sv-viewers-list{ overflow-y:auto; max-height:240px; } .sv-viewer-row{ display:flex; align-items:center; gap:10px; padding:8px 14px; } .sv-viewer-row img{ width:32px; height:32px; border-radius:50%; object-fit:cover; } .sv-viewer-row span{ color:var(--text); font-size:14px; } .sv-viewers-loading{ padding:14px; text-align:center; color:var(--muted); font-size:13px; } /* chat-list avatar ring (WhatsApp-style active status) */ .chat-avatar-ring{ position:relative; display:inline-block; flex-shrink:0; margin-right:12px; } .chat-avatar-ring::before{ content:''; position:absolute; inset:-2px; border-radius:50%; z-index:0; background:conic-gradient(from 210deg,var(--accent),#00d94b,var(--accent),var(--accent)); } .chat-avatar-ring .chat-avatar{ position:relative; z-index:1; margin-right:0; display:block; } /* light theme tweaks for the viewer panel */ [data-theme="light"] .sv-viewers-panel{ background:#fff; } [data-theme="light"] .sv-viewer-row span{ color:#1c2733; } [data-theme="light"] .sv-viewers-head{ color:#1c2733; } /* live username availability indicator (settings) */ .handle-check{ display:flex;align-items:center;gap:6px;min-height:18px;margin-top:6px; font-size:12.5px;line-height:1.35; } .handle-check.ok{color:var(--success,#00d94b);} .handle-check.taken{color:var(--danger,#f0616d);} .handle-check.checking{color:var(--muted,#8a94a3);} /* inline QR card + mini QR button (settings) */ .qr-mini-btn{ background:none;border:none;color:var(--accent);font-size:15px;cursor:pointer; margin-left:8px;vertical-align:middle;transition:transform .15s,color .15s;padding:2px; } .qr-mini-btn:hover{ transform:scale(1.15); color:#7fd0ff; } .qr-inline-card{ background:var(--panel3);border:1px solid var(--panel5);border-radius:12px; padding:18px 14px;text-align:center;margin-bottom:8px; } .qr-inline-handle{ font-weight:700; font-size:18px; color:var(--accent); word-break:break-all; } .qr-inline-sub{ font-size:12.5px; color:var(--muted); margin:4px 0 12px; } .qr-inline-box{ display:inline-block;background:#fff;border-radius:12px;padding:10px;margin-bottom:12px; box-shadow:0 2px 10px rgba(0,0,0,.25); } .qr-inline-box canvas,.qr-inline-box img{ display:block; } .qr-inline-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }