*{margin:0;padding:0;box-sizing:border-box}:root{--bg-main: #020617;--bg-glass: rgba(15, 23, 42, .92);--bg-glass-soft: rgba(15, 23, 42, .85);--accent: #6366f1;--accent-soft: #4f46e5;--accent-strong: #8b5cf6;--text-primary: #e5e7eb;--text-secondary: #9ca3af;--border-subtle: rgba(148, 163, 184, .35);--danger: #ef4444;--success: #22c55e;--shadow-strong: 0 24px 80px rgba(0, 0, 0, .9);--message-sent-bg: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);--message-received-bg: rgba(15, 23, 42, .95);--message-received-text: #e5e7eb}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100vh;overflow:hidden;color:var(--text-primary);background:linear-gradient(180deg,rgba(15,23,42,.8),rgba(15,23,42,.95)),url(/wallpapers/chat-bg.jpg) center center / cover no-repeat fixed}.chat-page{height:100vh;width:100vw;display:flex;align-items:stretch;justify-content:center;padding:0}.chat-container{height:100vh;width:100%;display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(15,23,42,.98));border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle);box-shadow:var(--shadow-strong);position:relative}.chat-header{padding:14px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);backdrop-filter:blur(18px);background:radial-gradient(circle at top left,rgba(56,189,248,.12),transparent 55%),radial-gradient(circle at top right,rgba(129,140,248,.25),transparent 60%),rgba(15,23,42,.96)}.chat-header-left{display:flex;flex-direction:column;gap:4px}.chat-title{font-size:16px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#e5e7eb}.chat-header-right{display:flex;align-items:center;gap:10px}.chat-header-user{display:flex;flex-direction:column;gap:2px}.chat-header-username{font-size:14px;font-weight:600}.chat-header-mode{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary)}.user-avatar{width:34px;height:34px;border-radius:999px;background:radial-gradient(circle at top left,#a855f7,#4f46e5);display:flex;align-items:center;justify-content:center;color:#e5e7eb;font-weight:700;font-size:14px;box-shadow:0 0 0 2px #0f172ae6}.voice-call-btn{border-radius:999px;border:none;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;background:radial-gradient(circle at top left,#22c55e,#16a34a);color:#fff;box-shadow:0 14px 35px #22c55e73;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.voice-call-btn.end{background:radial-gradient(circle at top left,#ef4444,#b91c1c);box-shadow:0 14px 35px #ef444473}.voice-call-btn:active{transform:translateY(1px) scale(.98);box-shadow:0 8px 18px #0009}.user-status{font-size:12px;opacity:.9;margin-top:2px;display:flex;align-items:center;gap:6px;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.online{background:#22c55e;box-shadow:0 0 10px #22c55ee6}.status-dot.offline{background:#475569}.typing-indicator-text{color:var(--accent);font-style:italic}.chat-messages{flex:1;overflow-y:auto;padding:20px 16px 80px;background:radial-gradient(circle at top left,rgba(15,118,110,.25),transparent 55%),radial-gradient(circle at bottom right,rgba(59,130,246,.35),transparent 60%),rgba(15,23,42,1)}.chat-messages-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column}.chat-messages::-webkit-scrollbar{width:7px}.chat-messages::-webkit-scrollbar-track{background:rgba(15,23,42,.9)}.chat-messages::-webkit-scrollbar-thumb{background:rgba(148,163,184,.6);border-radius:999px}.chat-messages::-webkit-scrollbar-thumb:hover{background:rgba(209,213,219,.8)}.message{margin-bottom:14px;display:flex;animation:fadeInUp .2s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.message.sent{justify-content:flex-end}.message.received{justify-content:flex-start}.message.sent .message-content{background:var(--message-sent-bg);color:#f9fafb;border-bottom-right-radius:6px}.message.received .message-content{background:var(--message-received-bg);color:var(--message-received-text);border:1px solid rgba(148,163,184,.4);border-bottom-left-radius:6px}.message-time{font-size:11px;opacity:.7;margin-top:4px;text-align:right}.message.received .message-time{text-align:left}.message-text{white-space:pre-wrap;word-break:break-word}.typing-indicator{display:flex;align-items:center;gap:8px;padding:8px 4px;color:var(--text-secondary);font-size:12px;font-style:italic}.typing-dots{display:flex;gap:3px}.typing-dot{width:6px;height:6px;background:var(--accent);border-radius:999px;animation:typing 1.3s infinite}.typing-dot:nth-child(2){animation-delay:.15s}.typing-dot:nth-child(3){animation-delay:.3s}@keyframes typing{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}.chat-input-area{border-top:1px solid var(--border-subtle);padding:12px 16px 18px;background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.97))}.chat-input-inner{max-width:760px;margin:0 auto;display:flex;gap:10px;align-items:flex-end}.message-input{flex:1;min-height:42px;max-height:130px;border-radius:999px;padding:10px 14px;font-size:14px;border:1px solid rgba(148,163,184,.7);outline:none;background:rgba(15,23,42,.9);color:var(--text-primary);resize:none;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.message-input::placeholder{color:#94a3b8e6}.message-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px #818cf8cc;background:rgba(15,23,42,.98)}.send-button{border-radius:999px;border:none;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#f9fafb;box-shadow:0 14px 40px #4f46e599;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;white-space:nowrap}.send-button:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}.send-button:not(:disabled):active{transform:translateY(1px) scale(.98);box-shadow:0 8px 24px #4f46e5b3}.panic-button{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px));width:44px;height:44px;background:radial-gradient(circle at top left,#fb7185,#ef4444);color:#fff;border:none;border-radius:999px;font-size:20px;cursor:pointer;z-index:2000;box-shadow:0 12px 40px #f8717199;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,box-shadow .12s ease}.panic-button:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 16px 50px #f87171cc}.credit-footer{position:absolute;left:50%;bottom:12px;transform:translate(-50%);padding:6px 16px;border-radius:999px;font-size:12px;font-weight:500;background:radial-gradient(circle at top left,rgba(129,140,248,.3),rgba(30,64,175,.95));color:#e5e7eb;display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(191,219,254,.5);box-shadow:0 14px 45px #0f172af2;z-index:50}.credit-heart{color:#fb7185}.unread-badge{position:absolute;right:24px;bottom:96px;background:linear-gradient(135deg,#fb7185,#f97316);color:#fff;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;z-index:40;display:flex;align-items:center;gap:6px;box-shadow:0 14px 40px #f87171b3}.unread-count{background:rgba(15,23,42,.98);color:#fb7185;width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:10px}.unread-arrow{font-size:14px}.incoming-call-popup{position:fixed;top:72px;left:50%;transform:translate(-50%);background:rgba(15,23,42,.98);color:#e5e7eb;padding:10px 16px;border-radius:999px;display:flex;align-items:center;gap:10px;border:1px solid rgba(148,163,184,.6);box-shadow:0 18px 50px #000000e6;z-index:1500;backdrop-filter:blur(18px);font-size:13px}.incoming-call-btn{border-radius:999px;border:none;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer}.incoming-call-btn.accept{background:#22c55e;color:#fff}.incoming-call-btn.reject{background:#ef4444;color:#fff}.call-bubble{position:fixed;width:260px;padding:8px 10px;border-radius:999px;background:rgba(15,23,42,.98);color:#e5e7eb;display:flex;align-items:center;gap:8px;box-shadow:0 24px 60px #000000f2;border:1px solid rgba(148,163,184,.7);backdrop-filter:blur(20px);cursor:grab;z-index:1400}.call-bubble-icon{width:30px;height:30px;border-radius:999px;background:radial-gradient(circle at top left,#4f46e5,#0f172a);display:flex;align-items:center;justify-content:center;font-size:16px}.call-bubble-info{flex:1;min-width:0}.call-bubble-user{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-bubble-status{font-size:11px;color:var(--text-secondary)}.call-bubble-btn{border-radius:999px;border:none;padding:4px 8px;font-size:11px;cursor:pointer;background:rgba(30,64,175,.95);color:#e5e7eb}.call-bubble-btn.end{background:#ef4444}.login-container,.pin-container{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(15,23,42,.98)),url(/wallpapers/chat-bg.jpg) center center / cover no-repeat fixed;padding:20px}.login-box,.pin-box{background:rgba(15,23,42,.95);padding:32px;border-radius:20px;box-shadow:0 26px 80px #000000e6;width:100%;max-width:380px;backdrop-filter:blur(18px);border:1px solid rgba(148,163,184,.4)}.login-box h1,.pin-box h1{text-align:center;margin-bottom:24px;font-size:26px;font-weight:700;background:linear-gradient(135deg,#4f46e5,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.form-group{margin-bottom:18px}.form-group input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid rgba(148,163,184,.8);background:rgba(15,23,42,.98);color:var(--text-primary);font-size:14px;outline:none}.form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 1px #818cf8e6}.login-button{width:100%;padding:12px 16px;margin-top:4px;border-radius:12px;border:none;cursor:pointer;font-size:14px;font-weight:600;background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#f9fafb;box-shadow:0 16px 45px #4f46e5e6}.login-button:disabled{opacity:.5;box-shadow:none;cursor:default}.error-message{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:18px;text-align:center}.pin-box p{color:var(--text-secondary);font-size:13px;margin-bottom:20px}.pin-input{width:100%;padding:14px;border-radius:12px;border:1px solid rgba(148,163,184,.8);background:rgba(15,23,42,.98);color:var(--text-primary);font-size:22px;text-align:center;letter-spacing:10px}@media (max-width: 768px){.chat-container{margin-top:12px;height:calc(100vh - 12px)}.chat-header{padding:10px 14px}.chat-messages{padding:12px 10px 72px}.chat-input-area{padding:8px 10px 14px}.chat-messages-inner,.chat-input-inner{max-width:100%}.panic-button{top:calc(12px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));width:40px;height:40px}.credit-footer{bottom:8px;padding-inline:10px;font-size:11px}.unread-badge{right:12px;bottom:78px}.call-bubble{width:235px;left:50%!important;bottom:80px!important;top:auto!important;transform:translate(-50%)}}.message-actions{margin-top:4px;display:flex;gap:6px;justify-content:flex-end;opacity:0;transition:opacity .15s ease;font-size:11px}.message-action-btn{border:none;background:rgba(15,23,42,.9);cursor:pointer;padding:3px 8px;border-radius:999px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px;box-shadow:0 4px 12px #0f172acc}.reply-preview{margin-bottom:8px;padding:8px 12px;border-radius:14px;background:rgba(15,23,42,.95);border:1px solid rgba(148,163,184,.6);font-size:13px;box-shadow:0 14px 40px #000000d9}.reply-preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--text-secondary)}.reply-cancel-btn{border:none;background:transparent;cursor:pointer;font-size:14px;line-height:1;color:var(--text-secondary)}.reply-preview-content{font-size:13px;opacity:.95;color:var(--text-primary)}.message-reply{border-left:3px solid var(--accent);padding-left:8px;margin-bottom:6px;opacity:.8;font-size:12px;border-radius:4px;background:rgba(148,163,184,.1);transition:all .2s ease}.clickable-reply{cursor:pointer;border-left:3px solid #8b5cf6;background:rgba(139,92,246,.1)}.clickable-reply:hover{background:rgba(139,92,246,.2);opacity:1;transform:translate(2px)}.clickable-reply:active{transform:translate(1px)}.message-reply-username{font-weight:600;color:var(--accent);margin-bottom:2px;display:flex;align-items:center;gap:4px}.clickable-reply .message-reply-username{color:#8b5cf6}.message-reply-content{color:var(--text-secondary);line-height:1.3}.clickable-reply .message-reply-content{color:#c4b5fd}.message.highlighted .message-content{animation:highlightPulse 3s ease-in-out;position:relative}.message.highlighted .message-content:before{content:"";position:absolute;inset:-2px;border:2px solid #8b5cf6;border-radius:20px;animation:borderPulse 3s ease-in-out;pointer-events:none}@keyframes highlightPulse{0%{background:rgba(139,92,246,.3);transform:scale(1.02)}50%{background:rgba(139,92,246,.5);transform:scale(1.03)}to{background:transparent;transform:scale(1)}}@keyframes borderPulse{0%{opacity:1;border-color:#8b5cf6}70%{opacity:1;border-color:#8b5cf6}to{opacity:0;border-color:transparent}}.message:hover .message-content{transform:translateY(-1px);box-shadow:0 8px 25px #00000026}.message.sent:hover .message-content{box-shadow:0 8px 25px #4f46e54d}.message.received:hover .message-content{box-shadow:0 8px 25px #0f172a66}.date-divider{text-align:center;color:#fb7185;font-size:11px;margin:12px 0;letter-spacing:.15em}.new-messages-divider{color:red;text-align:center;font-weight:700;margin:8px 0}.tick{margin-left:6px;font-size:12px}.emoji-bar{display:flex;flex-direction:column;gap:6px}.message-status{margin-left:4px;font-size:11px}.new-messages-divider{display:flex;align-items:center;margin:10px 0;color:#f97373;font-size:11px;font-weight:600}.new-messages-divider:before{content:"";flex:1;height:1px;background:#f97373;opacity:.7;margin-right:6px}.new-messages-divider span{padding:2px 8px;background:#f97373;color:#111827;border-radius:999px}.chat-input-row{display:flex;gap:10px;align-items:flex-end}.emoji-wrapper{display:flex;flex-direction:column;gap:6px;position:relative}.emoji-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--border-subtle);background:rgba(15,23,42,.95);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:0 6px 16px #0009;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.emoji-btn:hover{transform:translateY(-1px);box-shadow:0 10px 25px #000c;background:rgba(30,64,175,.95)}.emoji-btn.heart-btn{background:radial-gradient(circle at top left,#fb7185,#ec4899);border-color:#f87171cc}.emoji-picker{position:absolute;bottom:80%;left:0;transform:translateY(-8px);background:rgba(15,23,42,.98);border-radius:14px;padding:8px;max-width:220px;max-height:180px;overflow-y:auto;box-shadow:0 18px 50px #000000e6;border:1px solid rgba(148,163,184,.6);display:grid;grid-template-columns:repeat(6,1fr);gap:4px;z-index:1200}.message-actions{margin-top:6px;display:flex;gap:6px;justify-content:flex-end;opacity:0;transition:opacity .15s ease;font-size:11px}.message:hover .message-actions{opacity:1}.message-action-btn{border:none;background:rgba(15,23,42,.85);cursor:pointer;padding:4px 10px;border-radius:999px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px;box-shadow:0 4px 12px #0f172acc;letter-spacing:.02em}.message-action-btn:hover{background:rgba(30,64,175,.95);color:#e5e7eb}.message-action-btn.delete{background:rgba(127,29,29,.9);color:#fecaca}.message-action-btn.delete:hover{background:rgba(185,28,28,.98);color:#fee2e2}.edit-banner{padding:6px 10px;border-radius:10px;background:rgba(30,64,175,.9);color:#e5e7eb;font-size:12px;display:flex;align-items:center;justify-content:space-between}.edit-cancel-btn{border:none;background:transparent;color:#bfdbfe;cursor:pointer;font-size:12px}.message-input{flex:1;min-height:42px;max-height:130px;border-radius:12px;padding:10px 14px;font-size:14px;border:1px solid rgba(148,163,184,.7);outline:none;background:rgba(15,23,42,.9);color:var(--text-primary);resize:none;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.chat-input-row{display:flex;gap:8px;align-items:flex-end}.emoji-inline-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.emoji-inline-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border-subtle);background:rgba(15,23,42,.95);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:0 6px 16px #0009;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.emoji-inline-btn:hover{transform:translateY(-1px);box-shadow:0 10px 25px #000c;background:rgba(30,64,175,.95)}.emoji-inline-btn.heart-btn{background:radial-gradient(circle at top left,#fb7185,#ec4899);border-color:#f87171cc}.emoji-picker{position:absolute;bottom:110%;left:0;background:rgba(15,23,42,.98);border-radius:14px;padding:8px;max-width:220px;max-height:180px;overflow-y:auto;box-shadow:0 18px 50px #000000e6;border:1px solid rgba(148,163,184,.6);display:grid;grid-template-columns:repeat(6,1fr);gap:4px;z-index:1200}.emoji-picker-item{border:none;background:transparent;cursor:pointer;font-size:20px;line-height:1}.message-reaction{margin-top:4px;font-size:13px}.message-date-label{opacity:.8}.date-divider{display:flex;align-items:center;justify-content:center;margin:10px 0;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary)}.date-divider span{padding:4px 10px;border-radius:999px;background:rgba(15,23,42,.95);border:1px solid rgba(148,163,184,.5);box-shadow:0 10px 30px #000000b3}.message-content{max-width:70%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5;position:relative;word-wrap:break-word;box-shadow:0 10px 30px #0f172abf}.message-menu{position:absolute;top:-8px;right:6px;display:none;padding:4px 6px;border-radius:999px;background:rgba(15,23,42,.96);border:1px solid rgba(148,163,184,.6);box-shadow:0 10px 30px #000000e6;gap:4px;align-items:center;z-index:20}.message-menu.visible{display:inline-flex}.message-menu-btn{width:22px;height:22px;padding:0;border-radius:999px;border:none;background:transparent;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.message-menu-btn.danger{color:#fecaca}.message-actions{display:none!important}.message-reaction span{background:rgba(15,23,42,.9);padding:2px 8px;border-radius:999px;box-shadow:0 4px 12px #000c}.message-edited-label{margin-left:4px;font-size:10px;opacity:.7}.chat-input-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:8px;align-items:stretch}.chat-input-row{display:flex;gap:8px;align-items:center}.message-input-wrapper{flex:1;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:12px;border:1px solid rgba(148,163,184,.7);background:rgba(15,23,42,.9);box-shadow:0 10px 30px #000000b3}.message-input-core{flex:1;min-height:36px;max-height:120px;border:none;outline:none;resize:none;background:transparent;color:var(--text-primary);font-size:14px}.message-input-icon-btn{width:30px;height:30px;border-radius:8px;border:none;background:rgba(15,23,42,.95);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;box-shadow:0 6px 16px #0009;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;color:var(--text-secondary)}.message-input-icon-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px #000c;background:rgba(30,64,175,.95);color:#e5e7eb}.send-btn-icon{font-size:18px}.emoji-inline-btn{width:38px;height:38px;border-radius:10px;border:1px solid rgba(248,113,113,.8);background:radial-gradient(circle at top left,#fb7185,#ec4899);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:0 8px 22px #f87171b3;color:#fee2e2}.emoji-inline-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px #f87171e6}