/* ════════════════════════════════════════════════════ VOICE CALL UI ════════════════════════════════════════════════════ */ /* Call button in chat header */ #call-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(68,161,148,0.12); border: 1px solid rgba(68,161,148,0.25); color: var(--teal); font-size: 16px; cursor: pointer; display: none; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 8px; transition: background 0.18s, transform 0.15s; touch-action: manipulation; } #call-btn:hover { background: rgba(68,161,148,0.22); transform: scale(1.06); } #call-btn:active { transform: scale(0.94); } #call-btn.visible { display: flex; } /* ════════════════════════════════════════════ INCOMING CALL -- full screen takeover ════════════════════════════════════════════ */ #incoming-call { display: none; } /* soft teal glow top */ /* ── Top section: avatar + name ── */ .call-pulse-ring:nth-child(2) { animation-delay: 0.6s; inset: -26px; border-color: rgba(68,161,148,0.2); } @keyframes pulseRing { 0% { transform: scale(0.92); opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } } .call-avatar-ring { width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg, #44a194 0%, #537d96 100%); display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 700; color: #fff; box-shadow: 0 8px 40px rgba(68,161,148,0.4); position: relative; z-index: 1; font-family: 'DM Sans', sans-serif; } .call-caller-name { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.02em; text-align: center; font-family: 'DM Sans', sans-serif; } .call-caller-label { font-size: 13px; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .call-caller-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #44a194; display: inline-block; animation: dotBlink 1.2s ease-in-out infinite; } @keyframes dotBlink { 0%,100%{opacity:1;} 50%{opacity:0.2;} } /* ── Bottom section: action buttons ── */ .call-actions { display: flex; gap: 48px; align-items: flex-end; } .call-action-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } .call-action-btn { width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, box-shadow 0.15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .call-action-btn:active { transform: scale(0.88); } .call-action-label { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); font-family: 'DM Sans', sans-serif; letter-spacing: 0.02em; } .call-btn-reject { background: #e05c5c; box-shadow: 0 6px 24px rgba(224,92,92,0.5); } .call-btn-accept { background: #44a194; box-shadow: 0 6px 24px rgba(68,161,148,0.55); } /* ════════════════════════════════════════════ ACTIVE CALL -- bottom sheet ════════════════════════════════════════════ */ #active-call { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99998; background: linear-gradient(180deg, rgba(15,32,39,0.97) 0%, rgba(9,26,34,0.99) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 28px 28px 0 0; border-top: 1px solid rgba(68,161,148,0.2); padding: 24px 32px; padding-bottom: max(28px, calc(16px + env(safe-area-inset-bottom, 0px))); display: none; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 -12px 48px rgba(0,0,0,0.5); } #active-call.open { display: flex; animation: callSlideUp 0.32s cubic-bezier(0.16,1,0.3,1); } @keyframes callSlideUp { from { transform: translateY(100%); opacity:0; } to { transform: translateY(0); opacity:1; } } .active-call-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); margin-bottom: 12px; } .active-call-name { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; font-family: 'DM Sans', sans-serif; } #call-timer { font-size: 13px; color: var(--teal); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; margin-bottom: 20px; } .active-call-btns { display: flex; gap: 24px; align-items: center; } .active-call-btn { width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform 0.15s, background 0.18s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .active-call-btn:active { transform: scale(0.88); } .btn-mute { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.15); } .btn-mute.muted { background: #e05c5c; border-color: #e05c5c; } .btn-speaker { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.15); } .btn-speaker.on { background: rgba(68,161,148,0.3); border-color: rgba(68,161,148,0.6); color: var(--teal); } .btn-hangup { background: #e05c5c; color: #fff; width: 68px; height: 68px; font-size: 22px; box-shadow: 0 6px 24px rgba(224,92,92,0.5); border: none; } /* call status toast inside chat header */ #call-status-bar { display: none; position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(135deg, #44a194, #3a8a7e); color: #fff; font-size: 12px; font-weight: 600; text-align: center; padding: 4px 8px; z-index: 2; letter-spacing: 0.04em; } #call-status-bar.visible { display: block; } /* ── Encrypted file bubbles ──────────────────────── */ .file-bubble { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(68,161,148,0.08); border: 1px solid rgba(68,161,148,0.2); border-radius: 12px; cursor: pointer; transition: background 0.15s; min-width: 180px; max-width: 260px; touch-action: manipulation; } .file-bubble:hover { background: rgba(68,161,148,0.14); } .file-bubble .file-icon { font-size: 28px; flex-shrink: 0; line-height: 1; } .file-bubble .file-info { flex: 1; overflow: hidden; } .file-bubble .file-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-bubble.sent .file-bubble .file-name { color: #fff; } .file-bubble .file-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .msg-bubble.sent .file-bubble { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); } .msg-bubble.sent .file-bubble:hover { background: rgba(255,255,255,0.2); } .msg-bubble.sent .file-bubble .file-meta { color: rgba(255,255,255,0.6); } .file-decrypt-btn { font-size: 11px; color: var(--teal); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; margin-top: 4px; display: block; touch-action: manipulation; } /* -- PDF Viewer Modal -------------------------------- */ #pdf-modal { display: none; position: fixed; inset: 0; z-index: 999998; background: rgba(0,0,0,0.92); flex-direction: column; } #pdf-modal.open { display: flex; } #pdf-modal-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(20,30,36,0.98); border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } #pdf-modal-title { font-size: 14px; font-weight: 600; color: #fff; font-family: 'DM Sans', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } #pdf-modal-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; flex-shrink: 0; } #pdf-modal-close:hover { background: rgba(255,255,255,0.22); } #pdf-modal-frame { flex: 1; width: 100%; border: none; background: #fff; } #pdf-modal-download { padding: 10px 16px; background: rgba(20,30,36,0.98); border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: center; flex-shrink: 0; } #pdf-modal-download a { padding: 10px 28px; border-radius: 10px; background: var(--teal); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; font-family: 'DM Sans', sans-serif; }
A 6-digit code has been sent to
or

Your Garden

Select a conversation or find new connections to start chatting.

?
--
🔒 End-to-end encrypted
🕓
Send some GIFs or stickers
and they'll appear here
?
Unknown
Incoming voice call
Decline
Accept
?
--
00:00
Mute
End
Speaker
Document
⬇ Download