/* ========================================================= 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); } /* WhatsApp-style group marker: a small glyph pinned to the avatar's corner so the chat list tells groups apart from people at a glance. Groups have no online dot, so the bottom-right corner is always free for it. */ .group-icon-badge{ position:absolute;right:-3px;bottom:-3px;width:21px;height:21px;border-radius:50%; background:var(--accent);color:#fff;font-size:10px;line-height:21px;text-align:center; border:2.5px solid var(--panel);z-index:2;box-shadow:0 1px 4px rgba(0,0,0,.35); } /* chat rows must be positioned so the ⋮ button can anchor to them */ .chat-list li{ position:relative; } /* keep names/previews clear of the ⋮ button (always visible on touch) */ .chat-list li .chat-info{ padding-right:34px; } /* per-row ⋮ button (chat list): revealed on hover, always tappable on touch */ .chat-row-menu{ position:absolute;right:6px;top:50%;transform:translateY(-50%); background:transparent;border:none;color:var(--muted);font-size:15px; width:30px;height:30px;border-radius:50%;cursor:pointer;z-index:4; opacity:0;transition:opacity .15s,background .15s; display:flex;align-items:center;justify-content:center; } .chat-list li:hover .chat-row-menu, .chat-list li:focus-within .chat-row-menu, .chat-row-menu:focus{ opacity:.9; } .chat-row-menu:hover{ background:var(--panel4); opacity:1; } /* touch screens have no hover — keep the ⋮ visible so delete/exit stays reachable */ @media (hover:none){ .chat-row-menu{ opacity:.7; } .chat-row-menu:active{ opacity:1; background:var(--panel4); } } /* popup shown when the row ⋮ is tapped (delete chat / exit group) */ .row-menu-popup{ position:fixed;z-index:1400;min-width:190px;padding:6px; background:var(--panel2);border:1px solid var(--border);border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5);display:none; } .row-menu-item{ display:flex;align-items:center;gap:10px;width:100%;text-align:left; background:none;border:none;color:var(--text);font-size:13.5px; padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s; } .row-menu-item:hover{ background:var(--panel4); } .row-menu-item i{ width:18px;text-align:center;color:var(--muted); } .row-menu-item.danger{ color:var(--danger); } .row-menu-item.danger i{ color:var(--danger); } /* archived row: delete button sits next to Unarchive */ .archive-del-btn{ padding:8px 11px;border-radius:8px;font-size:12.5px;margin-left:8px; } /* 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;min-height: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-primary:disabled,.btn-secondary:disabled{opacity:.6;cursor:wait;transform:none;} .btn-primary:disabled .fa-spin{display:inline-block;} .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;min-height: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);flex-shrink:0;} .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); } /* WhatsApp-style reveal: hover (desktop only) OR long-press (.show-actions) shows the action bar. The :hover part is gated to hover-capable devices — on touch screens :hover is sticky (a tap keeps the pseudo-class applied), so on mobile the bar only appears when you HOLD a message (like WhatsApp). */ .msg.show-actions .msg-actions{display:flex;} @media (hover:hover) and (pointer:fine){ .msg:hover .msg-actions,.msg-actions:hover{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;} .landing-footer a{color:var(--accent);margin:0 6px;} .landing-credit{margin-top:8px;color:#5e6b7a;font-size:12.5px;} .landing-credit strong{color:var(--accent);font-weight:600;} /* SEO content block + FAQ on the landing page */ .landing-stats{ color:var(--muted);font-size:13.5px;margin-top:18px; } .landing-stats i{color:var(--success);margin-right:3px;} .landing-content{ max-width:820px;margin:0 auto;padding:8px 28px 34px; color:var(--text2);font-size:15px;line-height:1.7; } .landing-content h2{ color:var(--text);font-size:24px;font-weight:700;margin-bottom:14px; letter-spacing:.3px; } .landing-content p{margin-bottom:14px;} .landing-content strong{color:var(--text);} .landing-faq{border-top:1px solid var(--border);} .landing-faq details{ border-bottom:1px solid var(--border);padding:14px 4px; } .landing-faq summary{ color:var(--text);font-weight:600;font-size:15.5px;cursor:pointer; list-style:none;position:relative;padding-right:26px; } .landing-faq summary::-webkit-details-marker{display:none;} .landing-faq summary::after{ content:'\f078';font-family:'FontAwesome';position:absolute;right:2px;top:2px; color:var(--accent);font-size:12px;transition:transform .2s; } .landing-faq details[open] summary::after{transform:rotate(180deg);} .landing-faq details p{ color:var(--muted);font-size:14px;margin:10px 0 0;line-height:1.65; } /* ---------- 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:flex-start;justify-content:center;padding:16px; /* the card + actions must never be clipped on short screens: the overlay scrolls and the actions row sticks to the bottom (hangup always visible) */ overflow-y:auto;-webkit-overflow-scrolling:touch; } .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; margin:auto; /* centers when it fits, scrolls when the screen is short */ } .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:calc(126px + env(safe-area-inset-bottom)); /* clears the taller labeled action bar */ width:30%;max-width:150px;max-height:26vh; 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:10px;padding-top:12px;justify-content:center;flex-wrap:wrap; /* sits ABOVE the local-video PiP and sticks to the bottom of the overlay so the hangup button can never be covered or pushed off-screen */ position:sticky;bottom:0;z-index:6;background:var(--panel); border-radius:0 0 18px 18px; } .call-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;} .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-btn-label{ font-size:10.5px;color:var(--muted2);letter-spacing:.2px; white-space:nowrap;max-width:76px;overflow:hidden;text-overflow:ellipsis; } .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);} /* mute/speaker/camera/pip buttons: the base .call-btn forces a WHITE icon, so these must override the colour — in the light theme --panel2 is near-white and the white icon vanished into the white button. Icon colour now follows the theme text colour so it's always visible. */ .call-mute{background:var(--panel2);color:var(--text);border:1px solid var(--border);} .call-mute:hover{background:var(--border);color:var(--text);} .call-mute.off{background:var(--warning);color:#3a2f17;border-color:var(--warning);} .call-mute.active{background:var(--accent);color:#fff;border-color:var(--accent);} .call-mute.active:hover{background:var(--accent-hover);color:#fff;border-color: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);margin:auto;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)); overflow-y:auto;-webkit-overflow-scrolling:touch; } .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);} /* "Private group" badge next to the group name on group_info.php — shown to ALL members */ .gp-private-badge{ display:inline-block;background:var(--panel3);color:var(--muted);font-size:11px;font-weight:600; border:1px solid var(--border);border-radius:6px;padding:1px 8px;margin-left:8px;vertical-align:3px; white-space:nowrap; } .gp-private-badge i{color:var(--accent);margin-right:3px;} .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;background:var(--panel2);border:1px solid var(--border);border-radius:14px;overflow:hidden;} .admin-edit-toggle{ display:flex;align-items:center;gap:12px;width:100%;background:none;border:none; padding:14px 16px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer; font-family:inherit;text-align:left;transition:background .15s; } .admin-edit-toggle:hover{background:var(--panel4);} .admin-edit-toggle-icon{ flex-shrink:0;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);font-size:14px; } .admin-edit-chev{margin-left:auto;color:var(--muted);font-size:12px;transition:transform .2s;} .admin-edit-toggle[aria-expanded="true"] .admin-edit-chev{transform:rotate(180deg);} .admin-edit-form{padding:2px 16px 16px;border-top:1px solid var(--border);} .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);} /* ---------- WhatsApp-style two-step group creation (create_group.php) ---------- */ .cg-card{max-width:560px;} .cg-steps{display:flex;align-items:center;gap:10px;margin-bottom:18px;} .cg-step-dot{ display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:600; } .cg-step-num{ width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:var(--panel3);border:1px solid var(--border);color:var(--text2);font-size:11.5px;transition:all .2s; } .cg-step-dot.active{color:var(--text);} .cg-step-dot.active .cg-step-num{background:var(--accent);border-color:var(--accent);color:#fff;} .cg-step-line{flex:1;height:2px;background:var(--panel5);border-radius:2px;} .cg-step-line:has(~ .cg-step-dot.active){background:var(--accent);} .cg-search{position:relative;margin-bottom:14px;} .cg-search i{ position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none; } .cg-search input{ width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:20px; color:var(--text);font-size:13.5px;padding:9px 14px 9px 34px;outline:none;transition:border-color .15s; } .cg-search input:focus{border-color:var(--accent);} .cg-selected-strip{ display:flex;align-items:center;gap:8px;background:var(--panel3);border:1px solid var(--panel5); border-radius:10px;padding:8px 12px;margin-bottom:12px;flex-wrap:wrap; } /* the author display:flex above would override the UA [hidden] rule — this restores it so the strip actually hides when nobody is selected yet */ .cg-selected-strip[hidden]{display:none;} .cg-sel-avatars{display:flex;align-items:center;} .cg-sel-av{ width:28px;height:28px;border-radius:50%;background-size:cover;background-position:center; border:2px solid var(--panel3);margin-left:-8px;flex-shrink:0; } .cg-sel-av:first-child{margin-left:0;} .cg-sel-more{ width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent); display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-left:-8px; } .cg-sel-count{color:var(--text2);font-size:12.5px;font-weight:600;margin-left:auto;} .cg-members{max-height:360px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:thin;margin-bottom:6px;} .cg-no-match{text-align:center;padding:14px 0;} .member-pick{ display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;margin-bottom:2px; cursor:pointer;transition:background .15s;position:relative; } .member-pick:hover{background:var(--panel3);} .member-pick img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;} .member-pick-info{flex:1;min-width:0;display:flex;flex-direction:column;} .member-pick-name{color:var(--text);font-size:14px;font-weight:600;} .member-pick-handle,.member-pick-sub{ color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px; } .member-pick-check{ flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--border); display:inline-flex;align-items:center;justify-content:center;color:transparent;transition:all .15s; } .member-pick input{position:absolute;opacity:0;pointer-events:none;} .member-pick input:checked ~ .member-pick-check{ background:var(--accent);border-color:var(--accent);color:#fff; } .member-pick input:checked ~ .member-pick-check i{font-size:12px;} .cg-actions{display:flex;gap:10px;margin-top:16px;} .cg-actions .btn-primary,.cg-actions .btn-secondary{flex:1;margin-top:0;} .cg-next:disabled{opacity:.5;cursor:not-allowed;} .cg-photo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:18px;} .cg-photo{ position:relative;width:92px;height:92px;border-radius:50%;cursor:pointer;display:block; overflow:hidden;border:1px solid var(--panel5);transition:border-color .15s; } .cg-photo:hover{border-color:var(--accent);} .cg-photo img{width:100%;height:100%;object-fit:cover;display:block;} .cg-photo img.previewing{animation:cgPop .25s ease;} @keyframes cgPop{0%{transform:scale(.85);opacity:.6;}100%{transform:scale(1);opacity:1;}} .cg-photo-cam{ position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%; background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center; font-size:13px;border:2px solid var(--panel); } .cg-photo input{position:absolute;opacity:0;pointer-events:none;} .cg-photo-hint{color:var(--muted);font-size:12px;margin-top:10px;} .cg-people-line{ display:flex;align-items:center;gap:7px;color:var(--text2);font-size:13px;margin-top:4px;padding:10px 12px; background:var(--panel3);border:1px solid var(--panel5);border-radius:10px; } .cg-people-line i{color:var(--accent);} @media (max-width:560px){ .cg-steps{flex-wrap:wrap;} .cg-step-dot{font-size:11.5px;} .cg-actions{flex-wrap:wrap;} } .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:16px;background:var(--panel2);border:1px solid var(--border);border-radius:14px;} .invite-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;} .invite-head-icon{ flex-shrink:0;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);font-size:16px; } .invite-head-text{flex:1;min-width:0;} .invite-title{font-weight:700;color:var(--text);font-size:14.5px;} .invite-sub{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;} .invite-row{display:flex;gap:8px;align-items:center;} .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;} .invite-share{flex-shrink:0;width:auto;padding:9px 13px;white-space:nowrap;} .invite-qr{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);display:flex;flex-direction:column;align-items:center;gap:8px;} .invite-qr-box{ background:#fff;border-radius:10px;padding:8px;display:inline-flex; box-shadow:0 2px 10px rgba(0,0,0,.25); } .invite-qr-box img,.invite-qr-box canvas{display:block;} .invite-qr-hint{font-size:11.5px;color:var(--muted);} /* narrow screens: buttons wrap under the link so they never squeeze the URL */ @media (max-width:560px){ .invite-row{flex-wrap:wrap;} .invite-input{flex:1 1 100%;} .invite-copy{flex:1;} .invite-share{flex:0 0 auto;} } /* @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 NOTE: the bubble width cap lives on .msg-col (a definite-width flex child), NEVER on .bubble itself — a percentage max-width on the shrink-to-fit bubble crushes short messages and wraps the last word/character onto its own line. */ .messages{padding:12px 12px;} .msg-col{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;} .msg-col{max-width:88%;} .bubble{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; } .msg .msg-encrypted.fail{ color:#ffcf8a; cursor:pointer; border-bottom:1px dashed rgba(255,207,138,.5); } .msg .msg-encrypted.fail:hover{ color:#ffe0b0; } /* ---- 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 input[type=password], .e2e-modal input[type=text]{ width:100%; padding:11px 13px; margin:8px 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 input[type=password]:focus, .e2e-modal input[type=text]:focus{ outline:none; border-color:#5ea6ff; } /* forgot-password link (unlock view) */ .e2e-forgot{ background:none; border:none; color:var(--accent); font-size:12.5px; cursor:pointer; margin:4px 0 2px; text-decoration:underline; } .e2e-forgot:hover{ opacity:.85; } /* one-time recovery code box (shown once after fresh setup) */ .e2e-recovery-code{ font-family:Consolas,Menlo,monospace; font-size:15px; letter-spacing:1.5px; text-align:center; color:var(--accent); background:rgba(94,166,255,.08); border:1px dashed rgba(94,166,255,.45); border-radius:10px; padding:14px 10px; margin:10px 0 4px; user-select:all; word-break:break-all; } /* simple on/off switch for end-to-end encryption (account settings) */ .e2e-toggle-row{ margin:8px 0 0; } .e2e-toggle-row .privacy-switch{ background:var(--accent); } .e2e-toggle-row input:not(:checked) + .privacy-switch{ background:var(--border); } .e2e-toggle-row input:not(:checked) + .privacy-switch::after{ transform:translateX(0); } /* forgot/recovery + reset links under the switch — small, secondary */ .e2e-mini-links{ display:flex; flex-direction:column; gap:2px; margin-top:6px; } .e2e-mini-links .settings-link{ font-size:13px; } /* end-to-end encryption is always on — static badge replaces the old switch */ .e2e-always-on{ cursor:default; } .e2e-always-on .privacy-toggle-title i{ color:var(--accent); margin-right:6px; } .e2e-always-badge{ flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--success) 12%, transparent); color:var(--success); border:1px solid color-mix(in srgb, var(--success) 40%, transparent); border-radius:20px; padding:6px 12px; font-size:12px; font-weight:600; } /* non-blocking recovery-code card after a silent auto-setup */ .e2e-recovery-toast{ position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:3100; width:min(400px,94vw); background:var(--panel); border:1px solid var(--accent); border-radius:14px; padding:16px 18px; box-shadow:0 14px 44px rgba(0,0,0,.55); animation:recToastIn .28s ease; } @keyframes recToastIn{ from{ opacity:0; transform:translate(-50%,14px); } to{ opacity:1; transform:translate(-50%,0); } } .e2e-rc-head{ font-size:14px; font-weight:700; color:var(--text); margin-bottom:6px; } .e2e-rc-head i{ color:var(--accent); margin-right:6px; } .e2e-rc-body{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:10px; } .e2e-rc-code{ font-family:Consolas,Menlo,monospace; font-size:15px; letter-spacing:1.5px; text-align:center; color:var(--accent); background:rgba(94,166,255,.08); border:1px dashed rgba(94,166,255,.45); border-radius:10px; padding:12px 8px; margin:0 0 12px; user-select:all; word-break:break-all; } .e2e-rc-actions{ display:flex; gap:10px; } .e2e-rc-actions .btn-secondary,.e2e-rc-actions .btn-primary{ flex:1; margin-top:0; padding:9px 12px; font-size:13px; } .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; } /* ========================================================= Group Workspace (CRM-lite) — overview / attendance / tasks / files ========================================================= */ .ws-wrap{ padding:28px 16px; padding-top:calc(28px + env(safe-area-inset-top)); } .ws-card{ max-width:820px; padding:24px 26px; } .ws-back{ margin-bottom:16px; padding:8px 14px; font-size:13px; } .ws-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; } .ws-head h2{ font-size:20px; display:flex; align-items:center; gap:8px; } .ws-head h2 i{ color:var(--accent); } .ws-admin-tag{ display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:600; padding:5px 10px; border-radius:20px; white-space:nowrap; margin-top:4px; } /* tabs */ .ws-tabs{ display:flex; gap:6px; margin:18px 0 4px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; } .ws-tabs::-webkit-scrollbar{ display:none; } .ws-tab{ display:inline-flex; align-items:center; gap:7px; background:transparent; border:none; color:var(--muted); font-size:13.5px; font-weight:600; padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s; } .ws-tab i{ font-size:14px; } .ws-tab:hover{ color:var(--text2); } .ws-tab.active{ color:var(--accent); border-bottom-color:var(--accent); } /* panes */ .ws-pane{ display:none; padding-top:16px; } .ws-pane.active{ display:block; animation:wsIn .18s ease; } @keyframes wsIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } /* stat cards */ .ws-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px; margin-bottom:16px; } .ws-stat{ background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:14px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; } .ws-stat i{ font-size:18px; color:var(--accent); margin-bottom:4px; } .ws-stat-num{ font-size:22px; font-weight:700; color:var(--text); line-height:1; } .ws-stat-label{ font-size:11px; color:var(--muted); } /* quick attendance */ .ws-quick-att{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--panel3); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:18px; } .ws-qa-label{ font-size:13px; color:var(--text2); margin-right:4px; } .ws-qa-btn{ border:1px solid var(--border); background:var(--panel); color:var(--text2); border-radius:20px; padding:6px 12px; font-size:12.5px; cursor:pointer; transition:all .15s; } .ws-qa-btn:hover{ border-color:var(--accent); color:var(--accent); } .ws-qa-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; } /* sections + rows */ .ws-section{ margin-bottom:18px; } .ws-section-title{ font-size:13px; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; } .ws-section-title i{ margin-right:5px; color:var(--accent); } .ws-list{ display:flex; flex-direction:column; gap:8px; } .ws-empty{ color:var(--muted); font-size:13px; text-align:center; padding:18px 10px; border:1px dashed var(--border); border-radius:10px; } .ws-row{ display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; } .ws-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; } .ws-row-title{ font-size:13.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ws-row-sub{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ws-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; } .ws-dot.done{ background:var(--success); } .ws-dot.pending{ background:var(--warning); } .ws-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; flex-shrink:0; } .ws-chip.ok{ background:rgba(0,217,75,.14); color:var(--success); } .ws-chip.warn{ background:rgba(240,199,94,.14); color:var(--warning); } /* pane heads */ .ws-pane-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; } .ws-pane-head h4{ font-size:15px; color:var(--text); } .ws-pane-head h4 i{ color:var(--accent); margin-right:6px; } .ws-pane-head .btn-primary,.ws-pane-head .btn-secondary{ padding:8px 14px; font-size:12.5px; } /* filters */ .ws-pane-acts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ws-task-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; } .ws-filter{ background:var(--panel2); border:1px solid var(--border); color:var(--text2); border-radius:20px; padding:6px 12px; font-size:12.5px; cursor:pointer; transition:all .15s; } .ws-filter:hover{ border-color:var(--accent); color:var(--accent); } .ws-filter.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); } /* attendance board */ .ws-att-date{ font-size:13px; color:var(--text2); margin-bottom:8px; } .ws-att-date i{ color:var(--accent); margin-right:5px; } .ws-person{ display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:8px 12px; } .ws-person img{ width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--panel3); } .ws-person-name{ flex:1; min-width:0; font-size:13.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ws-person-name em{ font-style:normal; color:var(--muted); font-size:11px; } .ws-att-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:12px; flex-shrink:0; text-transform:capitalize; } .ws-att-badge.present{ background:rgba(0,217,75,.14); color:var(--success); } .ws-att-badge.absent{ background:rgba(240,97,109,.16); color:var(--danger); } .ws-att-badge.leave{ background:rgba(240,169,79,.16); color:var(--warning2); } .ws-att-badge.none{ background:var(--panel3); color:var(--muted); } .ws-day{ margin-bottom:12px; } .ws-day-label{ font-size:12px; color:var(--accent); font-weight:700; margin-bottom:6px; } .ws-person.sm{ padding:6px 12px; } /* tasks */ .ws-task{ background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; transition:opacity .2s; } .ws-task.done{ opacity:.62; } .ws-task.done .ws-row-title{ text-decoration:line-through; } .ws-task-head{ display:flex; align-items:center; gap:10px; } .ws-check{ width:22px; height:22px; border-radius:50%; border:2px solid var(--muted); background:transparent; color:transparent; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; transition:all .15s; } .ws-check:hover{ border-color:var(--success); } .ws-check.checked{ background:var(--success); border-color:var(--success); color:#fff; } .ws-check:disabled{ opacity:.4; cursor:not-allowed; } .ws-task-desc{ margin:8px 0 0 32px; font-size:12.5px; color:var(--text2); } .ws-due{ font-size:11px; color:var(--muted); } .ws-due.overdue{ color:var(--danger); } .ws-del{ background:transparent; border:none; color:var(--muted); cursor:pointer; padding:5px; font-size:13px; border-radius:6px; } .ws-del:hover{ color:var(--danger); background:rgba(240,97,109,.12); } /* exams */ .ws-exam-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; } .ws-exam{ display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; transition:opacity .2s; } .ws-exam.past{ opacity:.55; } .ws-exam.past .ws-row-title{ color:var(--muted); } .ws-chip.mute{ background:var(--panel3); color:var(--muted); } .ws-form-row{ display:flex; gap:12px; } .ws-form-col{ flex:1; min-width:0; } .ws-form-col label{ display:block; color:var(--text2); font-size:12.5px; margin:0 0 6px; } .ws-form-col input[type=time],.ws-form-col input[type=number]{ width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:9px 11px; color:var(--text); font-size:13.5px; } .ws-form-col input:focus{ border-color:var(--accent); outline:none; } /* files */ .ws-doc{ display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; } .ws-file-ic{ width:38px; height:38px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .ws-doc-acts{ display:flex; align-items:center; gap:4px; flex-shrink:0; } .ws-dl{ width:30px; height:30px; border-radius:8px; background:var(--panel3); color:var(--text2); display:flex; align-items:center; justify-content:center; font-size:13px; transition:all .15s; } .ws-dl:hover{ background:var(--accent); color:#fff; } /* toast */ .ws-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--panel2); color:var(--text); border:1px solid var(--border); padding:10px 18px; border-radius:22px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:all .25s; z-index:1000; } .ws-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .ws-err{ color:var(--danger); font-size:12.5px; margin-top:8px; } /* responsive */ @media (max-width:600px){ .ws-card{ padding:18px 14px; border-radius:12px; } .ws-head{ flex-direction:column; gap:8px; } .ws-stats{ grid-template-columns:repeat(2,1fr); gap:8px; } .ws-form-row{ flex-direction:column; gap:0; } .ws-quick-att{ padding:10px 12px; } .ws-tab{ padding:9px 11px; font-size:12.5px; } .ws-tab span{ display:none; } .ws-tab i{ font-size:16px; } .ws-person img{ width:30px; height:30px; } } /* ========================================================= Fresh design polish — micro-interactions & smoothness (additive: builds on the existing theme tokens) ========================================================= */ /* chat-list rows: tactile press + smooth hover lift */ .chat-list li a{ position:relative; transition:background .18s ease, transform .12s ease; } .chat-list li a:hover{ background:var(--panel4); } .chat-list li a:active{ transform:scale(.985); background:var(--panel5); } /* online dot: crisp ring so it reads on any avatar */ .chat-list li .chat-dot.online{ box-shadow:0 0 0 2px var(--panel); } /* message bubbles: springy pop-in instead of a plain fade */ @keyframes msgPop{ 0%{ opacity:0; transform:translateY(8px) scale(.96); } 60%{ opacity:1; transform:translateY(-1px) scale(1.01); } 100%{ opacity:1; transform:translateY(0) scale(1); } } .msg{ animation:msgPop .22s cubic-bezier(.2,.9,.3,1.2); } /* soft depth under bubbles */ .msg.incoming .bubble{ box-shadow:0 1px 1px rgba(0,0,0,.18); } /* keyboard focus rings (accessibility + polish) — scoped to the app shell so plain text links on the landing page don't get a loud ring */ .btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-danger:focus-visible, .ws-filter:focus-visible,.ws-tab:focus-visible,.ws-qa-btn:focus-visible, .header-icon-btn:focus-visible,.action-btn:focus-visible, .app-body a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 4px var(--accent-soft); } /* smoother button feedback everywhere */ .btn-primary,.btn-secondary,.btn-danger,.ws-qa-btn,.ws-filter,.header-icon-btn{ transition:background .18s ease, transform .12s ease, color .15s ease, border-color .15s ease; } .btn-primary:active,.btn-secondary:active,.ws-filter:active,.ws-qa-btn:active{ transform:scale(.97); } /* refined scrollbar (thin, themed, hover-highlight) */ ::-webkit-scrollbar{ width:6px; height:6px; } ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; transition:background .2s; } ::-webkit-scrollbar-thumb:hover{ background:var(--muted2); } *{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; } /* avatar micro-interactions */ .chat-avatar,.sidebar-avatar,.header-avatar,.msg-avatar{ transition:transform .15s ease, box-shadow .2s ease; } .chat-list li a:hover .chat-avatar{ transform:scale(1.05); } .header-avatar:hover{ transform:scale(1.06); box-shadow:0 0 0 3px var(--accent-soft); } /* unread/missed badges: soft pop when they appear */ @keyframes badgePop2{ 0%{ transform:scale(.5); opacity:0; } 100%{ transform:scale(1); opacity:1; } } .chat-list li .avatar-unread-badge,.chat-list li .missed-call-badge,.chat-list li .chat-badge{ animation:badgePop2 .18s ease; } /* reduced-motion accessibility: disable springy animations */ @media (prefers-reduced-motion: reduce){ .msg,.chat-list li a,.btn-primary,.btn-secondary,.ws-qa-btn,.ws-filter{ animation:none !important; transition:none !important; } } /* ---------- Organization mode (group_info.php) ---------- */ .org-section{margin:14px 0;padding:16px;background:var(--panel2);border:1px solid var(--border);border-radius:14px;} .org-cred-box{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);} .org-cred-hint{margin:0 0 12px;font-size:12.5px;color:var(--muted);line-height:1.55;} .org-cred-hint i{color:var(--accent);margin-right:4px;} .org-cred-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;} .org-cred-row:last-of-type{margin-bottom:14px;} .org-cred-label{flex:0 0 104px;font-size:12px;font-weight:600;color:var(--muted);} .org-cred-value{flex:1;display:flex;gap:6px;min-width:0;} .org-cred-value .invite-input{flex:1;min-width:0;} .org-cred-btn{flex:0 0 auto;padding:8px 12px;border-radius:10px;} @media(max-width:520px){ .org-cred-row{flex-direction:column;align-items:stretch;gap:4px;} .org-cred-label{flex:none;} } /* ---------- Group workspace: org banner + admin attendance editing ---------- */ .ws-org-banner{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--accent),var(--accent-soft,#2b5278));color:#fff;border-radius:12px;padding:11px 14px;font-size:13px;margin-bottom:14px;} .ws-org-banner i.fa-briefcase{font-size:16px;} .ws-org-banner span{flex:1;min-width:0;line-height:1.4;} .ws-org-banner a{color:#fff;font-weight:700;text-decoration:underline;white-space:nowrap;font-size:12.5px;} .ws-org-banner a:hover{opacity:.85;} .ws-att-edit{display:flex;gap:4px;margin-left:auto;flex-shrink:0;} .ws-att-edit button{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;padding:4px 9px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;text-transform:capitalize;} .ws-att-edit button:hover{background:var(--accent);border-color:var(--accent);color:#fff;} .ws-att-edit button.on{background:var(--accent);border-color:var(--accent);color:#fff;} @media(max-width:560px){ .ws-person{flex-wrap:wrap;} .ws-att-edit{margin-left:0;width:100%;justify-content:flex-end;} }