:root { --bg-primary: #121212; --bg-secondary: #1e1e1e; --text-primary: #e0e0e0; --text-secondary: #a0a0a0; --accent-color: #3b82f6; --accent-hover: #2563eb; --border-color: #333; --font-family: 'Inter', 'Vazirmatn', sans-serif; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
body, html { height: 100%; font-family: var(--font-family); background-color: var(--bg-primary); color: var(--text-primary); overflow: hidden; overscroll-behavior-y: none;} /* رفتار اپلیکیشن */
.hidden { display: none !important; } .screen { height: 100%; width: 100%; display: flex; flex-direction: column; }
.fade-in { animation: fadeIn 0.5s ease-out; } .slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .scale-in { animation: scaleIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes msgPop { 0% { transform: scale(0.8) translateY(10px); opacity: 0; } 70% { transform: scale(1.02) translateY(-2px); } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes burnAway { 0% { filter: brightness(1.5) blur(0px); transform: scale(1); opacity: 1; } 50% { filter: brightness(2) blur(4px) sepia(1); transform: scale(1.05) translateY(-5px); opacity: 0.8; } 100% { filter: blur(10px); transform: scale(0.8) translateY(-20px); opacity: 0; height: 0; margin: 0; padding: 0; } }
@keyframes avatarPop { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }

#landing-screen, #login-screen { justify-content: center; align-items: center; padding: 20px; text-align: center;}
.login-card, .modal-content { background: var(--bg-secondary); padding: 25px; border-radius: 16px; width: 100%; max-width: 400px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: left;}
label { display: block; margin-bottom: 6px; font-size: 0.85rem; color: var(--text-secondary); margin-top: 15px;}
input[type="text"] { width: 100%; padding: 12px; background: var(--bg-primary); border: 1px solid var(--border-color); color: white; border-radius: 8px; outline: none; transition: 0.2s;} input[type="text"]:focus { border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); }
.error-text { color: #ef4444; font-size: 0.85rem; margin-top: 10px; display: none; }
.avatar-selector { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; } .avatar-option { font-size: 1.5rem; padding: 8px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; transition: 0.2s; } .avatar-option.selected { border-color: var(--accent-color); background: rgba(59, 130, 246, 0.2); transform: scale(1.1); }
button { padding: 12px 24px; background-color: var(--accent-color); color: white; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; transition: 0.2s; } button:hover { background-color: var(--accent-hover); transform: translateY(-1px); } button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.outline-btn { background: transparent; border: 1px solid var(--border-color); padding: 8px 12px; font-size: 0.85rem;}

.chat-header { height: 65px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); flex-shrink: 0; z-index: 10;}
.header-info { display: flex; align-items: center; gap: 12px; } .online-pulse { width: 10px; height: 10px; background: #10b981; border-radius: 50%; box-shadow: 0 0 8px #10b981; animation: pulse 2s infinite; } @keyframes pulse { 0% {box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);} 70% {box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);} 100% {box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);} } .online-status { font-size: 0.75rem; color: #10b981; }
.typing-container { padding: 5px 20px; font-size: 0.75rem; color: var(--accent-color); background: rgba(59, 130, 246, 0.05); border-bottom: 1px solid var(--border-color); font-style: italic; transition: 0.3s; height: 25px; display: flex; align-items: center;} .dots span { animation: typingDots 1.4s infinite; opacity: 0.2; font-weight: bold; font-size: 1rem;} .dots span:nth-child(2) { animation-delay: 0.2s; } .dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingDots { 0%, 100% { opacity: 0.2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.chat-history { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; scroll-behavior: smooth;}
.message-row { display: flex; width: 100%; flex-direction: column; transform-origin: bottom; animation: msgPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .message-row.mine { align-items: flex-end; } .message-row.theirs { align-items: flex-start; } .message-row.pending { opacity: 0.6; } 
.msg-header { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 0.75rem; color: var(--text-secondary); } .message-row.mine .msg-header { flex-direction: row-reverse; } 
.msg-status { font-size: 0.7rem; color: var(--accent-color); font-weight: bold; margin-right: 5px; display: flex; align-items: center; gap: 3px;}
.read-avatar { font-size: 0.75rem; animation: avatarPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; background: rgba(255,255,255,0.1); border-radius: 50%; padding: 2px;}

.message-bubble { max-width: 80%; padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; position: relative; overflow: hidden;} .message-row.mine .message-bubble { background: #3b82f6; border-bottom-right-radius: 4px; } .message-row.theirs .message-bubble { background: #2a2a2a; border-bottom-left-radius: 4px; }
.message-bubble.is-burn { filter: blur(5px); cursor: pointer; border: 1px solid #ef4444; background: repeating-linear-gradient(45deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.1) 10px, transparent 10px, transparent 20px) !important;} .message-bubble.is-burn:active { filter: blur(2px); } .message-bubble.is-burn.revealed { filter: blur(0); border-color: #ef4444; background: #2a2a2a !important; cursor: default; } .burning-animation { animation: burnAway 0.8s ease-in forwards !important; pointer-events: none; }

.chat-input-area { padding: 15px; padding-bottom: max(15px, env(safe-area-inset-bottom)); background: var(--bg-secondary); border-top: 1px solid var(--border-color); } .burn-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .toggle-container { display: flex; align-items: center; gap: 10px; } .toggle-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500;} .switch { position: relative; display: inline-block; width: 40px; height: 22px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.5);} input:checked + .slider:before { transform: translateX(18px); }
.burn-select { background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; outline: none; }
.input-wrapper { display: flex; gap: 10px; background: var(--bg-primary); padding: 8px; border-radius: 24px; border: 1px solid var(--border-color); } #message-input { flex-grow: 1; background: transparent; border: none; color: white; font-family: inherit; font-size: 1rem; padding: 8px; resize: none; max-height: 120px; outline: none; } #send-btn { border-radius: 20px; }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 100; padding: 20px; } .otp-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;} .otp-chip { background: #3b82f6; padding: 6px 12px; border-radius: 8px; font-family: monospace; font-size: 1.1rem; letter-spacing: 2px; font-weight: bold; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);}
#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; } .toast { background: #333; color: white; padding: 10px 20px; border-radius: 20px; font-size: 0.9rem; animation: slideUp 0.3s, fadeOut 0.5s 2.5s forwards; border: 1px solid var(--border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.5);} @keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

.participant-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-primary); border-radius: 8px; border: 1px solid var(--border-color); position: relative; overflow: hidden;}
.participant-avatar { font-size: 1.5rem; } .participant-info { flex-grow: 1; } .participant-name { font-size: 0.9rem; font-weight: 500; color: white; } .participant-seen { font-size: 0.75rem; color: var(--text-secondary); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; } .status-dot.online { background-color: #10b981; box-shadow: 0 0 5px #10b981; } .status-dot.offline { background-color: #6b7280; }
.ban-btn { background: #ef4444; padding: 4px 10px; font-size: 0.7rem; color: white; border-radius: 6px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.banned-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: #ef4444; z-index: 9999; display: flex; justify-content: center; align-items: center; color: white; font-size: 2rem; font-weight: bold; animation: burnAway 1.5s forwards; }