/* ════════════════════════════════════════
Wave Messenger — Stylesheet
════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg-primary: #0f0f18;
--bg-secondary: #161622;
--bg-tertiary: #1e1e2e;
--bg-card: #1a1a28;
--bg-hover: #222236;
--bg-bubble-out: #5b4cdb;
--bg-bubble-in: #222236;
--text-primary: #eeeef2;
--text-secondary: #8e8eaa;
--text-tertiary: #5a5a72;
--accent: #5b4cdb;
--accent-light: #8b7fff;
--accent-glow: rgba(91, 76, 219, 0.25);
--green: #00c48c;
--red: #ff5c5c;
--orange: #ffb347;
--border: rgba(255,255,255,0.07);
--radius: 16px;
--radius-sm: 10px;
--radius-xs: 6px;
--shadow: 0 8px 40px rgba(0,0,0,0.4);
--shadow-sm: 0 2px 12px rgba(0,0,0,0.25);
--font: 'Outfit', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Light theme — activated via body.theme-light. Overrides the CSS variables, so
everywhere in the app that uses var(--bg-primary) etc automatically switches.
We keep the accent purple/gradient colors so branding stays consistent between themes. */
body.theme-light {
--bg-primary: #ffffff;
--bg-secondary: #f7f8fb;
--bg-tertiary: #eef0f5;
--bg-card: #ffffff;
--bg-hover: #e8ecf3;
--bg-bubble-out: #5b4cdb; /* keep brand purple on outgoing bubbles */
--bg-bubble-in: #f1f2f7;
--text-primary: #1a1a28;
--text-secondary: #606072;
--text-tertiary: #9193a5;
--accent-glow: rgba(91, 76, 219, 0.15);
--border: rgba(0,0,0,0.09);
--shadow: 0 8px 40px rgba(30,40,80,0.08);
--shadow-sm: 0 2px 12px rgba(30,40,80,0.06);
}
/* Comprehensive light-theme overrides. The dark-mode CSS has many literal rgba(255,255,255,x)
values for hover states, borders, bubbles etc — on a white bg they're invisible. We
override every one of these with a dark rgba equivalent. Ordered from structural → bubbles
→ interactive → edge cases. */
/* === Structure === */
body.theme-light { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
body.theme-light html { background: var(--bg-primary) !important; }
body.theme-light .sidebar { background: var(--bg-secondary) !important; border-right: 1px solid var(--border); }
body.theme-light .sidebar-header { background: var(--bg-secondary) !important; border-bottom: 1px solid var(--border); }
body.theme-light .chat-header { background: var(--bg-secondary) !important; border-bottom: 1px solid var(--border); }
body.theme-light .input-area { background: var(--bg-secondary) !important; }
body.theme-light .chat-area, body.theme-light .messages-area { background: var(--bg-primary) !important; }
body.theme-light .main-layout { background: var(--bg-primary) !important; }
/* === Text === */
body.theme-light,
body.theme-light .chat-item-name,
body.theme-light .chat-header-name,
body.theme-light .user-row-name { color: var(--text-primary) !important; }
body.theme-light .chat-item-preview,
body.theme-light .chat-header-status,
body.theme-light .user-row-phone,
body.theme-light .msg-time { color: var(--text-secondary) !important; }
/* === Hovers and active rows === */
body.theme-light .icon-btn:hover { background: rgba(0,0,0,0.06) !important; color: var(--text-primary) !important; }
body.theme-light .icon-btn { color: var(--text-secondary); }
body.theme-light .chat-item:hover { background: rgba(0,0,0,0.03) !important; }
body.theme-light .chat-item.active { background: rgba(91,76,219,0.1) !important; }
body.theme-light .user-row:hover { background: rgba(0,0,0,0.03) !important; }
/* === Message bubbles === */
/* Incoming bubbles: kill the dark gradient from the base .msg-row.in .msg-bubble rule,
use a flat light-grey. Outgoing purple stays (kept for brand). */
body.theme-light .msg-row.in .msg-bubble,
body.theme-light .msg-bubble.in {
background: var(--bg-bubble-in) !important;
background-image: none !important;
color: var(--text-primary) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 1px 4px rgba(30,40,80,0.06) !important;
}
body.theme-light .msg-row.out .msg-bubble,
body.theme-light .msg-bubble.out {
background: linear-gradient(135deg, #5b4cdb, #7c6cf0) !important;
color: #fff !important;
border: 1px solid rgba(139,127,255,0.3) !important;
}
/* Time under bubble: on light incoming it was 0.55 on dark text → greyed out but visible */
body.theme-light .msg-row.in .msg-time { color: var(--text-tertiary) !important; opacity: 1 !important; }
body.theme-light .msg-row.out .msg-time { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
/* Read checks: on outgoing purple bubble, white/light-blue checks — keep same as dark theme */
body.theme-light .msg-row.out .msg-check,
body.theme-light .msg-row.out .msg-check svg polyline { color: rgba(255,255,255,0.9) !important; stroke: rgba(255,255,255,0.9) !important; }
body.theme-light .msg-row.out .msg-check.read,
body.theme-light .msg-row.out .msg-check.read svg polyline { color: #b5e1ff !important; stroke: #b5e1ff !important; }
body.theme-light .msg-reply-block { background: rgba(91,76,219,0.07) !important; border-left-color: var(--accent) !important; }
body.theme-light .msg-reply-name { color: var(--accent) !important; }
body.theme-light .msg-reply-text { color: var(--text-secondary) !important; }
/* === Input fields === */
body.theme-light .auth-input,
body.theme-light #msgInput,
body.theme-light .input-field,
body.theme-light input[type="text"]:not(.always-dark),
body.theme-light input[type="search"]:not(.always-dark),
body.theme-light input[type="password"]:not(.always-dark),
body.theme-light input[type="email"]:not(.always-dark),
body.theme-light input[type="number"]:not(.always-dark),
body.theme-light textarea:not(.always-dark) {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
border-color: var(--border) !important;
}
body.theme-light .auth-input::placeholder,
body.theme-light .input-field::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder { color: var(--text-tertiary) !important; }
/* === Buttons === */
body.theme-light .table-btn { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; border: 1px solid var(--border); }
body.theme-light .table-btn:hover { background: var(--bg-hover) !important; }
body.theme-light .send-btn { background: var(--accent) !important; color: #fff !important; }
body.theme-light .auth-btn { background: var(--accent) !important; color: #fff !important; }
body.theme-light .input-inline-btn { color: var(--text-secondary) !important; }
body.theme-light .input-inline-btn:hover { background: rgba(0,0,0,0.05) !important; color: var(--text-primary) !important; }
/* === Modals / dropdowns === */
body.theme-light .modal-content { background: var(--bg-card) !important; color: var(--text-primary) !important; box-shadow: 0 20px 60px rgba(30,40,80,0.15); }
body.theme-light .modal-overlay { background: rgba(0,0,0,0.4) !important; }
body.theme-light .dropdown-menu,
body.theme-light .chat-ctx-menu,
body.theme-light .msg-ctx-menu { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; box-shadow: 0 10px 40px rgba(30,40,80,0.12) !important; }
body.theme-light .ctx-row:hover { background: var(--bg-hover) !important; }
/* === Cards / blocks === */
body.theme-light .date-divider { color: var(--text-tertiary) !important; background: transparent !important; }
body.theme-light .reply-bar { background: rgba(91,76,219,0.06) !important; }
body.theme-light .splash { background: var(--bg-primary) !important; }
body.theme-light .auth-container { background: var(--bg-primary) !important; }
body.theme-light .auth-card { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(30,40,80,0.08); }
/* === Status dots / badges === */
body.theme-light .status-dot { background: #cfd3dd; }
body.theme-light .status-dot.online { background: var(--green); }
body.theme-light .unread-badge { color: #fff !important; }
/* === Voice message styling === */
body.theme-light .msg-row.in .voice-play-btn { background: var(--accent) !important; color: #fff !important; }
body.theme-light .msg-row.in .voice-bar { background: rgba(91,76,219,0.2) !important; }
/* === Scrollbars === */
body.theme-light ::-webkit-scrollbar { background: transparent; }
body.theme-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
body.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
/* === Call UI — stays dark-ish for cinematic feel, but tune a few things === */
body.theme-light .call-screen { color: #fff; } /* call stays dark for calls */
/* === Admin table === */
body.theme-light .admin-table { background: var(--bg-card) !important; color: var(--text-primary) !important; }
body.theme-light .admin-table th { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border); }
body.theme-light .admin-table td { border-bottom: 1px solid var(--border); }
body.theme-light .admin-tab { color: var(--text-secondary) !important; }
body.theme-light .admin-tab.active { color: var(--accent) !important; border-bottom-color: var(--accent); }
/* === Status ring / stories === */
body.theme-light .status-ring-seen { border: 3px solid rgba(0,0,0,0.1) !important; }
body.theme-light .status-circle-add { border: 3px dashed rgba(0,0,0,0.15) !important; }
/* === Misc borders === */
body.theme-light [style*="border: 1px solid rgba(255,255,255"],
body.theme-light [style*="border:1px solid rgba(255,255,255"] { border-color: var(--border) !important; }
body.theme-light [style*="background:rgba(255,255,255,0.05)"],
body.theme-light [style*="background: rgba(255,255,255,0.05)"],
body.theme-light [style*="background:rgba(255,255,255,0.06)"],
body.theme-light [style*="background: rgba(255,255,255,0.06)"],
body.theme-light [style*="background:rgba(255,255,255,0.08)"],
body.theme-light [style*="background: rgba(255,255,255,0.08)"],
body.theme-light [style*="background:rgba(255,255,255,0.1)"],
body.theme-light [style*="background: rgba(255,255,255,0.1)"] {
background: rgba(0,0,0,0.04) !important;
}
body.theme-light [style*="border-top:1px solid rgba(255,255,255"],
body.theme-light [style*="border-top: 1px solid rgba(255,255,255"],
body.theme-light [style*="border-bottom:1px solid rgba(255,255,255"],
body.theme-light [style*="border-bottom: 1px solid rgba(255,255,255"] {
border-color: rgba(0,0,0,0.09) !important;
}
html, body { height: 100%; overflow: hidden; }
html { background: var(--bg-primary); }
body {
font-family: var(--font);
background: var(--bg-primary);
color: var(--text-primary);
}
/* dvh = dynamic viewport height — fills the visible screen area even when browser
chrome (address bar on mobile) hides and shows. Fallback to vh for older browsers. */
#app { height: 100vh; height: 100dvh; width: 100%; }
/* ── Scrollbars ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
/* ── Auth ── */
.auth-screen {
height: 100vh;
height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow-y: auto;
overflow-x: hidden;
background: var(--bg-primary);
padding: 20px;
}
.auth-card {
position: relative;
z-index: 1;
margin-bottom: 60px;
}
@media (max-width: 520px) {
.auth-screen {
align-items: flex-start;
padding: 30px 12px 80px;
}
.auth-card {
margin-bottom: 70px;
width: 100%;
}
.auth-card .auth-logo {
width: 56px; height: 56px;
border-radius: 16px;
font-size: 24px;
margin-bottom: 14px;
}
.auth-card .auth-title { font-size: 22px; }
.auth-card .auth-subtitle { font-size: 13px; margin-bottom: 20px; }
.consent-checkbox {
padding: 9px 10px !important;
font-size: 11px !important;
border-radius: 10px !important;
gap: 8px !important;
}
.consent-checkmark {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border-radius: 5px !important;
}
.consent-checkbox input:checked + .consent-checkmark::after {
width: 5px !important;
height: 9px !important;
}
.consent-text { font-size: 11px !important; }
.consent-group {
margin: 12px 0 16px !important;
gap: 6px !important;
}
.auth-ip-footer {
font-size: 9px !important;
padding: 6px 12px !important;
gap: 3px !important;
bottom: 8px !important;
border-radius: 10px !important;
flex-direction: column;
text-align: center;
white-space: normal;
max-width: 85vw;
}
.ip-footer-divider { display: none; }
.ip-footer-line svg { width: 11px; height: 11px; }
.phone-region-select {
min-width: 80px !important;
padding: 0 10px !important;
font-size: 13px !important;
}
.phone-number-input {
font-size: 14px !important;
}
}
.auth-bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.orb1 {
width: 500px; height: 500px;
background: var(--accent-glow);
top: -150px; right: -150px;
animation: orbFloat 12s ease-in-out infinite;
}
.orb2 {
width: 350px; height: 350px;
background: rgba(0,196,140,0.12);
bottom: -100px; left: -100px;
animation: orbFloat 15s ease-in-out infinite reverse;
}
.orb3 {
width: 400px; height: 400px;
background: rgba(139,127,255,0.1);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: orbFloat 18s ease-in-out infinite 3s;
}
/* Particles canvas */
.auth-particles-canvas {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
}
/* Animated auth background */
.auth-screen {
background:
radial-gradient(ellipse at 20% 50%, rgba(91,76,219,0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(139,127,255,0.08) 0%, transparent 40%),
radial-gradient(ellipse at 60% 80%, rgba(0,196,140,0.06) 0%, transparent 40%),
linear-gradient(135deg, #070712 0%, #0d0d1e 30%, #12122a 60%, #0a0a16 100%);
animation: authBgShift 20s ease-in-out infinite;
}
@keyframes authBgShift {
0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
33% { background-position: 30% 20%, 80% 40%, 20% 80%, 0% 0%; }
66% { background-position: 60% 40%, 30% 60%, 80% 40%, 0% 0%; }
}
/* ИП footer */
.auth-ip-footer {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 14px;
padding: 10px 22px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
backdrop-filter: blur(12px);
font-size: 11px;
color: var(--text-tertiary);
z-index: 2;
white-space: nowrap;
animation: fadeInUp 1s ease 0.5s both;
}
.ip-footer-line {
display: flex;
align-items: center;
gap: 7px;
}
.ip-footer-line svg { opacity: 0.45; flex-shrink: 0; }
.ip-footer-line span { letter-spacing: 0.3px; }
.ip-footer-divider {
width: 1px;
height: 16px;
background: rgba(255,255,255,0.08);
flex-shrink: 0;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Phone input with region selector */
.phone-input-row {
display: flex;
gap: 8px;
position: relative;
}
.phone-region-select {
display: flex;
align-items: center;
gap: 6px;
padding: 0 14px;
background: var(--bg-tertiary);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
min-width: 100px;
height: 47px;
font-size: 14px;
font-weight: 500;
user-select: none;
}
.phone-region-select:hover { border-color: var(--accent); background: var(--bg-hover); }
.phone-region-select svg { color: var(--text-tertiary); }
.phone-number-input {
flex: 1;
border-radius: var(--radius-sm) !important;
font-family: var(--font-mono) !important;
font-size: 16px !important;
letter-spacing: 1px;
}
/* Region dropdown */
.region-dropdown {
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 6px;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
z-index: 100;
max-height: 260px;
overflow-y: auto;
min-width: 260px;
animation: popIn 0.2s ease;
}
.region-option {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
font-size: 13px;
}
.region-option:hover { background: var(--bg-hover); }
.region-option-flag { font-size: 18px; }
.region-option-name { flex: 1; color: var(--text-primary); font-weight: 500; }
.region-option-code { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; }
/* Consent checkbox */
.consent-checkbox {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 0;
cursor: pointer;
font-size: 12px;
line-height: 1.3;
color: var(--text-primary);
user-select: none;
padding: 10px 12px;
background: rgba(91,76,219,0.06);
border: 1.5px solid rgba(91,76,219,0.15);
border-radius: 10px;
transition: all 0.25s;
}
.consent-checkbox:hover {
background: rgba(91,76,219,0.1);
border-color: rgba(91,76,219,0.3);
}
.consent-checkbox input:checked ~ .consent-text {
color: var(--text-primary);
}
.consent-checkbox input { display: none; }
.consent-checkmark {
width: 18px;
height: 18px;
min-width: 18px;
border: 2px solid rgba(91,76,219,0.4);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s;
background: var(--bg-tertiary);
flex-shrink: 0;
}
.consent-checkbox:hover .consent-checkmark {
border-color: var(--accent);
}
.consent-checkbox input:checked + .consent-checkmark {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border-color: var(--accent);
box-shadow: 0 0 12px rgba(91,76,219,0.4);
}
.consent-checkbox input:checked + .consent-checkmark::after {
content: '';
width: 6px;
height: 11px;
border: solid white;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
margin-top: -2px;
}
.consent-text {
color: var(--text-secondary);
font-weight: 500;
transition: color 0.2s;
}
.consent-text a {
color: var(--accent-light);
text-decoration: none;
font-weight: 600;
}
.consent-text a:hover { text-decoration: underline; }
.consent-group {
margin: 18px 0 22px;
display: flex;
flex-direction: column;
gap: 8px;
}
.consent-shake {
animation: consentShake 0.5s ease;
}
.consent-highlight {
border-color: rgba(255,92,92,0.6) !important;
background: rgba(255,92,92,0.08) !important;
box-shadow: 0 0 16px rgba(255,92,92,0.2);
}
.consent-highlight .consent-checkmark {
border-color: #ff5c5c !important;
box-shadow: 0 0 8px rgba(255,92,92,0.3);
}
@keyframes consentShake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-8px); }
30% { transform: translateX(8px); }
45% { transform: translateX(-6px); }
60% { transform: translateX(6px); }
75% { transform: translateX(-3px); }
90% { transform: translateX(3px); }
}
@keyframes orbFloat {
0%, 100% { transform: translate(0,0) scale(1); }
50% { transform: translate(40px, 25px) scale(1.15); }
}
.auth-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 24px;
padding: 44px 38px;
width: 420px;
max-width: 92vw;
position: relative;
z-index: 1;
box-shadow: var(--shadow);
animation: slideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
}
.auth-logo {
width: 68px; height: 68px;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 30px;
font-weight: 700;
color: white;
box-shadow: 0 8px 28px var(--accent-glow);
}
.auth-title {
font-size: 26px;
font-weight: 700;
text-align: center;
margin-bottom: 6px;
letter-spacing: -0.5px;
}
.auth-subtitle {
font-size: 14px;
color: var(--text-secondary);
text-align: center;
margin-bottom: 28px;
}
.auth-input-group { margin-bottom: 18px; }
.auth-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 7px;
}
.auth-input {
width: 100%;
padding: 13px 15px;
background: var(--bg-tertiary);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font);
font-size: 15px;
outline: none;
transition: var(--transition);
}
.auth-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.auth-input::placeholder { color: var(--text-tertiary); }
.auth-btn {
width: 100%;
padding: 13px;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border: none;
border-radius: var(--radius-sm);
color: white;
font-family: var(--font);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 4px;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.auth-btn:active { transform: translateY(0); }
.auth-btn-disabled {
background: var(--bg-tertiary) !important;
color: var(--text-tertiary) !important;
cursor: not-allowed !important;
opacity: 0.5;
}
.auth-btn-disabled:hover {
transform: none !important;
box-shadow: none !important;
}
.auth-btn-mts {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.auth-btn-secondary {
background: var(--bg-tertiary);
border: 1px solid var(--border);
}
.auth-btn-secondary:hover { background: var(--bg-hover); box-shadow: none; }
/* Auth tabs */
.auth-tabs {
display: flex;
gap: 0;
margin-bottom: 18px;
background: var(--bg-primary);
border-radius: 12px;
padding: 4px;
border: 1px solid var(--border);
}
.auth-tab {
flex: 1;
padding: 10px 0;
border: none;
background: transparent;
color: var(--text-tertiary);
font-family: var(--font);
font-size: 14px;
font-weight: 600;
cursor: pointer;
border-radius: 10px;
transition: all 0.25s ease;
}
.auth-tab.active {
background: var(--accent);
color: white;
box-shadow: 0 2px 8px rgba(91,76,219,0.3);
}
.auth-tab:not(.active):hover {
color: var(--text-primary);
background: rgba(255,255,255,0.04);
}
.auth-divider {
text-align: center;
margin: 16px 0;
color: var(--text-tertiary);
font-size: 12px;
position: relative;
}
.auth-divider::before, .auth-divider::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 20px);
height: 1px;
background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.auth-error {
background: rgba(255,92,92,0.1);
border: 1px solid rgba(255,92,92,0.2);
color: var(--red);
padding: 10px 14px;
border-radius: var(--radius-xs);
font-size: 13px;
margin-bottom: 14px;
animation: shake 0.4s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.auth-toggle {
text-align: center;
margin-top: 18px;
font-size: 13px;
color: var(--text-secondary);
}
.auth-toggle span { color: var(--accent-light); cursor: pointer; font-weight: 500; }
.auth-toggle span:hover { text-decoration: underline; }
.auth-hint {
text-align: center;
font-size: 13px;
color: var(--text-secondary);
margin-top: 12px;
}
.auth-hint strong { color: var(--accent-light); font-family: var(--font-mono); }
.sms-code {
display: flex;
gap: 10px;
justify-content: center;
margin: 24px 0;
}
.sms-digit {
width: 52px; height: 58px;
background: var(--bg-tertiary);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
text-align: center;
outline: none;
transition: var(--transition);
}
.sms-digit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
/* ── Main Layout ── */
.main-layout { display: flex; height: 100vh; background: var(--bg-primary); }
.sidebar {
width: 380px;
min-width: 380px;
background: var(--bg-secondary);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
height: 100vh;
min-height: 0;
overflow: hidden; /* force children (chat-list) to scroll inside, not overflow the viewport */
}
.sidebar-header {
padding: 18px 22px 14px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.sidebar-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 10px;
}
/* Desktop only: pack the action icons next to the profile avatar instead of pushing them
to the right edge. Gives a centered, compact feel like Telegram. */
@media (min-width: 769px) {
.sidebar-top { justify-content: flex-start; gap: 8px; }
}
.sidebar-title {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(135deg, var(--text-primary), var(--accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Don't shrink below the logo size — otherwise when the action bar is crowded the whole
title collapses to 0 width and the logo disappears off the left edge. */
flex-shrink: 0;
white-space: nowrap;
}
.sidebar-logo {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, #5b4cdb, #8b7fff);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
color: white;
flex-shrink: 0;
-webkit-text-fill-color: white;
box-shadow: 0 2px 10px rgba(91,76,219,0.3);
}
.sidebar-actions { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; flex-shrink: 0; }
/* Desktop only: hide the "M" logo in the sidebar header. On mobile we keep it since there's
usually enough room, and hiding would leave an awkward empty spot next to the profile pill. */
@media (min-width: 769px) {
.sidebar-logo { display: none; }
}
.icon-btn {
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
border-radius: var(--radius-xs);
transition: var(--transition);
flex-shrink: 0;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Profile button in header */
.profile-btn-header {
display: flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 3px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 20px;
transition: all 0.2s;
flex-shrink: 0;
}
.profile-btn-header:hover {
background: var(--bg-hover);
}
.profile-btn-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: white;
overflow: hidden;
flex-shrink: 0;
}
.profile-btn-label {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
font-family: var(--font);
}
.search-bar { position: relative; }
.search-bar svg {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: var(--text-tertiary);
}
.search-bar input {
width: 100%;
padding: 12px 14px 12px 42px;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font);
font-size: 15px;
outline: none;
transition: var(--transition);
}
.search-bar input:focus { border-color: var(--accent); }
.search-bar input::placeholder { color: var(--text-tertiary); }
.chat-list {
flex: 1;
min-height: 0; /* critical: lets the list actually scroll inside the flex column */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 6px;
}
.chat-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius);
cursor: pointer;
transition: var(--transition);
}
.chat-item:hover { background: var(--bg-hover); }
.chat-item.active { background: rgba(91,76,219,0.12); }
.avatar {
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: white;
flex-shrink: 0;
}
.avatar-wrap { position: relative; }
.online-dot {
position: absolute;
bottom: 1px; right: 1px;
width: 13px; height: 13px;
background: var(--green);
border-radius: 50%;
border: 2.5px solid var(--bg-secondary);
}
/* When an avatar has a decorative frame, the dot needs to sit on the *avatar's* edge, not
* the frame's outer edge — otherwise it floats off in space. Using :has() to detect the
* frame (supported in all modern browsers as of late 2023). */
.avatar-wrap:has(.avatar-frame-wrap) .online-dot {
bottom: 3px;
right: 3px;
}
.chat-item-info { flex: 1; min-width: 0; }
.chat-item-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.chat-item-name { font-size: 16px; font-weight: 600; }
.chat-item-time { font-size: 12px; color: var(--text-tertiary); font-weight: 500; }
.chat-item-preview {
font-size: 14px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
max-width: 100%;
}
/* Text span sits right next to the check icon — no flex-grow, just let it take its
natural width up to the container's limit with ellipsis on overflow. The unread
badge (if present) is pushed to the right by margin-left:auto on itself. */
.chat-item-preview > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-item-preview > .unread-badge { margin-left: auto; }
.check-icon { display: inline-flex; align-items: center; color: rgba(255,255,255,0.65); margin-right: 4px; flex-shrink: 0; }
.check-icon.read { color: #5af; } .check-icon svg { width: 16px; height: 11px; }
/* Light theme: the grey sent-check was white-on-white — invisible.
Use a soft grey for 'sent' and brand accent for 'read' so both states stand out. */
body.theme-light .check-icon { color: #a6a8b8 !important; }
body.theme-light .check-icon.read { color: var(--accent) !important; }
.unread-badge {
min-width: 20px;
height: 20px;
background: var(--accent);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: white;
padding: 0 6px;
flex-shrink: 0;
}
/* ── Chat Area ── */
.chat-area {
flex: 1;
display: flex;
flex-direction: column;
background: var(--bg-primary);
}
.chat-area-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
color: var(--text-tertiary);
position: relative;
overflow: hidden;
background: radial-gradient(ellipse at 30% 40%, rgba(91,76,219,0.1) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, rgba(139,127,255,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(91,76,219,0.05) 0%, transparent 70%);
}
.chat-area-empty::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(91,76,219,0.15) 0%, rgba(139,127,255,0.05) 40%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: emptyPulse 6s ease-in-out infinite;
}
.chat-area-empty::after {
content: '';
position: absolute;
width: 700px;
height: 700px;
border-radius: 50%;
border: 1px solid rgba(91,76,219,0.08);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: emptyRing 10s linear infinite;
}
@keyframes emptyPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}
@keyframes emptyRing {
0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.15) rotate(180deg); opacity: 0.6; }
100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 0.3; }
}
.logo-big {
width: 110px; height: 110px;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
font-weight: 800;
color: white;
box-shadow: 0 16px 50px rgba(91,76,219,0.4), 0 0 80px rgba(91,76,219,0.15);
animation: logoBounce 3s ease-in-out infinite;
position: relative;
z-index: 1;
}
@keyframes logoBounce {
0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 16px 50px rgba(91,76,219,0.4), 0 0 80px rgba(91,76,219,0.15); }
50% { transform: translateY(-10px) scale(1.06); box-shadow: 0 24px 70px rgba(91,76,219,0.5), 0 0 120px rgba(91,76,219,0.2); }
}
.chat-area-empty > div, .chat-area-empty > span {
position: relative;
z-index: 1;
}
.empty-title {
font-size: 26px;
font-weight: 700;
background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6, #a78bfa, #60a5fa);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: emptyTitleShimmer 4s ease-in-out infinite;
}
@keyframes emptyTitleShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.empty-subtitle {
font-size: 15px;
color: var(--text-secondary);
text-align: center;
line-height: 1.5;
}
.chat-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
min-height: 66px;
flex-shrink: 0;
z-index: 10;
}
.back-btn { display: none !important; }
.chat-header-info { flex: 1; }
.chat-header-name { font-size: 17px; font-weight: 600; }
.chat-header-status { font-size: 12px; color: var(--green); font-weight: 500; }
.chat-header-status.offline { color: var(--text-tertiary); }
.chat-header-actions { display: flex; gap: 4px; }
/* Messages */
.messages-area {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative; /* для абсолютно-позиционированной swipe-reply-icon */
}
.date-divider {
text-align: center;
padding: 14px 0 6px;
font-size: 12px;
color: var(--text-tertiary);
font-weight: 500;
}
.msg-row {
display: flex;
animation: msgIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg-row.out { justify-content: flex-end; }
.msg-row.in { justify-content: flex-start; }
.msg-bubble {
max-width: 62%;
padding: 11px 16px;
border-radius: 18px;
line-height: 1.5;
font-size: 15.5px;
word-break: break-word;
position: relative;
}
.msg-row.out .msg-bubble {
background: linear-gradient(135deg, #5b4cdb, #7c6cf0);
border-bottom-right-radius: 4px;
color: white;
border: 1px solid rgba(139,127,255,0.3);
box-shadow: 0 2px 12px rgba(91,76,219,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
}
.msg-row.in .msg-bubble {
background: linear-gradient(135deg, #1e1e32, #252542);
border-bottom-left-radius: 4px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 2px 10px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
.msg-time {
font-size: 11px;
opacity: 0.55;
margin-top: 3px;
display: flex;
align-items: center;
gap: 4px;
justify-content: flex-end;
}
.msg-check { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; color: rgba(255,255,255,0.95); opacity: 1; }
.msg-check svg { width: 18px; height: 13px; } .msg-check svg polyline { stroke: rgba(255,255,255,0.95); stroke-width: 2; } .msg-check.read { color: #7df; } .msg-check.read svg polyline { stroke: #7df; } .msg-check.read svg { filter: drop-shadow(0 0 4px rgba(119,221,255,0.7)); }
.msg-image { overflow: hidden; border-radius: 12px; margin: -6px -8px; }
.msg-image img {
max-width: 280px;
max-height: 300px;
width: 100%;
border-radius: 0;
display: block;
cursor: pointer;
object-fit: contain;
background: rgba(0,0,0,0.15);
}
/* Voice */
.voice-msg {
display: flex;
align-items: center;
gap: 8px;
min-width: 200px;
}
.voice-play-btn {
width: 36px; height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.msg-row.out .voice-play-btn { background: rgba(255,255,255,0.2); color: white; }
.msg-row.in .voice-play-btn { background: var(--accent); color: white; }
/* Wrap для волны + кружок. Ширина фиксированная чтобы бары не разъезжались.
data-progress (0..1) задаётся JS при проигрывании. */
.voice-wave-wrap {
position: relative;
width: 130px;
flex-shrink: 0;
height: 32px;
display: flex;
align-items: center;
cursor: pointer;
}
.voice-waves {
flex: 1;
display: flex;
align-items: center;
gap: 2px;
height: 100%;
width: 100%;
}
.voice-bar {
width: 3px;
border-radius: 2px;
flex-shrink: 0;
transition: background 0.1s linear;
}
/* Исходящие: бары белые полупрозрачные, «проигранные» — полностью белые */
.msg-row.out .voice-bar { background: rgba(255,255,255,0.4); }
.msg-row.out .voice-bar.played { background: rgba(255,255,255,1); }
/* Входящие: бары светло-фиолетовые, «проигранные» — фирменный accent */
.msg-row.in .voice-bar { background: rgba(91,76,219,0.35); }
.msg-row.in .voice-bar.played { background: var(--accent); }
/* Чёрный кружок-ползунок, движется поверх волны слева направо */
.voice-progress-dot {
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
transition: left 0.1s linear, opacity 0.15s;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.msg-row.out .voice-progress-dot { background: #fff; }
.msg-row.in .voice-progress-dot { background: var(--accent); }
/* Во время проигрывания кружок становится видимым */
.voice-wave-wrap.playing .voice-progress-dot { opacity: 1; }
.voice-duration {
font-size: 12px;
opacity: 0.7;
flex-shrink: 0;
min-width: 34px; /* фикс-ширина — bubble не прыгает при смене 0:24 → 0:05 */
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Кнопка скорости 1×/1.5×/2× — видна всегда (чтобы bubble не прыгал) */
.voice-speed-btn {
flex-shrink: 0;
height: 20px;
min-width: 28px;
padding: 0 6px;
border-radius: 10px;
border: none;
background: rgba(255,255,255,0.15);
color: rgba(255,255,255,0.7);
font-size: 10px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
margin-left: 2px;
letter-spacing: 0.2px;
transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
-webkit-tap-highlight-color: transparent;
}
.voice-speed-btn:active { transform: scale(0.92); }
.voice-speed-btn.active {
background: rgba(255,255,255,0.32);
color: #fff;
}
/* Входящие сообщения */
.msg-row.in .voice-speed-btn {
background: rgba(91,76,219,0.12);
color: rgba(91,76,219,0.7);
}
.msg-row.in .voice-speed-btn.active {
background: var(--accent);
color: #fff;
}
body.theme-light .msg-row.in .voice-speed-btn {
background: rgba(91,76,219,0.1);
color: rgba(91,76,219,0.75);
}
body.theme-light .msg-row.in .voice-speed-btn.active {
background: var(--accent);
color: #fff;
}
/* Typing */
/* ── Typing indicator (WhatsApp-style: bubble с 3 прыгающими точками) ── */
/* Висит абсолютно внутри .chat-area чуть над input-area, чтобы не создавать
отдельной полосы с другим фоном между сообщениями и полем ввода. */
.typing-indicator {
position: absolute;
left: 0;
right: 0;
bottom: 60px; /* над input-area (~56px в мобилке/десктопе) */
padding: 0 16px;
animation: fadeIn 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
z-index: 5;
}
.typing-indicator-bubble {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: var(--bg-tertiary);
border-radius: 16px 16px 16px 4px;
max-width: fit-content;
}
.typing-indicator-name {
font-size: 12px;
color: var(--text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.typing-dots {
display: inline-flex;
gap: 3px;
align-items: center;
}
.typing-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-secondary);
animation: typingBounce 1.1s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
/* ── Input ── */
.input-area {
padding: 8px 10px 10px;
background: var(--bg-secondary);
display: flex;
align-items: center;
gap: 6px;
position: relative; /* для voice-record-overlay */
}
.input-actions { display: flex; gap: 2px; padding-bottom: 3px; }
.input-wrapper { flex: 1; position: relative; min-width: 0; }
.input-field {
width: 100%;
padding: 12px 16px;
background: var(--bg-tertiary);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 24px;
color: var(--text-primary);
font-family: var(--font);
font-size: 15px;
outline: none;
transition: var(--transition);
}
.input-field:focus { border-color: var(--accent); }
.input-field::placeholder { color: var(--text-tertiary); }
/* Round buttons in input area */
.input-round-btn {
width: 44px; height: 44px;
background: var(--bg-tertiary);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.input-round-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.input-round-btn.accent {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: white;
}
.input-round-btn.accent:hover { transform: scale(1.06); box-shadow: 0 4px 16px var(--accent-glow); }
/* Inline buttons inside input field (emoji, camera) */
.input-inline-btns {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 2px;
align-items: center;
}
.input-inline-btn {
width: 34px; height: 34px;
border: none;
background: transparent;
color: var(--text-tertiary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s;
}
.input-inline-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
/* Keep old send-btn for backward compat */
.send-btn {
width: 42px; height: 42px;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
}
.send-btn:hover { transform: scale(1.06); box-shadow: 0 4px 16px var(--accent-glow); }
.mic-btn.recording {
background: linear-gradient(135deg, var(--red), #ee5a24);
animation: pulse 1.5s infinite;
position: relative;
z-index: 30; /* выше overlay (20) — видно как микрофон едет по overlay влево */
transition: none; /* движение за пальцем должно быть мгновенным */
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,92,92,0.4); }
50% { box-shadow: 0 0 0 12px rgba(255,92,92,0); }
}
/* Voice recording overlay — WhatsApp style */
.voice-record-overlay {
position: absolute;
top: 0; left: 0;
right: 58px; /* mic-кнопка (~46px) + небольшой отступ — она остаётся видимой справа под пальцем */
bottom: 0;
background: var(--bg-secondary);
display: flex;
align-items: center;
gap: 12px;
padding: 8px 14px;
z-index: 20;
animation: fadeIn 0.15s ease;
pointer-events: none; /* клики проходят сквозь на mic — палец должен продолжать жать */
}
.voice-record-overlay > * { pointer-events: auto; }
/* Колонка замка — висит НАД микрофоном во время записи (дочерний .input-area) */
.voice-rec-lock-column {
position: absolute;
right: 17px; /* центр над micBtn: input-area padding ~10px + mic half ~23px − pill half ~20px */
bottom: calc(100% - 4px); /* парит чуть выше панели ввода */
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
pointer-events: none;
transition: transform 0.1s linear;
z-index: 25;
animation: fadeIn 0.2s ease;
}
.voice-rec-lock-pill {
width: 40px;
height: 56px;
border-radius: 20px;
background: rgba(91,76,219,0.15);
border: 1px solid rgba(91,76,219,0.35);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: var(--accent-light);
animation: voiceLockBob 1.4s ease-in-out infinite;
}
@keyframes voiceLockBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.voice-rec-lock-chev {
opacity: 0.7;
}
/* Красный пульсирующий круг вокруг мик-кнопки — визуально «запись идёт» */
.voice-rec-mic-pulse {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255,92,92,0.18);
pointer-events: none;
animation: voiceMicPulse 1.3s ease-out infinite;
z-index: 15;
}
@keyframes voiceMicPulse {
0% { transform: translateY(-50%) scale(0.8); opacity: 0.9; }
100% { transform: translateY(-50%) scale(1.6); opacity: 0; }
}
/* В locked-режиме overlay растягивается на всю ширину — там уже есть свои send/trash кнопки */
.voice-record-overlay.locked {
right: 0;
}
/* Во время записи подсвечиваем сам микрофон (красным), чтобы было видно что жмёшь правильное */
.icon-btn.recording { color: #ff5c5c !important; }
.voice-rec-left {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.voice-rec-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff5c5c;
animation: voiceDotPulse 1s ease-in-out infinite;
}
@keyframes voiceDotPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.voice-rec-timer {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
min-width: 40px;
}
.voice-rec-center {
flex: 1;
text-align: center;
}
.voice-rec-slide {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--text-tertiary);
font-size: 13px;
animation: voiceHintSlide 1.5s ease-in-out infinite;
}
.voice-rec-hint {
font-size: 13px;
color: var(--text-tertiary);
animation: voiceHintSlide 1.5s ease-in-out infinite;
}
@keyframes voiceHintSlide {
0%, 100% { opacity: 0.5; transform: translateX(0); }
50% { opacity: 1; transform: translateX(-8px); }
}
.voice-rec-right {
flex-shrink: 0;
}
/* ─── Locked recording UI (WhatsApp-style) ─── */
.voice-rec-trash-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255,92,92,0.12);
color: #ff5c5c;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
}
.voice-rec-trash-btn:active { background: rgba(255,92,92,0.25); }
.voice-rec-wave {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
height: 28px;
overflow: hidden;
min-width: 0;
}
.voice-rec-wave-bar {
width: 2px;
background: var(--accent);
border-radius: 2px;
opacity: 0.7;
animation: voiceWaveBar 0.9s ease-in-out infinite;
}
@keyframes voiceWaveBar {
0%, 100% { height: 4px; }
50% { height: 22px; }
}
.voice-rec-speed {
width: 40px;
height: 28px;
border-radius: 14px;
background: rgba(255,255,255,0.08);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: 0.3px;
user-select: none;
}
body.theme-light .voice-rec-speed { background: rgba(0,0,0,0.06); }
.voice-rec-send-btn {
width: 46px;
height: 46px;
border-radius: 50%;
border: none;
background: var(--accent);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(91,76,219,0.4);
transition: transform 0.15s, background 0.15s;
}
.voice-rec-send-btn:active { transform: scale(0.92); }
.voice-rec-send-btn:hover { background: var(--accent-hover); }
.voice-rec-cancel-btn {
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: rgba(255,92,92,0.15);
color: #ff5c5c;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.voice-rec-cancel-btn:hover { background: rgba(255,92,92,0.3); }
.emoji-picker {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 8px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 3px;
box-shadow: var(--shadow);
animation: popIn 0.2s ease;
z-index: 10;
}
@keyframes popIn { from { opacity: 0; transform: translateY(6px); } }
.emoji-btn {
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 8px;
transition: var(--transition);
}
.emoji-btn:hover { background: var(--bg-hover); transform: scale(1.15); }
.image-preview-bar {
padding: 8px 20px;
background: var(--bg-secondary);
border-top: 1px solid var(--border);
display: flex;
gap: 8px;
align-items: center;
}
/* ── Call Modal ── */
.call-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.88);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
animation: fadeIn 0.3s ease;
backdrop-filter: blur(24px);
}
.call-modal-video {
background: #000;
backdrop-filter: none;
justify-content: flex-start;
}
.call-avatar {
width: 110px; height: 110px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 44px;
font-weight: 700;
color: white;
margin-bottom: 20px;
animation: callPulse 2s infinite;
}
.call-avatar-float {
width: 100px; height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: 700;
color: white;
animation: callPulse 2s infinite;
}
@keyframes callPulse {
0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
50% { box-shadow: 0 0 0 28px rgba(91,76,219,0); }
}
.call-name { font-size: 26px; font-weight: 700; }
.call-status { font-size: 14px; color: var(--text-secondary); margin-top: 6px; margin-bottom: 44px; }
.call-actions { display: flex; gap: 20px; align-items: center; }
/* Video call fullscreen */
.call-video-fullscreen {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
z-index: 0;
background: #111;
overflow: hidden;
}
.call-video-fullscreen video,
.call-video-fullscreen #remoteVideo {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
.call-video-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.4);
z-index: 1;
}
/* Local camera PiP */
.call-local-pip {
position: absolute;
bottom: 140px;
right: 16px;
top: auto;
width: 120px;
height: 160px;
object-fit: cover;
border-radius: 14px;
border: 2px solid rgba(255,255,255,0.25);
z-index: 12;
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
background: #222;
transform: scaleX(-1);
}
/* Top bar — name + timer */
.call-top-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 16px));
z-index: 15;
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.call-top-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.call-top-btn:hover { background: rgba(255,255,255,0.25); }
.call-top-info {
flex: 1;
text-align: center;
min-width: 0;
}
.call-top-name {
font-size: 18px;
font-weight: 700;
color: white;
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.call-top-status {
font-size: 13px;
color: rgba(255,255,255,0.7);
margin-top: 2px;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.call-top-right {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* Bottom bar — call controls */
.call-bottom-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 24px;
padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 28px));
z-index: 15;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
/* Round call buttons */
.call-btn-round {
width: 62px;
height: 62px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: all 0.2s;
color: white;
background: rgba(80,80,80,0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.call-btn-round.small {
width: 50px;
height: 50px;
}
.call-btn-round:hover { background: rgba(100,100,100,0.8); transform: scale(1.05); }
.call-btn-round:active { transform: scale(0.95); }
.call-btn-round.end {
background: #ff3b30;
width: 66px;
height: 66px;
}
.call-btn-round.end:hover { background: #ee2a20; transform: scale(1.08); }
.call-btn-round.accept {
background: #34c759;
width: 66px;
height: 66px;
}
.call-btn-round.accept:hover { background: #2db84e; transform: scale(1.08); }
.call-btn-active {
background: var(--accent) !important;
box-shadow: 0 0 12px rgba(91,76,219,0.4);
}
.call-modal > .call-avatar,
.call-modal > .call-name,
.call-modal > .call-status,
.call-modal > .call-actions { position: relative; z-index: 1; }
/* Minimized call (PiP) */
.call-minimized {
width: 150px !important;
height: 210px !important;
top: auto;
bottom: 100px;
right: 12px;
left: auto;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.call-minimized:active { cursor: grabbing; }
.call-minimized .call-top-bar,
.call-minimized .call-bottom-bar,
.call-minimized .call-local-pip,
.call-minimized .call-local-pip-wrap,
.call-minimized .pip-mask-overlay,
.call-minimized .call-bottom-info { display: none !important; }
.call-minimized .call-video-fullscreen { border-radius: 16px; overflow: hidden; pointer-events: none; }
.call-minimized .call-video-overlay { pointer-events: none; }
.call-minimized .call-bottom-btns { display: none !important; }
/* Expand button on minimized PiP */
.pip-expand-btn {
position: absolute;
top: 8px;
right: 8px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
transition: all 0.2s;
}
.pip-expand-btn:hover { background: rgba(91,76,219,0.8); transform: scale(1.1); }
/* ── New Chat Modal ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
animation: fadeIn 0.2s ease;
backdrop-filter: blur(8px);
}
.modal-content {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 20px;
width: 400px;
max-width: 90vw;
max-height: 70vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 17px; font-weight: 600; }
.modal-body { overflow-y: auto; padding: 8px; }
.user-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
}
.user-row:hover { background: var(--bg-hover); }
.user-row-info { flex: 1; }
.user-row-name { font-size: 14px; font-weight: 500; }
.user-row-phone { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); }
.status-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--text-tertiary);
flex-shrink: 0;
}
.status-dot.online { background: var(--green); }
/* ── Admin Panel ── */
.admin-panel {
position: fixed;
inset: 0;
background: var(--bg-primary);
z-index: 50;
display: flex;
flex-direction: column;
animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp { from { transform: translateY(100%); } }
.admin-header {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
}
.admin-header h2 {
flex: 1;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.admin-content {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.admin-tabs {
display: flex;
gap: 3px;
margin-bottom: 20px;
background: var(--bg-secondary);
border-radius: var(--radius-sm);
padding: 3px;
}
.admin-tab {
flex: 1;
padding: 9px;
border: none;
background: transparent;
color: var(--text-secondary);
font-family: var(--font);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-radius: var(--radius-xs);
transition: var(--transition);
}
.admin-tab.active { background: var(--accent); color: white; }
.admin-tab:hover:not(.active) { color: var(--text-primary); }
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
}
.stat-value {
font-size: 30px;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-light), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.user-table { width: 100%; border-collapse: separate; border-spacing: 0 3px; }
.user-table th {
text-align: left;
padding: 10px 14px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 1px;
}
.user-table td { padding: 10px 14px; font-size: 13px; background: var(--bg-card); }
.user-table tr td:first-child { border-radius: 8px 0 0 8px; }
.user-table tr td:last-child { border-radius: 0 8px 8px 0; }
.status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 16px;
font-size: 11px;
font-weight: 500;
}
.status-badge.online { background: rgba(0,196,140,0.1); color: var(--green); }
.status-badge.offline { background: rgba(126,126,154,0.1); color: var(--text-secondary); }
.status-badge.banned { background: rgba(255,92,92,0.1); color: var(--red); }
.table-btn {
padding: 5px 10px;
border: none;
border-radius: var(--radius-xs);
font-family: var(--font);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
margin-right: 4px;
}
.table-btn.danger { background: rgba(255,92,92,0.1); color: var(--red); }
.table-btn.danger:hover { background: rgba(255,92,92,0.2); }
.table-btn.warn { background: rgba(255,179,71,0.1); color: var(--orange); }
.table-btn.warn:hover { background: rgba(255,179,71,0.2); }
.admin-msg-row {
padding: 8px 12px;
border-left: 2px solid var(--bg-tertiary);
margin-bottom: 6px;
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.admin-msg-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
margin-bottom: 3px;
color: var(--text-secondary);
}
.admin-msg-meta strong { color: var(--text-primary); font-size: 13px; }
.admin-msg-content { font-size: 13px; color: var(--text-secondary); }
/* ── Toast ── */
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(20,20,35,0.95);
border: 1px solid rgba(91,76,219,0.3);
padding: 16px 32px;
border-radius: 16px;
font-size: 15px;
font-weight: 500;
color: white;
box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 20px rgba(91,76,219,0.15);
z-index: 200;
text-align: center;
max-width: 80vw;
backdrop-filter: blur(12px);
animation: toastIn 0.3s ease, toastOut 0.4s ease 2.3s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } }
/* ── Mobile ── */
@media (max-width: 768px) {
.sidebar { width: 100%; min-width: 100%; }
.sidebar.hidden { display: none; }
.chat-area.hidden { display: none; }
.back-btn { display: flex !important; }
.msg-bubble { max-width: 85%; }
.admin-stats { grid-template-columns: repeat(2, 1fr); }
/* Header — bigger */
.sidebar-header { padding: 14px 16px 12px; }
.sidebar-title { font-size: 22px; }
.sidebar-actions { gap: 2px; }
.icon-btn { width: 40px; height: 40px; }
.icon-btn svg { width: 22px; height: 22px; }
.profile-btn-avatar { width: 32px; height: 32px; font-size: 13px; }
.profile-btn-label { font-size: 12px; }
.profile-btn-header { gap: 4px; padding: 3px 6px 3px 3px; }
}
/* On screens narrower than 420px, hide the "Вы" label so the avatar + all 6 action icons
(including the Exit arrow on the right) fit in the header without clipping. */
@media (max-width: 420px) {
.profile-btn-label { display: none !important; }
.profile-btn-header { padding: 3px 4px 3px 3px !important; gap: 0 !important; }
.profile-btn-avatar { width: 32px !important; height: 32px !important; }
.sidebar-actions { gap: 1px !important; }
.sidebar-header { padding: 10px 10px 8px !important; }
}
@media (max-width: 480px) {
/* Search — bigger */
.search-bar input { font-size: 16px; padding: 13px 14px 13px 44px; }
/* Status bar — bigger */
.status-add-row { padding: 12px 16px; gap: 14px; }
.status-add-avatar { width: 58px; height: 58px; }
.status-add-plus-badge { width: 22px; height: 22px; font-size: 15px; }
.status-add-title { font-size: 17px; }
.status-add-subtitle { font-size: 14px; }
.status-add-action-btn { width: 42px; height: 42px; }
.status-circle { width: 66px; height: 66px; }
.status-circle-name { font-size: 11px; max-width: 76px; }
.status-circles-row { gap: 14px; padding: 12px 16px; }
/* Chat list — bigger */
.chat-list { padding: 4px 8px; }
.chat-item { padding: 14px 12px; gap: 14px; }
.chat-item-name { font-size: 17px; }
.chat-item-time { font-size: 13px; }
.chat-item-preview { font-size: 15px; }
.online-dot { width: 14px; height: 14px; }
.unread-badge { min-width: 22px; height: 22px; font-size: 12px; }
/* Messages — bigger */
.msg-bubble { font-size: 16px; padding: 10px 14px; }
.msg-time { font-size: 11px; }
/* Input area — bigger */
.msg-input { font-size: 16px !important; }
.send-btn { width: 44px; height: 44px; }
.mic-btn { width: 44px; height: 44px; }
/* VPN banner — bigger */
.vpn-banner { padding: 12px 16px; }
.vpn-banner-title { font-size: 15px; }
.vpn-banner-sub { font-size: 13px; }
.vpn-banner-icon { width: 44px; height: 44px; font-size: 30px; }
}
html,body,.main-layout{height:100dvh}
/* On mobile browsers the collapsing URL bar changes the viewport; dvh accounts for that.
Desktop (no URL bar) uses plain vh — dvh still == vh there, so this is safe. */
@media (max-width: 768px) {
html, body { height: 100dvh; }
.sidebar { height: 100dvh; }
/* Explicit scroll on the chat list — webkit touch scroll + ensure children don't escape */
.chat-list { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
}
.messages-area{min-height:0;flex:1;-webkit-overflow-scrolling:touch}
@media(max-width:768px){
.input-area{padding:6px 8px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));gap:5px}
.input-field{font-size:16px !important;padding:12px 14px !important}
.input-round-btn{width:42px;height:42px}
.messages-area{padding:10px 12px}
}
.modal-content { max-height: 85vh; overflow-y: auto; }
.modal-body { overflow-y: auto; max-height: 70vh; }
.dots-btn { opacity: 0.7; transition: all 0.15s; }
.dots-btn:hover { opacity: 1; background: var(--bg-hover); border-radius: 8px; }
@media (max-width: 768px) {
.dots-btn { opacity: 0.8; }
}
.my-profile-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin: 6px 6px 2px;
border-radius: 14px;
cursor: pointer;
background: linear-gradient(135deg, rgba(91,76,219,0.12), rgba(139,127,255,0.08));
border: 1px solid rgba(91,76,219,0.2);
transition: all .2s;
}
.my-profile-bar:hover {
background: linear-gradient(135deg, rgba(91,76,219,0.2), rgba(139,127,255,0.12));
}
.my-profile-bar .my-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.my-profile-bar .my-status {
font-size: 12px;
color: var(--accent-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-item {
border: 1px solid rgba(255,255,255,0.04);
margin-bottom: 4px;
}
.chat-item:hover {
border-color: rgba(91,76,219,0.2);
}
.chat-item.active {
border-color: rgba(91,76,219,0.3);
}
.chat-item {
border: 1px solid rgba(91,76,219,0.25) !important;
margin-bottom: 4px;
}
.messages-area {
background-image:
radial-gradient(ellipse at 20% 80%, rgba(91,76,219,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(139,127,255,0.04) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(0,196,140,0.02) 0%, transparent 60%);
background-color: var(--bg-primary);
background-size: 100% 100%;
position: relative;
}
.messages-area::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235b4cdb' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.messages-area > * {
position: relative;
z-index: 1;
}
.messages-area {
background:
radial-gradient(ellipse at 15% 85%, rgba(91,76,219,0.15) 0%, transparent 45%),
radial-gradient(ellipse at 85% 15%, rgba(139,127,255,0.1) 0%, transparent 45%),
radial-gradient(ellipse at 50% 50%, rgba(0,196,140,0.05) 0%, transparent 50%),
url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%235b4cdb' fill-opacity='0.07'%3E%3Cpath d='M20 20.5V18H18v2.5h-2.5V22H18v2.5h2V22h2.5v-1.5H20z'/%3E%3C/g%3E%3C/svg%3E"),
var(--bg-primary) !important;
}
.messages-area {
background:
radial-gradient(circle at 10% 90%, rgba(91,76,219,0.12) 0%, transparent 40%),
radial-gradient(circle at 90% 10%, rgba(91,76,219,0.08) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(30,30,50,0.5) 0%, transparent 70%),
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='1' fill='%235b4cdb' fill-opacity='0.08'/%3E%3Ccircle cx='10' cy='30' r='0.8' fill='%238b7fff' fill-opacity='0.06'/%3E%3Ccircle cx='80' cy='70' r='0.6' fill='%235b4cdb' fill-opacity='0.05'/%3E%3C/svg%3E"),
linear-gradient(180deg, #0a0a12 0%, #0d0d1a 50%, #0a0a12 100%) !important;
}
.messages-area {
background:
linear-gradient(rgba(7,7,12,0.92), rgba(7,7,12,0.92)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cdefs%3E%3CradialGradient id='a' cx='300' cy='300' r='300' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%235b4cdb' stop-opacity='.15'/%3E%3Cstop offset='1' stop-color='%23070712' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='150' cy='450' r='200' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%238b7fff' stop-opacity='.1'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='%23070712' width='600' height='600'/%3E%3Ccircle fill='url(%23a)' cx='300' cy='300' r='300'/%3E%3Ccircle fill='url(%23b)' cx='150' cy='450' r='200'/%3E%3Cpath d='M100 200 Q200 100 300 200 T500 200' stroke='%235b4cdb' stroke-opacity='.06' fill='none' stroke-width='1'/%3E%3Cpath d='M50 350 Q200 250 350 350 T600 350' stroke='%238b7fff' stroke-opacity='.05' fill='none' stroke-width='1'/%3E%3Cpath d='M0 500 Q150 400 300 500 T600 500' stroke='%235b4cdb' stroke-opacity='.04' fill='none' stroke-width='1'/%3E%3Ccircle cx='80' cy='120' r='2' fill='%238b7fff' opacity='.2'/%3E%3Ccircle cx='520' cy='80' r='1.5' fill='%235b4cdb' opacity='.25'/%3E%3Ccircle cx='400' cy='180' r='1' fill='%238b7fff' opacity='.15'/%3E%3Ccircle cx='180' cy='380' r='1.8' fill='%235b4cdb' opacity='.2'/%3E%3Ccircle cx='450' cy='420' r='1.2' fill='%238b7fff' opacity='.18'/%3E%3Ccircle cx='300' cy='550' r='1.5' fill='%235b4cdb' opacity='.15'/%3E%3Ccircle cx='550' cy='300' r='2' fill='%238b7fff' opacity='.12'/%3E%3Ccircle cx='50' cy='520' r='1' fill='%235b4cdb' opacity='.2'/%3E%3C/svg%3E") !important;
background-size: cover !important;
background-position: center !important;
}
.messages-area {
background: #131322 url("data:image/svg+xml;utf8,") repeat !important;
background-size: 400px 400px !important;
}
.messages-area {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* ── Verified Badge ── */
.verified-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 4px;
vertical-align: middle;
flex-shrink: 0;
position: relative;
}
.verified-badge svg {
width: 22px;
height: 22px;
filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.5));
animation: verifiedPulse 3s ease-in-out infinite;
}
.verified-badge-lg {
width: 26px;
height: 26px;
}
.verified-badge-lg svg {
width: 26px;
height: 26px;
filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
}
@keyframes verifiedPulse {
0%, 100% { filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4)); }
50% { filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.8)) drop-shadow(0 0 20px rgba(139, 92, 246, 0.3)); }
}
.chat-item-name .verified-badge svg,
.chat-header-name .verified-badge svg {
width: 20px;
height: 20px;
}
/* Admin verify button */
.table-btn.verify {
background: rgba(96, 165, 250, 0.1);
color: #60a5fa;
border: 1px solid rgba(96, 165, 250, 0.2);
}
.table-btn.verify:hover {
background: rgba(96, 165, 250, 0.2);
}
.table-btn.verify.active {
background: rgba(96, 165, 250, 0.2);
color: #93c5fd;
border-color: rgba(96, 165, 250, 0.4);
}
/* ── Admin Animated Name ── */
.admin-name-glow {
font-weight: 800;
background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6, #a78bfa, #60a5fa);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: adminNameShimmer 4s ease-in-out infinite;
filter: drop-shadow(0 0 8px rgba(124, 92, 224, 0.3));
}
@keyframes adminNameShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.chat-header-name .admin-name-glow {
font-weight: 800;
}
.profile-admin-name {
font-weight: 800;
background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6, #a78bfa, #60a5fa);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: adminNameShimmer 4s ease-in-out infinite;
font-size: 22px;
}
/* ── Premium Gold Name ── */
.premium-name-glow {
font-weight: 700;
background: linear-gradient(90deg, #f59e0b, #fbbf24, #f9a825, #fcd34d, #f59e0b);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: premiumNameShimmer 4s ease-in-out infinite;
filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.25));
}
/* Rainbow nickname — Premium users can pick this special effect. Uses the same shimmer
animation timing as premium so the vibe stays consistent, but with a full-spectrum hue. */
.nick-color-rainbow {
font-weight: 700;
background: linear-gradient(90deg, #ff3d6a, #ff9800, #ffd600, #4caf50, #2196f3, #7b1fa2, #ff3d6a);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: premiumNameShimmer 4s linear infinite;
}
.profile-premium-name {
font-weight: 700;
background: linear-gradient(90deg, #f59e0b, #fbbf24, #f9a825, #fcd34d, #f59e0b);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: premiumNameShimmer 4s ease-in-out infinite;
font-size: 20px;
}
@keyframes premiumNameShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ── MoonChat System Name (Green) ── */
.system-name-glow {
font-weight: 800;
background: linear-gradient(90deg, #34d399, #10b981, #6ee7b7, #10b981, #34d399);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: systemNameShimmer 4s ease-in-out infinite;
filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.3));
}
.profile-system-name {
font-weight: 800;
background: linear-gradient(90deg, #34d399, #10b981, #6ee7b7, #10b981, #34d399);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: systemNameShimmer 4s ease-in-out infinite;
font-size: 22px;
}
@keyframes systemNameShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Admin premium button */
.table-btn.premium {
background: rgba(245, 158, 11, 0.1);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.table-btn.premium:hover {
background: rgba(245, 158, 11, 0.2);
}
.table-btn.premium.active {
background: rgba(245, 158, 11, 0.2);
color: #fcd34d;
border-color: rgba(245, 158, 11, 0.4);
}
/* Drawing Canvas */
.draw-btn { opacity: 0.7; }
.draw-btn:hover { opacity: 1; }
.draw-color {
width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.2);
cursor: pointer;
transition: all 0.2s;
padding: 0;
}
.draw-color.active {
border-color: white;
transform: scale(1.2);
box-shadow: 0 0 8px rgba(255,255,255,0.4);
}
.draw-color:hover { transform: scale(1.15); }
/* Payment success animations */
@keyframes bounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Status bar — Telegram-style horizontal circles above chat list */
.status-bar {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
overflow: hidden;
min-width: 0;
}
.status-bar::-webkit-scrollbar { display: none; }
#shopTabs::-webkit-scrollbar { display: none; }
/* Hide native search-input cancel button — we use type=search on msgInput to suppress Safari's Autofill toolbar */
#liveCommentInput::placeholder { color: rgba(255,255,255,0.75); font-weight: 400; }
#liveCommentInput:focus { border-color: rgba(255,255,255,0.85) !important; background: rgba(255,255,255,0.28) !important; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
display: none;
}
/* WhatsApp-style "Add status" row */
.status-add-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
}
.status-add-avatar-wrap {
position: relative;
cursor: pointer;
flex-shrink: 0;
}
.status-add-avatar {
width: 54px;
height: 54px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: white;
overflow: hidden;
border: 2px solid transparent;
}
.status-add-avatar-has {
border: 2px solid var(--green);
}
.status-add-plus-badge {
position: absolute;
bottom: -1px;
right: -1px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: white;
border: 2px solid var(--bg-secondary);
cursor: pointer;
transition: transform 0.15s;
}
.status-add-plus-badge:hover { transform: scale(1.15); }
.status-add-info {
flex: 1;
min-width: 0;
cursor: pointer;
}
.status-add-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.status-add-subtitle {
font-size: 13px;
color: var(--text-tertiary);
margin-top: 1px;
}
.status-add-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.status-add-action-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(91,76,219,0.12);
border: none;
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.status-add-action-btn:hover {
background: rgba(91,76,219,0.22);
transform: scale(1.08);
}
.status-add-action-btn:active { transform: scale(0.95); }
/* Story circles row (others' statuses) */
.status-circles-row {
display: flex;
gap: 12px;
padding: 10px 14px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
min-width: 0;
max-width: 100%;
flex-wrap: nowrap;
}
.status-circles-row::-webkit-scrollbar { display: none; }
.status-circle-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.2s;
}
.status-circle-wrap:hover { transform: scale(1.05); }
.status-circle-wrap:active { transform: scale(0.95); }
.status-circle {
width: 62px;
height: 62px;
border-radius: 50%;
padding: 3px;
position: relative;
}
.status-ring-new { border: 3px solid var(--green); }
.status-ring-seen { border: 3px solid rgba(255,255,255,0.15); }
.status-ring-admin { border: 3px solid var(--accent); box-shadow: 0 0 10px rgba(91,76,219,0.25); }
.status-circle-add { border: 3px dashed rgba(255,255,255,0.2); }
.status-circle-add:hover { border-color: var(--accent); }
.status-circle-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: white;
overflow: hidden;
}
.status-circle-plus {
position: absolute;
bottom: -2px;
right: -2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: white;
border: 2px solid var(--bg-secondary);
}
.status-circle-name {
font-size: 10px;
color: var(--text-tertiary);
max-width: 72px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
gap: 1px;
}
.status-circle-name .verified-badge {
width: 13px;
height: 13px;
margin-left: 1px;
}
.status-circle-name .verified-badge svg {
width: 13px;
height: 13px;
}
.status-circle-name .admin-name-glow,
.status-circle-name .premium-name-glow {
font-size: 10px;
}
/* Status reply bar (WhatsApp-style) */
.status-reply-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
padding-bottom: max(8px, env(safe-area-inset-bottom));
background: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
}
.status-reply-input {
flex: 1;
padding: 10px 16px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.08);
color: white;
font-size: 14px;
font-family: var(--font);
outline: none;
transition: all 0.2s;
}
.status-reply-input::placeholder {
color: rgba(255,255,255,0.4);
}
.status-reply-input:focus {
border-color: var(--accent);
background: rgba(255,255,255,0.12);
}
.status-reply-send {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent);
border: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s;
}
.status-reply-send:hover {
background: var(--accent-hover);
transform: scale(1.05);
}
/* Create status colors */
.status-color-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.status-color-btn:hover { transform: scale(1.15); }
.status-color-btn.active { border-color: white; transform: scale(1.1); }
/* Visibility buttons */
.vis-btn {
padding: 6px 12px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
color: rgba(255,255,255,0.5);
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: var(--font);
transition: all 0.2s;
}
.vis-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.vis-btn.active {
background: rgba(91,76,219,0.2);
border-color: var(--accent);
color: var(--accent-light, #a78bfa);
}
/* Mobile call button fixes */
@media (max-width: 768px) {
.call-bottom-bar {
gap: 10px;
padding: 14px 16px;
padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
}
.call-btn-round { width: 52px; height: 52px; }
.call-btn-round.small { width: 46px; height: 46px; }
.call-btn-round.end { width: 56px; height: 56px; }
.call-btn-round.accept { width: 56px; height: 56px; }
.call-btn-round svg { width: 20px; height: 20px; }
.call-local-pip { width: 100px; height: 140px; bottom: 120px; right: 12px; top: auto; left: auto; border-radius: 12px; }
.call-top-bar { padding: 12px 14px; padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)); }
.call-top-btn { width: 36px; height: 36px; }
.call-top-name { font-size: 16px; }
.call-top-status { font-size: 12px; }
.call-bottom-bar { gap: 18px; padding: 20px 20px; padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px)); }
}
/* Desktop video call — phone-like centered */
@media (min-width: 769px) {
.call-modal-video {
background: #000;
}
/* Don't stretch video on wide screens */
.call-video-fullscreen video,
.call-video-fullscreen #remoteVideo {
object-fit: contain !important;
}
.call-local-pip {
width: 160px;
height: 210px;
bottom: 130px;
right: 20%;
top: auto;
border-radius: 16px;
}
}
/* MoonVPN banner at bottom of sidebar */
.vpn-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin: 4px 12px 12px; /* equal horizontal margins so the banner sits centered under the chat list */
border-radius: 14px;
background: linear-gradient(135deg, rgba(91,76,219,0.12), rgba(139,127,255,0.06));
border: 1px solid rgba(91,76,219,0.18);
cursor: pointer;
text-decoration: none;
color: inherit;
transition: all 0.2s;
flex-shrink: 0;
box-sizing: border-box;
}
.vpn-banner:hover {
background: linear-gradient(135deg, rgba(91,76,219,0.2), rgba(139,127,255,0.12));
border-color: rgba(91,76,219,0.3);
transform: translateY(-1px);
}
.vpn-banner-icon {
font-size: 28px;
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(91,76,219,0.15);
border-radius: 12px;
}
.vpn-banner-title {
font-size: 13px;
font-weight: 700;
color: var(--accent-light);
}
.vpn-banner-sub {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 1px;
}
/* Reply block inside message bubble */
.msg-reply-block {
background: rgba(91,76,219,0.12);
border-left: 3px solid var(--accent);
border-radius: 0 8px 8px 0;
padding: 6px 10px;
margin-bottom: 6px;
cursor: pointer;
transition: background 0.2s;
}
.msg-reply-block:hover { background: rgba(91,76,219,0.2); }
.msg-reply-name {
font-size: 12px;
font-weight: 700;
color: var(--accent-light);
margin-bottom: 1px;
}
.msg-reply-text {
font-size: 13px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 250px;
}
.msg-row.out .msg-reply-block {
background: rgba(255,255,255,0.1);
border-left-color: rgba(255,255,255,0.5);
}
.msg-row.out .msg-reply-name { color: rgba(255,255,255,0.8); }
.msg-row.out .msg-reply-text { color: rgba(255,255,255,0.6); }
/* Call bottom info (name+status above buttons when not active) */
.call-bottom-info {
text-align: center;
margin-bottom: 16px;
width: 100%;
}
.call-bottom-btns {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
@media (max-width: 768px) {
.call-bottom-btns { gap: 18px; }
}
/* Transparent drag overlay for minimized PiP */
.pip-drag-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 18;
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.pip-drag-overlay:active { cursor: grabbing; }
/* Message context menu - beautiful */
@keyframes menuFadeIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.msg-react-bar {
display: flex;
gap: 2px;
padding: 6px 8px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 24px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.msg-react-btn {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border: none; background: transparent;
font-size: 22px; cursor: pointer;
border-radius: 50%; transition: all 0.15s;
}
.msg-react-btn:hover { transform: scale(1.3); background: var(--bg-hover); }
.msg-react-btn:active { transform: scale(1.5); }
.msg-menu-items {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 4px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
min-width: 200px;
overflow: hidden;
}
.msg-menu-item {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 16px;
font-size: 14px; font-weight: 500;
color: var(--text-primary);
cursor: pointer; border-radius: 10px;
transition: background 0.15s;
}
.msg-menu-item:hover { background: var(--bg-hover); }
.msg-menu-item.delete { color: #ff5c5c; }
.msg-menu-icon { font-size: 16px; opacity: 0.6; }
/* Reaction badge on message */
.msg-reaction-badge {
position: absolute;
bottom: -10px; right: 8px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2px 6px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 2;
line-height: 1.2;
}
.msg-bubble { position: relative; }
@media (max-width: 768px) {
.msg-react-btn { width: 36px; height: 36px; font-size: 20px; }
.msg-menu-item { padding: 12px 16px; font-size: 15px; }
}
/* Tap to hide/show call controls */
.call-top-bar, .call-bottom-bar {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.call-controls-hidden.call-top-bar {
opacity: 0 !important;
pointer-events: none;
transform: translateY(-20px);
}
.call-controls-hidden.call-bottom-bar {
opacity: 0 !important;
pointer-events: none;
transform: translateY(20px);
}
/* Video call effects panel */
#effectsPanel {
position: absolute;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
background: rgba(20,20,30,0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 14px;
max-width: 340px;
width: 90vw;
animation: menuFadeIn 0.2s ease;
max-height: 50vh;
overflow-y: auto;
}
.effects-panel-title {
font-size: 15px;
font-weight: 700;
color: white;
text-align: center;
margin-bottom: 12px;
}
.effects-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.effect-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 4px;
border: 2px solid transparent;
border-radius: 14px;
background: rgba(255,255,255,0.06);
cursor: pointer;
transition: all 0.2s;
color: white;
}
.effect-item:hover { background: rgba(255,255,255,0.12); }
.effect-item.active { border-color: var(--accent); background: rgba(91,76,219,0.2); }
.effect-icon { font-size: 24px; line-height: 1; }
.effect-name { font-size: 10px; font-weight: 600; opacity: 0.7; text-align: center; }
@media (max-width: 768px) {
#effectsPanel { bottom: 100px; max-width: 300px; padding: 12px; }
.effects-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.effect-item { padding: 8px 2px; }
.effect-icon { font-size: 22px; }
.effect-name { font-size: 9px; }
}
/* Reaction pills on messages */
.msg-reactions-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.msg-reaction-pill {
display: inline-flex;
align-items: center;
gap: 3px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 12px;
padding: 2px 7px;
font-size: 14px;
cursor: pointer;
transition: all 0.15s;
line-height: 1.3;
}
.msg-reaction-pill:hover { background: rgba(255,255,255,0.2); }
.msg-row.in .msg-reaction-pill {
background: rgba(91,76,219,0.15);
border-color: rgba(91,76,219,0.25);
}
/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Effects tabs */
.effects-tabs { display: flex; gap: 4px; margin-bottom: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.effects-tabs::-webkit-scrollbar { display: none; }
.effects-tab {
flex-shrink: 0; padding: 7px 10px; border: none; border-radius: 10px;
background: rgba(255,255,255,0.06); color: var(--text-secondary);
font-family: var(--font); font-size: 12px; font-weight: 600;
cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.effects-tab.active { background: var(--accent); color: white; }
.effects-tab:hover:not(.active) { background: rgba(255,255,255,0.1); }
/* Mask animations */
@keyframes maskFloat { 0%,100% { transform: translateY(0) translateX(-50%); } 50% { transform: translateY(-10px) translateX(-50%); } }
@keyframes maskSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes maskFall { 0% { transform: translateY(-20px); opacity: 1; } 100% { transform: translateY(calc(100vh)); opacity: 0.3; } }
/* New mask animations */
@keyframes maskMatrixFall { 0% { top: -20px; opacity: 1; } 100% { top: 100%; opacity: 0.2; } }
@keyframes maskBubble { 0% { transform: translateY(0) scale(1); opacity: 0.8; } 100% { transform: translateY(-400px) scale(1.5); opacity: 0; } }
@keyframes maskConfetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(500px) rotate(720deg); opacity: 0; } }
@keyframes maskButterfly { 0% { transform: translate(0,0) scaleX(1); } 25% { transform: translate(60px,-30px) scaleX(-1); } 50% { transform: translate(120px,10px) scaleX(1); } 75% { transform: translate(60px,40px) scaleX(-1); } 100% { transform: translate(0,0) scaleX(1); } }
@keyframes maskNeonBorder { 0% { border-color: #0ff; box-shadow: 0 0 15px #0ff, inset 0 0 15px rgba(0,255,255,0.1); } 33% { border-color: #f0f; box-shadow: 0 0 15px #f0f, inset 0 0 15px rgba(255,0,255,0.1); } 66% { border-color: #0f0; box-shadow: 0 0 15px #0f0, inset 0 0 15px rgba(0,255,0,0.1); } 100% { border-color: #0ff; box-shadow: 0 0 15px #0ff, inset 0 0 15px rgba(0,255,255,0.1); } }
@keyframes maskVHS { 0% { transform: translateX(0); } 50% { transform: translateX(2px); } 100% { transform: translateX(-1px); } }
@keyframes maskBlink { 0%,100% { opacity: 0.8; } 50% { opacity: 0.2; } }
@keyframes maskSparkle { 0%,100% { opacity: 0.2; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes maskGalaxy { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(5deg) scale(1.05); } }
@keyframes maskLightning { 0%,90%,100% { background: transparent; } 92%,97% { background: rgba(255,255,255,0.1); } }
@keyframes maskLightningBolt { 0%,85%,100% { opacity: 0; transform: translateX(-50%) scale(1); } 88% { opacity: 1; transform: translateX(-50%) scale(1.3); } 92% { opacity: 0; } }
/* More mask animations */
@keyframes maskPulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes maskFirework { 0% { transform: scale(0.5); opacity: 0; } 30% { transform: scale(1.2); opacity: 1; } 60% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(0.3); opacity: 0; } }
@keyframes maskPetal { 0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; } 50% { transform: translateY(250px) rotate(180deg) translateX(40px); opacity: 0.7; } 100% { transform: translateY(500px) rotate(360deg) translateX(-20px); opacity: 0; } }
@keyframes maskSwim { 0% { left: -15%; } 100% { left: 110%; } }
@keyframes maskWave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes maskDisco { 0% { background: rgba(255,0,0,0.06); } 25% { background: rgba(0,255,0,0.06); } 50% { background: rgba(0,0,255,0.06); } 75% { background: rgba(255,255,0,0.06); } }
@keyframes maskShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes maskZzz { 0% { opacity: 1; transform: translateY(0) scale(0.5); } 100% { opacity: 0; transform: translateY(-60px) scale(1); } }
/* Effects grid — 4 columns on wider panels */
#effectsPanel { max-height: 55vh; }
.effects-grid { grid-template-columns: repeat(4, 1fr); max-height: 40vh; overflow-y: auto; padding-right: 4px; }
.effects-grid::-webkit-scrollbar { width: 4px; }
.effects-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
/* Face AR canvas */
#faceCanvas {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 13;
border-radius: inherit;
}
/* Make local PiP a positioning context */
.call-local-pip { position: absolute; }
/* Reaction pills on messages */
.msg-reactions-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-reaction-pill { display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 2px 7px; font-size: 14px; cursor: pointer; transition: all 0.15s; line-height: 1.3; }
.msg-reaction-pill:hover { background: rgba(255,255,255,0.2); }
/* Effects tabs */
.effects-tabs { display: flex; gap: 4px; margin-bottom: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.effects-tabs::-webkit-scrollbar { display: none; }
.effects-tab { flex-shrink: 0; padding: 7px 10px; border: none; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--text-secondary); font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.effects-tab.active { background: var(--accent); color: white; }
#effectsPanel { max-height: 55vh; }
.effects-grid { grid-template-columns: repeat(4, 1fr); max-height: 40vh; overflow-y: auto; }
/* Mask animations */
@keyframes maskFloat { 0%,100% { transform: translateY(0) translateX(-50%); } 50% { transform: translateY(-10px) translateX(-50%); } }
@keyframes maskSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes maskFall { 0% { transform: translateY(-20px); opacity: 1; } 100% { transform: translateY(calc(100vh)); opacity: 0.3; } }
@keyframes maskConfetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(500px) rotate(720deg); opacity: 0; } }
@keyframes maskButterfly { 0% { transform: translate(0,0) scaleX(1); } 25% { transform: translate(60px,-30px) scaleX(-1); } 50% { transform: translate(120px,10px) scaleX(1); } 75% { transform: translate(60px,40px) scaleX(-1); } 100% { transform: translate(0,0) scaleX(1); } }
@keyframes maskBubble { 0% { transform: translateY(0) scale(1); opacity: 0.8; } 100% { transform: translateY(-400px) scale(1.5); opacity: 0; } }
@keyframes maskSparkle { 0%,100% { opacity: 0.2; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes maskPulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes maskPetal { 0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; } 50% { transform: translateY(250px) rotate(180deg) translateX(40px); opacity: 0.7; } 100% { transform: translateY(500px) rotate(360deg) translateX(-20px); opacity: 0; } }
@keyframes maskDisco { 0% { background: rgba(255,0,0,0.06); } 25% { background: rgba(0,255,0,0.06); } 50% { background: rgba(0,0,255,0.06); } 75% { background: rgba(255,255,0,0.06); } }
@keyframes maskMatrixFall { 0% { top: -20px; opacity: 1; } 100% { top: 100%; opacity: 0.2; } }
@keyframes maskNeonBorder { 0% { border-color: #0ff; box-shadow: 0 0 15px #0ff; } 33% { border-color: #f0f; box-shadow: 0 0 15px #f0f; } 66% { border-color: #0f0; box-shadow: 0 0 15px #0f0; } 100% { border-color: #0ff; box-shadow: 0 0 15px #0ff; } }
@keyframes maskVHS { 0% { transform: translateX(0); } 50% { transform: translateX(2px); } 100% { transform: translateX(-1px); } }
@keyframes maskBlink { 0%,100% { opacity: 0.8; } 50% { opacity: 0.2; } }
@keyframes maskLightning { 0%,90%,100% { background: transparent; } 92%,97% { background: rgba(255,255,255,0.1); } }
@keyframes maskLightningBolt { 0%,85%,100% { opacity: 0; transform: translateX(-50%) scale(1); } 88% { opacity: 1; transform: translateX(-50%) scale(1.3); } 92% { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
/* Check marks fix */
.msg-check { color: rgba(255,255,255,0.7); }
.msg-check svg { width: 18px; height: 13px; }
.msg-check svg polyline { stroke: rgba(255,255,255,0.7); stroke-width: 2.5; }
.msg-check.read { color: #7df; }
.msg-check.read svg polyline { stroke: #7df; }
.msg-check.read svg { filter: drop-shadow(0 0 3px rgba(119,221,255,0.5)); }
/* Image display fix */
.msg-image { overflow: hidden; border-radius: 12px; margin: -6px -8px; }
.msg-image img { max-width: 280px; max-height: 300px; width: 100%; border-radius: 0; display: block; cursor: pointer; object-fit: contain; background: rgba(0,0,0,0.15); }
/* PiP wrapper for mask overlay */
.call-local-pip-wrap {
position: absolute;
bottom: 140px;
right: 16px;
top: auto;
width: 120px;
height: 160px;
z-index: 12;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
border: 2px solid rgba(255,255,255,0.25);
cursor: grab;
touch-action: none;
}
.call-local-pip-wrap .call-local-pip {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
border: none;
border-radius: 0;
box-shadow: none;
z-index: auto;
transform: scaleX(-1);
}
.pip-mask-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 13;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
}
@media (min-width: 769px) {
.call-local-pip-wrap {
width: 160px;
height: 210px;
bottom: 130px;
right: 20%;
border-radius: 16px;
}
}
@media (max-width: 768px) {
.call-local-pip-wrap {
width: 100px;
height: 140px;
bottom: 120px;
right: 12px;
border-radius: 12px;
}
}
/* Group video call grid */
.group-video-item {
position: relative;
overflow: hidden;
background: #111;
min-height: 120px;
border-radius: 4px;
}
.group-video-item video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Live stream pulse */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
/* Telegram-style chat list context menu — compact and responsive */
.chat-list-menu {
min-width: 200px;
max-width: 260px;
font-family: var(--font);
}
@media (max-width: 480px) {
.chat-list-menu {
min-width: 170px;
max-width: 200px;
}
.chat-list-menu > div {
padding: 8px 12px !important;
font-size: 13px !important;
gap: 10px !important;
}
.chat-list-menu > div > span:first-child {
width: 16px !important;
height: 16px !important;
}
.chat-list-menu > div > span:first-child svg {
width: 16px !important;
height: 16px !important;
}
}
/* Action sheet animations (kept for desktop dialog fallback) */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
/* ═══════════════════════════════════════════════════════════════
* AVATAR FRAMES — animated decorative borders around avatars
* Applied via class `avatar-frame-wrap avatar-frame-` wrapping
* the actual .avatar / img element. The frame sits as a padding
* layer, with the avatar inset slightly so the frame is visible.
* ═══════════════════════════════════════════════════════════════ */
.avatar-frame-wrap {
position: relative;
display: inline-block;
line-height: 0;
border-radius: 50%;
padding: 3px; /* frame thickness */
box-sizing: content-box; /* padding grows outside — preserves avatar's natural size */
isolation: isolate; /* contains filters from bleeding to siblings */
/* The avatar inside may have inline border-radius (rounded-square); force it to circle
* so the frame ring sits flush with the avatar edge. Without this, a 16-20px avatar
* corner radius creates visible gaps between the avatar's rounded-square shape and the
* frame's perfect circle. */
}
.avatar-frame-wrap > *,
.avatar-frame-wrap .avatar,
.avatar-frame-wrap img {
border-radius: 50% !important;
display: block;
overflow: hidden;
}
/* Default (54px chat list) gets a slightly more visible ring. In messages the ring is
* thinner so it doesn't overwhelm the 30px avatar. */
.chat-item .avatar-frame-wrap { padding: 2.5px; }
.msg-avatar .avatar-frame-wrap,
[class*="avatar-frame-wrap"][style*="width:30px"],
.msg-row-wrap .avatar-frame-wrap { padding: 1.5px; }
/* ── 1. RAINBOW — rotating conic gradient ── */
.avatar-frame-rainbow {
background: conic-gradient(from 0deg,
#ff0080, #ff8c00, #ffd700, #32cd32, #00ced1,
#4169e1, #8a2be2, #ff1493, #ff0080);
animation: mc-frame-spin 3s linear infinite;
}
/* ── 2. GOLD — shimmering gradient with shine sweep ── */
.avatar-frame-gold {
background: conic-gradient(from 0deg,
#ffd700, #fff8dc, #ffaa00, #ffd700, #fff8dc, #cd7f32, #ffd700);
animation: mc-frame-spin 4s linear infinite;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}
/* ── 3. FIRE — orange/red flame ── */
.avatar-frame-fire {
background: conic-gradient(from 0deg,
#ff4500, #ff8c00, #ffff00, #ff4500, #dc143c, #ff0000, #ff4500);
animation: mc-frame-spin 1.5s linear infinite;
box-shadow: 0 0 18px rgba(255, 69, 0, 0.7);
filter: blur(0.3px);
}
.avatar-frame-fire::before {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,140,0,0.5) 0%, transparent 70%);
animation: mc-frame-pulse 1.2s ease-in-out infinite;
z-index: -1;
}
/* ── 4. NEON — cyan/magenta glow ── */
.avatar-frame-neon {
background: linear-gradient(135deg, #00ffff, #ff00ff);
animation: mc-frame-neon-pulse 2s ease-in-out infinite;
box-shadow:
0 0 8px #00ffff,
0 0 16px #ff00ff,
0 0 24px rgba(255, 0, 255, 0.6);
}
/* ── 5. ICE — cold blue crystal ── */
.avatar-frame-ice {
background: conic-gradient(from 0deg,
#ffffff, #b0e0e6, #00bfff, #87ceeb, #ffffff, #00ced1, #ffffff);
animation: mc-frame-spin 5s linear infinite;
box-shadow: 0 0 14px rgba(0, 191, 255, 0.7);
}
/* ── 6. HEART — pink with orbiting hearts ── */
.avatar-frame-heart {
background: linear-gradient(135deg, #ff69b4, #ff1493, #ffb6c1);
animation: mc-frame-heartbeat 1.4s ease-in-out infinite;
box-shadow: 0 0 12px rgba(255, 105, 180, 0.6);
}
.avatar-frame-heart::after {
content: '💖';
position: absolute;
top: -6px; left: 50%;
transform: translateX(-50%) scale(0.6);
animation: mc-frame-orbit 3s linear infinite;
pointer-events: none;
font-size: 14px;
filter: drop-shadow(0 0 3px rgba(255, 105, 180, 0.8));
}
/* ── 7. THUNDER — purple flickering ── */
.avatar-frame-thunder {
background: conic-gradient(from 0deg,
#4b0082, #8a2be2, #9370db, #4b0082, #7b68ee, #8a2be2);
animation: mc-frame-spin 2s linear infinite, mc-frame-flicker 0.4s steps(2) infinite;
box-shadow: 0 0 18px rgba(138, 43, 226, 0.8);
}
/* ── 8. COSMOS — dark with twinkling stars ── */
.avatar-frame-cosmos {
background:
radial-gradient(2px 2px at 20% 30%, #fff, transparent),
radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
radial-gradient(1px 1px at 50% 80%, #fff, transparent),
radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent),
linear-gradient(135deg, #0a0a2e, #16213e, #0f3460);
animation: mc-frame-twinkle 2s ease-in-out infinite;
box-shadow: 0 0 12px rgba(138, 43, 226, 0.5);
}
/* ── 9. EMERALD — bright green ── */
.avatar-frame-emerald {
background: conic-gradient(from 0deg,
#00ff88, #50c878, #00fa9a, #32cd32, #00ff88, #98fb98, #00ff88);
animation: mc-frame-spin 3.5s linear infinite;
box-shadow: 0 0 14px rgba(0, 255, 136, 0.6);
}
/* ── 10. SUNSET — warm orange/pink ── */
.avatar-frame-sunset {
background: linear-gradient(135deg, #ff6b6b, #ffa500, #ff69b4, #ff6b6b);
background-size: 200% 200%;
animation: mc-frame-sunset-flow 4s ease infinite;
box-shadow: 0 0 14px rgba(255, 107, 107, 0.6);
}
/* ── Keyframes ── */
@keyframes mc-frame-spin { to { transform: rotate(360deg); } }
@keyframes mc-frame-pulse { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes mc-frame-neon-pulse {
0%, 100% { box-shadow: 0 0 8px #00ffff, 0 0 16px #ff00ff, 0 0 24px rgba(255, 0, 255, 0.6); }
50% { box-shadow: 0 0 14px #00ffff, 0 0 24px #ff00ff, 0 0 36px rgba(255, 0, 255, 0.9); }
}
@keyframes mc-frame-heartbeat {
0%,100% { transform: scale(1); }
25% { transform: scale(1.04); }
50% { transform: scale(1); }
75% { transform: scale(1.03); }
}
@keyframes mc-frame-orbit {
from { transform: rotate(0deg) translateX(calc(50% + 4px)) rotate(0deg) scale(0.6); }
to { transform: rotate(360deg) translateX(calc(50% + 4px)) rotate(-360deg) scale(0.6); }
}
@keyframes mc-frame-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
@keyframes mc-frame-twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
@keyframes mc-frame-sunset-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
[class*="avatar-frame-"] { animation-duration: 8s !important; }
}
/* PWA install banner animations */
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
/* Status type picker tiles — subtle lift on hover, press feedback on tap */
.status-type-tile { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.status-type-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.status-type-tile:active { transform: translateY(0) scale(0.98); }
@keyframes popIn {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ============================================================
PWA SAFE AREA — content positioning when installed to home screen
============================================================
When MoonChat is launched standalone (from home screen), there's no
browser chrome / address bar to push content down. Phones with a notch
(iPhone 13+, most Androids 2020+) expose safe-area-inset-top/bottom
values the browser uses to tell us how much real-estate is cut off
by the notch and home-bar. Without these, our sidebar header/chat
header/bottom input bar render UNDER the notch or status bar.
Only applied in standalone mode so the regular browser UI is unchanged.
Strategy: DON'T touch #app / body / .main-layout — those set height:100vh and
adding padding there makes children spill outside. Instead we add the inset
space INSIDE each top/bottom bar's own padding. The bars still occupy their
normal space in flexbox, but their content is pushed into the safe zone. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
/* iPhone 14 Pro / iOS PWA fullscreen fix.
DON'T use position:fixed on html/body — iOS Safari gets confused and renders
nothing on some iOS versions. Instead, use min-height:100vh and make sure the
background colour extends to the edges via html's background. */
html { background: var(--bg-primary) !important; height: 100%; }
body { background: var(--bg-primary) !important; min-height: 100vh; min-height: 100dvh; }
#app { min-height: 100vh; min-height: 100dvh; background: var(--bg-primary); }
.main-layout { min-height: 100vh; min-height: 100dvh; }
.sidebar { min-height: 100vh; min-height: 100dvh; }
/* Safe-area padding goes inside bars so content doesn't hide under notch/indicator */
.sidebar-header { padding-top: calc(18px + env(safe-area-inset-top, 50px)) !important; }
.chat-header { padding-top: calc(12px + env(safe-area-inset-top, 50px)) !important; }
.splash { padding-top: env(safe-area-inset-top, 50px) !important; }
.input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom, 34px)) !important; }
.main-layout {
padding-left: env(safe-area-inset-left, 0px) !important;
padding-right: env(safe-area-inset-right, 0px) !important;
box-sizing: border-box !important;
}
.call-top-bar,
.call-controls-top {
padding-top: calc(12px + env(safe-area-inset-top, 50px)) !important;
}
.live-top-bar {
padding-top: calc(8px + env(safe-area-inset-top, 50px)) !important;
}
}
/* Глобально — сдвигаем top-бар эфира под Dynamic Island / status bar.
Работает не только в PWA, но и в обычном Safari (там safe-area тоже есть). */
.live-top-bar {
top: max(12px, env(safe-area-inset-top, 12px)) !important;
}
body.pwa-mode .live-top-bar,
body.ios-pwa .live-top-bar {
top: calc(env(safe-area-inset-top, 50px) - 4px) !important;
}
/* Видеозвонок — верхняя панель с именем/таймером тоже под Dynamic Island */
.call-top-bar {
padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
}
body.pwa-mode .call-top-bar,
body.ios-pwa .call-top-bar {
padding-top: calc(env(safe-area-inset-top, 50px) + 4px) !important;
}
/* Нижняя панель видеозвонка — под home-indicator */
.call-bottom-bar {
padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
}
body.pwa-mode .call-bottom-bar,
body.ios-pwa .call-bottom-bar {
padding-bottom: calc(env(safe-area-inset-bottom, 34px) + 8px) !important;
}
/* Эфир: нижняя панель с инпутом комментария — под home-indicator */
.live-bottom-bar {
padding-bottom: max(8px, calc(env(safe-area-inset-bottom, 8px) + 4px)) !important;
}
/* Эфир: лента комментариев — поднимаем чуть выше чтоб не упёрлась в инпут */
#liveComments {
bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Last-resort viewport enforcement via JS-measured --pwa-vh */
body.pwa-mode,
body.ios-pwa {
min-height: var(--pwa-vh, 100vh) !important;
}
/* Same rules via body.ios-pwa for iOS < 16 */
body.ios-pwa html,
body.ios-pwa { background: var(--bg-primary) !important; }
body.ios-pwa #app,
body.ios-pwa .main-layout { min-height: var(--pwa-vh, 100vh) !important; background: var(--bg-primary); }
body.ios-pwa .sidebar-header { padding-top: calc(18px + env(safe-area-inset-top, 50px)) !important; }
body.ios-pwa .chat-header { padding-top: calc(12px + env(safe-area-inset-top, 50px)) !important; }
body.ios-pwa .input-area { padding-bottom: calc(10px + env(safe-area-inset-bottom, 34px)) !important; }
body.ios-pwa .main-layout {
padding-left: env(safe-area-inset-left, 0px) !important;
padding-right: env(safe-area-inset-right, 0px) !important;
box-sizing: border-box !important;
}
/* ──────────────────────────────────────────────────────
Video-note recording overlay (WhatsApp/Telegram-style)
v165 — круглое видео-сообщение
────────────────────────────────────────────────────── */
/* Полноэкранный затемнённый фон + круглое превью камеры в центре */
.video-note-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 200;
pointer-events: none;
animation: fadeIn 0.18s ease;
}
.video-note-overlay > * { pointer-events: auto; }
.video-note-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.theme-light .video-note-backdrop {
background: rgba(255,255,255,0.55);
}
.video-note-circle-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
/* На устройствах с safe-area (iPhone X+) сдвигаем чуть ниже центра, чтобы таймер
не перекрывался Dynamic Island'ом и status bar'ом */
margin-top: env(safe-area-inset-top, 0px);
}
.video-note-timer-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,92,92,0.95);
color: #fff;
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
padding: 6px 12px;
border-radius: 100px;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.video-note-timer-pill .voice-rec-dot {
width: 8px; height: 8px;
background: #fff;
border-radius: 50%;
animation: voiceDotBlink 1s ease-in-out infinite;
}
@keyframes voiceDotBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.video-note-circle {
position: relative;
width: 260px;
height: 260px;
border-radius: 50%;
overflow: hidden;
background: #000;
box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 4px rgba(255,255,255,0.08);
}
.video-note-preview-slot {
width: 100%;
height: 100%;
background: #000;
position: relative;
}
.video-note-preview-slot canvas,
.video-note-preview-slot video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.video-note-preview-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.video-note-spinner {
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.2);
border-top-color: #fff;
animation: vnSpin 0.9s linear infinite;
}
@keyframes vnSpin {
to { transform: rotate(360deg); }
}
.video-note-progress-ring {
position: absolute;
inset: 0;
pointer-events: none;
}
.video-note-progress-ring svg {
width: 100%;
height: 100%;
}
.video-note-hint {
font-size: 13px;
color: rgba(255,255,255,0.85);
text-align: center;
max-width: 280px;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Lock-колонка для видео — выше и со светлой пилюлей в стиле Telegram */
.voice-rec-lock-column.video-note-lock-col {
bottom: calc(100% + 14px);
z-index: 220;
gap: 4px;
}
.voice-rec-lock-column.video-note-lock-col .voice-rec-lock-pill {
width: 44px;
height: 60px;
border-radius: 22px;
background: rgba(255,255,255,0.92);
border: none;
color: #1a1a1a;
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
body.theme-light .voice-rec-lock-column.video-note-lock-col .voice-rec-lock-pill {
background: rgba(255,255,255,0.98);
color: #1a1a1a;
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.voice-rec-lock-column.video-note-lock-col .voice-rec-lock-chev {
opacity: 0.9;
}
/* Locked-режим — скрываем подсказку, добавляем нижнюю панель кнопок */
.video-note-overlay.locked .video-note-hint { display: none; }
.video-note-ctrls {
position: absolute;
left: 0; right: 0;
bottom: calc(28px + env(safe-area-inset-bottom, 0px));
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
gap: 16px;
}
.video-note-ctrls .voice-rec-trash-btn,
.video-note-ctrls .voice-rec-send-btn {
width: 56px;
height: 56px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
.video-note-ctrls .voice-rec-send-btn {
background: var(--accent);
color: #fff;
}
.video-note-ctrls .voice-rec-trash-btn {
background: rgba(255,255,255,0.95);
color: #ff5c5c;
}
.video-note-locked-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: rgba(0,0,0,0.45);
padding: 8px 14px;
border-radius: 100px;
}
/* ──────────────────────────────────────────────────────
Video-note message bubble (in chat)
────────────────────────────────────────────────────── */
/* Обёртка вокруг кружка — без фона/паддинга, чтобы не было фиолетовой коробки */
.video-note-wrap {
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
display: inline-block;
max-width: 240px;
}
.video-note-wrap .msg-time {
font-size: 11px;
opacity: 0.55;
margin-top: 4px;
padding: 0 4px;
}
.video-note-msg {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%;
overflow: hidden;
background: #000;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
display: block;
}
.video-note-msg video {
width: 100%;
height: 100%;
object-fit: cover;
background: #000;
display: block;
}
.video-note-msg-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
/* Иконка muted в правом верхнем углу — только когда видео ИГРАЕТ без звука */
.video-note-msg-mute {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
opacity: 0;
transition: opacity 0.2s ease;
}
/* Скрываем mute-иконку когда играет со звуком */
.video-note-msg.with-sound .video-note-msg-mute { opacity: 0; }
/* Иконка play по центру — показывается когда видео не играет */
.video-note-msg-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
pointer-events: none;
transition: opacity 0.2s ease;
}
.video-note-msg.with-sound .video-note-msg-play { opacity: 0; }
.video-note-msg-dur {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: #fff;
background: rgba(0,0,0,0.6);
padding: 4px 10px;
border-radius: 100px;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
white-space: nowrap;
}
.video-note-msg-dur svg { stroke: rgba(255,255,255,0.95); flex-shrink: 0; }
/* Mobile — чуть меньше */
@media (max-width: 600px) {
.video-note-msg { width: 200px; height: 200px; }
.video-note-circle { width: 240px; height: 240px; }
}