* { margin:0; padding:0; box-sizing:border-box; font-family:Tahoma,sans-serif; }
html, body { width:100%; height:100%; background:#1a1a2e; overflow:hidden; }
.container {
    width:100%; height:100%;
    display:flex; flex-direction:column;
    background:#16213e; padding:10px;
}
#login {
    flex:1; display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    text-align:center; color:#eee;
    gap:15px;
}
#login h2 { font-weight:normal; }
#login .login-box {
    background:#0f3460;
    padding:30px;
    border-radius:16px;
    width:90%;
    max-width:380px;
}
#login .login-box input {
    width:100%; padding:12px 16px;
    border-radius:30px; border:none;
    background:#1a1a2e; color:#fff;
    font-size:15px; outline:none; margin-bottom:10px;
}
#login .login-box button {
    width:100%; padding:12px;
    border-radius:30px; border:none;
    background:#e94560; color:#fff;
    font-size:16px; font-weight:bold; cursor:pointer;
}
#login .login-box button:hover { opacity:0.8; }
#login .login-box .toggle-link {
    color:#4fc3f7; cursor:pointer; font-size:14px;
    display:block; margin-top:10px;
}
#login .login-box .toggle-link:hover { text-decoration:underline; }
.error-msg {
    color:#ff6b6b;
    background:#2d1a1a;
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
    display:inline-block;
    margin-bottom:10px;
}
.error-msg .rule {
    color:#aaa;
    font-size:12px;
    margin-top:5px;
}
.banned-msg {
    color:#ff6b6b;
    background:#2d1a1a;
    padding:20px;
    border-radius:16px;
    font-size:16px;
    text-align:center;
}
#app {
    display:none; flex:1; flex-direction:column; height:100%; gap:8px;
}
.header {
    display:flex; justify-content:space-between; align-items:center;
    background:#0f3460; padding:8px 16px;
    border-radius:30px; flex-shrink:0;
    gap:8px;
    flex-wrap:wrap;
}
.header-left {
    display:flex; align-items:center; gap:10px; cursor:pointer;
}
.header-left .avatar {
    width:40px; height:40px; border-radius:50%; background:#4a6fa5;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#fff; font-weight:bold;
    overflow:hidden; flex-shrink:0;
}
.header-left .avatar img {
    width:100%; height:100%; object-fit:cover;
}
.header-left .user-info {
    display:flex; flex-direction:column; color:#aaa;
}
.header-left .user-info .name {
    color:#f7c948; font-weight:bold; font-size:14px;
}
.header-left .user-info .status {
    font-size:11px; color:#4fc3f7;
}
.header-actions {
    display:flex; gap:6px; flex-wrap:wrap;
    align-items:center;
}
.header-actions button, .header-actions a {
    background:transparent; border:1px solid #4a6fa5; color:#aaa;
    padding:4px 12px; border-radius:20px; cursor:pointer; font-size:12px;
    white-space:nowrap; text-decoration:none; display:inline-flex;
    align-items:center; gap:4px; height:32px;
}
.header-actions button:hover, .header-actions a:hover {
    background:#4a6fa5; color:#fff;
}
.header-actions button.admin-btn {
    display:inline-block !important;
}
.header-actions .search-icon {
    border:none; padding:4px 8px; height:auto;
}
.tabs {
    display:flex; gap:4px; padding:4px 8px;
    background:#0f3460; border-radius:16px;
    flex-shrink:0;
    overflow-x:auto;
}
.tabs button {
    padding:6px 16px; border-radius:12px; border:none;
    background:transparent; color:#888;
    cursor:pointer; font-size:13px; white-space:nowrap;
    transition: all 0.3s;
}
.tabs button:hover { background:#1a1a2e; color:#fff; }
.tabs button.active { background:#e94560; color:#fff; }
.main {
    display:flex; flex:1; gap:8px; min-height:0;
}
.sidebar {
    width:100%; background:#0f3460; border-radius:16px;
    display:flex; flex-direction:column; padding:8px; flex-shrink:0;
    overflow:hidden;
}
.sidebar .search {
    padding:8px 12px; border-radius:20px; border:none;
    background:#1a1a2e; color:#fff; font-size:14px;
    outline:none; margin-bottom:8px;
}
.sidebar .chats-list {
    flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
}
.sidebar .chat-item {
    padding:10px 12px; border-radius:12px; cursor:pointer;
    display:flex; align-items:center; gap:10px;
    color:#aaa; transition: background 0.2s;
    text-decoration:none;
}
.sidebar .chat-item:hover { background:#1a1a2e; }
.sidebar .chat-item .chat-avatar {
    width:35px; height:35px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:bold; color:#fff;
    flex-shrink:0; overflow:hidden; background:#4a6fa5;
}
.sidebar .chat-item .chat-avatar img { width:100%; height:100%; object-fit:cover; }
.sidebar .chat-item .chat-info { flex:1; overflow:hidden; }
.sidebar .chat-item .chat-info .chat-name { font-size:14px; font-weight:bold; }
.sidebar .chat-item .chat-info .chat-last {
    font-size:12px; color:#666;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar .chat-item .chat-badge { font-size:10px; padding:2px 8px; border-radius:10px; background:#4a6fa5; color:#fff; }
.sidebar .chat-item .chat-badge.group { background:#e94560; }
.sidebar .chat-item .chat-badge.channel { background:#f7c948; color:#1a1a2e; }
.sidebar .chat-item .chat-badge.pv { background:#4fc3f7; color:#1a1a2e; }
.chat-area {
    flex:1; display:flex; flex-direction:column;
    background:#0f3460; border-radius:16px; overflow:hidden;
}
.chat-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 16px; background:#1a1a2e; border-bottom:1px solid #0f3460;
    flex-shrink:0; gap:10px;
}
.chat-header .chat-header-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer; }
.chat-header .chat-header-left:hover { opacity:0.85; }
.chat-header .chat-title { color:#fff; font-weight:bold; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-header .chat-members { color:#888; font-size:12px; }
#messages {
    flex:1; overflow-y:auto; padding:12px; display:flex;
    flex-direction:column; gap:6px;
}
.msg {
    padding:8px 14px; border-radius:16px;
    max-width:85%; word-wrap:break-word; font-size:15px; line-height:1.5;
    align-self:flex-start; background:#2a2a4a; color:#eee;
    position:relative; cursor:pointer;
    transition: all 0.2s;
    animation: fadeInUp 0.3s ease-out;
}
.msg:hover { filter: brightness(1.1); }
.msg .user { font-weight:bold; font-size:13px; display:block; margin-bottom:2px; cursor:pointer; }
.msg .user:hover { text-decoration:underline; }
.msg .time { font-size:10px; color:#aaa; margin-right:8px; }
.msg .edited-badge { font-size:9px; color:#888; margin-right:4px; }
.msg.self { background:#1e88e5; align-self:flex-end; color:#fff; }
.msg.self .user { color:#bbdefb; }
.msg.self .time { color:#e3f2fd; }
.msg.other { background:#2d2d4a; }
.msg.other .user { color:#f7c948; }
.msg.system {
    background:transparent !important;
    text-align:center; color:#888; font-size:13px;
    align-self:center !important; max-width:100%; cursor:default;
}
.msg .reply-badge {
    font-size:11px; color:#4fc3f7;
    background:rgba(79,195,247,0.1);
    padding:2px 8px; border-radius:8px; margin-bottom:4px;
    display:inline-block;
}
.msg .tick-blue { display:inline-block; margin-left:4px; width:16px; height:16px; vertical-align:middle; }
.msg .tick-blue img { width:100%; height:100%; display:block; }
.msg img { max-width:100%; max-height:300px; border-radius:8px; margin-top:4px; cursor:pointer; }
.msg .super-badge {
    font-size:9px; color:#f7c948; background:rgba(247,201,72,0.15);
    padding:1px 6px; border-radius:10px; margin-right:4px;
}
.msg .banned-badge {
    font-size:9px; color:#ff6b6b; background:rgba(255,107,107,0.15);
    padding:1px 6px; border-radius:10px; margin-right:4px;
}
.msg .pro-badge-msg {
    font-size:9px; color:#f7c948; background:rgba(247,201,72,0.15);
    padding:1px 6px; border-radius:10px; margin-right:4px;
}
.msg .special-badge-msg {
    font-size:9px; color:#4fc3f7; background:rgba(79,195,247,0.15);
    padding:1px 6px; border-radius:10px; margin-right:4px;
}
.msg .pinned-badge {
    font-size:9px; color:#4fc3f7; background:rgba(79,195,247,0.15);
    padding:1px 6px; border-radius:10px; margin-right:4px;
}
.context-menu {
    display:none; position:fixed; background:#1a1a2e;
    border:1px solid #4a6fa5; border-radius:12px;
    padding:8px 0; min-width:180px; z-index:1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.context-menu-item {
    padding:10px 20px; color:#eee; cursor:pointer; font-size:14px;
    display:flex; align-items:center; gap:10px;
    transition: background 0.2s;
}
.context-menu-item:hover { background:#0f3460; }
.context-menu-item.danger { color:#ff6b6b; }
.context-menu-item .icon { font-size:18px; }
#input-area {
    display:flex; gap:8px; padding:8px 12px;
    border-top:1px solid #0f3460; background:#1a1a2e;
    flex-wrap:wrap; flex-shrink:0;
    position:relative;
}
#input-area input[type="text"] {
    flex:1; padding:10px 16px; border-radius:40px; border:none;
    background:#0f3460; color:#fff; font-size:15px; outline:none; min-width:0;
}
#input-area button {
    padding:10px 18px; border-radius:40px; border:none;
    background:#e94560; color:#fff; font-weight:bold; font-size:14px;
    cursor:pointer; white-space:nowrap;
}
#input-area button:hover { opacity:0.8; }
#fileInput { display:none; }

/* استیکر پیکر */
.sticker-picker-chat {
    display: none;
    position: absolute;
    bottom: 65px;
    right: 60px;
    background: #1a1a2e;
    border: 1px solid #4a6fa5;
    border-radius: 12px;
    padding: 10px;
    z-index: 100;
    max-width: 300px;
    flex-wrap: wrap;
    gap: 5px;
}
.sticker-picker-chat.active { 
    display: flex !important; 
}
.sticker-picker-chat img {
    width: 55px;
    height: 55px;
    cursor: pointer;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.2s;
    background: #0f3460;
    padding: 3px;
}
.sticker-picker-chat img:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 15px rgba(79,195,247,0.4);
}
.sticker-img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 8px;
    display: block;
    margin-top: 4px;
    object-fit: cover;
}
.gif-img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    margin-top: 4px;
    display: block;
}

/* پین شده */
#pinnedMessages {
    background: rgba(74,111,165,0.125);
    padding: 8px 12px;
    border-radius: 8px;
    margin: 4px 12px;
    cursor: pointer;
    border-right: 3px solid #4a6fa5;
}
#pinnedMessages:hover { background: rgba(74,111,165,0.2); }

.modal {
    display:none; position:fixed; top:0; left:0;
    width:100%; height:100%; background:rgba(0,0,0,0.7);
    justify-content:center; align-items:center; z-index:2000;
}
.modal-content {
    background:#1a1a2e; padding:20px; border-radius:16px;
    width:90%; max-width:400px; max-height:90vh; overflow-y:auto;
}
.modal-content h3 { color:#fff; margin-bottom:15px; }
.modal-content .profile-avatar {
    width:100px; height:100px; border-radius:50%; margin:0 auto 15px;
    display:flex; align-items:center; justify-content:center;
    background:#0f3460; font-size:40px; color:#fff;
    overflow:hidden; cursor:pointer; position:relative;
}
.modal-content .profile-avatar img { width:100%; height:100%; object-fit:cover; }
.modal-content .profile-avatar .upload-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(0,0,0,0.7); color:#fff; font-size:12px;
    padding:4px; text-align:center; display:none;
}
.modal-content .profile-avatar:hover .upload-overlay { display:block; }
.modal-content input, .modal-content textarea, .modal-content select {
    width:100%; padding:10px; margin:8px 0; border-radius:8px;
    border:none; background:#0f3460; color:#fff; font-size:14px;
}
.modal-content textarea { min-height:80px; resize:vertical; }
.modal-content .btn-row { display:flex; gap:8px; margin-top:12px; }
.modal-content .btn-row button {
    flex:1; padding:10px; border-radius:20px; border:none;
    background:#e94560; color:#fff; cursor:pointer;
}
.modal-content .btn-row .btn-cancel { background:#4a6fa5; }
.modal-content .btn-row .btn-danger { background:#c62828; }
.user-profile-card { text-align:center; padding:20px; }
.user-profile-card .profile-avatar-large {
    width:120px; height:120px; border-radius:50%; margin:0 auto 15px;
    display:flex; align-items:center; justify-content:center;
    background:#0f3460; font-size:50px; color:#fff;
    overflow:hidden; border:3px solid #4a6fa5;
}
.user-profile-card .profile-avatar-large img { width:100%; height:100%; object-fit:cover; }
.user-profile-card .profile-name { color:#fff; font-size:20px; font-weight:bold; }
.user-profile-card .profile-status { color:#4fc3f7; font-size:14px; margin:5px 0; }
.user-profile-card .profile-bio {
    color:#aaa; font-size:14px; margin:10px 0;
    padding:10px; background:#0f3460; border-radius:12px;
    line-height:1.6;
}
.user-profile-card .profile-actions { 
    display:flex; gap:10px; margin-top:15px; 
    justify-content:center; flex-wrap:wrap;
}
.user-profile-card .profile-actions button {
    padding:10px 25px; border-radius:30px; border:none;
    background:#e94560; color:#fff; cursor:pointer; font-size:14px; font-weight:bold;
}
.user-profile-card .profile-actions .btn-pv { background:#4a6fa5; }
.user-profile-card .profile-actions .btn-follow { background:#2e7d32; color:#fff; }
.user-profile-card .profile-actions .btn-unfollow { background:#c62828; color:#fff; }
.user-profile-card .profile-actions .btn-contact { background:#0d47a1; color:#fff; }
.user-profile-card .profile-actions .btn-remove-contact { background:#c62828; color:#fff; }
.user-profile-card .profile-actions .btn-add-contact { background:#2e7d32; }
.user-profile-card .profile-stats {
    display:flex; justify-content:center; gap:20px; margin:10px 0;
}
.user-profile-card .profile-stats span { cursor:default; font-size:14px; }
.user-list-item {
    display:flex; align-items:center; gap:10px;
    padding:12px; border-radius:12px; cursor:pointer;
    transition:background 0.2s; color:#eee;
    border-bottom:1px solid #0f3460;
}
.user-list-item:hover { background:#0f3460; }
.user-list-item .user-avatar {
    width:45px; height:45px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:bold; color:#fff;
    overflow:hidden; flex-shrink:0; background:#4a6fa5;
}
.user-list-item .user-avatar img { width:100%; height:100%; object-fit:cover; }
.user-list-item .user-info { flex:1; min-width:0; }
.user-list-item .user-name { font-weight:bold; font-size:15px; color:#fff; }
.user-list-item .user-status { font-size:12px; color:#888; }
.user-list-item .user-bio { font-size:12px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-list-item .user-action { 
    color:#4fc3f7; font-size:13px; padding:4px 8px; 
    border-radius:12px; cursor:pointer; 
    background:transparent; border:none;
}
.user-list-item .user-action:hover { background:#0f3460; }
.user-list-item .user-badge { font-size:10px; padding:2px 8px; border-radius:10px; margin-left:4px; }
.user-list-item .user-badge.banned { background:#c62828; color:#fff; }
.user-list-item .user-badge.special { background:#4fc3f7; color:#1a1a2e; }
.user-list-item .user-badge.super { background:#f7c948; color:#1a1a2e; }
.user-list-item .user-badge.contact { background:#2e7d32; color:#fff; }
.user-list-item .user-badge.pro { background:#f7c948; color:#1a1a2e; }
.stories-bar {
    display:flex; gap:10px; padding:8px 12px;
    background:#0f3460; border-radius:16px;
    overflow-x:auto; flex-shrink:0; margin-bottom:4px;
}
.stories-bar::-webkit-scrollbar { height:3px; }
.stories-bar::-webkit-scrollbar-track { background:transparent; }
.stories-bar::-webkit-scrollbar-thumb { background:#4a6fa5; border-radius:10px; }
.story-item { display:flex; flex-direction:column; align-items:center; cursor:pointer; min-width:70px; }
.story-item .story-avatar {
    width:60px; height:60px; border-radius:50%;
    border:3px solid #e94560; overflow:hidden;
    display:flex; align-items:center; justify-content:center; background:#1a1a2e;
    position:relative;
}
.story-item .story-avatar img { width:100%; height:100%; object-fit:cover; }
.story-item .story-avatar .default-avatar { font-size:24px; font-weight:bold; color:#fff; }
.story-item.add-story .story-avatar { border-color:#4a6fa5; background:#0f3460; font-size:24px; color:#fff; }
.story-item .story-name {
    font-size:10px; color:#aaa; margin-top:4px;
    text-align:center; max-width:70px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
}
.story-item .story-time { font-size:8px; color:#666; margin-top:2px; }
.story-viewer {
    display:none; position:fixed; top:0; left:0;
    width:100%; height:100%; background:rgba(0,0,0,0.9);
    z-index:3000; justify-content:center; align-items:center;
}
.story-viewer.active { display:flex; }
.story-viewer .story-content { max-width:95%; max-height:95%; position:relative; }
.story-viewer .story-content img { max-width:100%; max-height:80vh; border-radius:16px; display:block; margin:0 auto; }
.story-viewer .story-content .story-text {
    color:#fff; text-align:center; margin-top:10px;
    font-size:16px; padding:10px; background:rgba(0,0,0,0.5); border-radius:12px;
}
.story-viewer .story-content .story-user { color:#4fc3f7; text-align:center; margin-bottom:5px; font-size:14px; }
.story-viewer .story-close {
    position:fixed; top:20px; right:20px; background:rgba(0,0,0,0.5);
    color:#fff; border:none; font-size:30px; padding:10px 20px; border-radius:50%;
    cursor:pointer; z-index:3001;
}
.story-viewer .story-nav {
    position:fixed; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5);
    color:#fff; border:none; font-size:30px; padding:15px 20px; border-radius:50%;
    cursor:pointer; z-index:3001;
}
.story-viewer .story-nav.prev { left:10px; }
.story-viewer .story-nav.next { right:10px; }
.admin-panel {
    display:none; position:fixed; top:0; left:0;
    width:100%; height:100%; background:rgba(0,0,0,0.85);
    z-index:4000; justify-content:center; align-items:center;
}
.admin-panel.active { display:flex; }
.admin-panel .admin-content {
    background:#1a1a2e; padding:25px; border-radius:16px;
    width:95%; max-width:700px; max-height:90vh; overflow-y:auto;
}
.admin-panel .admin-content h2 { color:#fff; text-align:center; margin-bottom:15px; }
.admin-panel .admin-content .admin-tabs { display:flex; gap:4px; margin-bottom:12px; }
.admin-panel .admin-content .admin-tabs button {
    padding:6px 16px; border-radius:12px; border:none;
    background:transparent; color:#888; cursor:pointer; font-size:13px;
    transition: all 0.3s;
}
.admin-panel .admin-content .admin-tabs button:hover { background:#0f3460; color:#fff; }
.admin-panel .admin-content .admin-tabs button.active { background:#e94560; color:#fff; }
.admin-panel .admin-content .admin-user-item {
    display:flex; align-items:center; gap:10px;
    padding:10px; background:#0f3460; border-radius:8px; margin-bottom:8px;
}
.admin-panel .admin-content .admin-user-item .admin-avatar {
    width:40px; height:40px; border-radius:50%;
    overflow:hidden; display:flex; align-items:center;
    justify-content:center; background:#4a6fa5; color:#fff;
    font-weight:bold; flex-shrink:0;
}
.admin-panel .admin-content .admin-user-item .admin-avatar img { width:100%; height:100%; object-fit:cover; }
.admin-panel .admin-content .admin-user-item .admin-info { flex:1; color:#eee; }
.admin-panel .admin-content .admin-user-item .admin-info .admin-name { font-weight:bold; }
.admin-panel .admin-content .admin-user-item .admin-info .admin-status { font-size:12px; color:#888; }
.admin-panel .admin-content .admin-user-item .admin-actions { display:flex; gap:4px; flex-wrap:wrap; }
.admin-panel .admin-content .admin-user-item .admin-actions button { padding:4px 10px; border-radius:12px; border:none; font-size:11px; cursor:pointer; }
.admin-panel .admin-content .admin-user-item .admin-actions .ban-btn { background:#c62828; color:#fff; }
.admin-panel .admin-content .admin-user-item .admin-actions .unban-btn { background:#2e7d32; color:#fff; }
.admin-panel .admin-content .admin-user-item .admin-actions .special-btn { background:#4fc3f7; color:#1a1a2e; }
.admin-panel .admin-content .admin-user-item .admin-actions .pro-btn { background:#f7c948; color:#1a1a2e; }
.admin-panel .admin-content .admin-user-item .admin-actions .delete-btn { background:#ff6f00; color:#fff; }
.admin-panel .admin-content .admin-group-item,
.admin-panel .admin-content .admin-channel-item {
    display:flex; align-items:center; gap:10px;
    padding:10px; background:#0f3460; border-radius:8px; margin-bottom:8px;
}
.admin-panel .admin-content .admin-group-item .admin-info,
.admin-panel .admin-content .admin-channel-item .admin-info { flex:1; color:#eee; }
.admin-panel .admin-content .admin-group-item .admin-info .admin-name,
.admin-panel .admin-content .admin-channel-item .admin-info .admin-name { font-weight:bold; }
.admin-panel .admin-content .admin-group-item .admin-info .admin-detail,
.admin-panel .admin-content .admin-channel-item .admin-info .admin-detail { font-size:12px; color:#888; }
.admin-panel .admin-content .admin-search {
    width:100%; padding:10px; border-radius:20px; border:none;
    background:#0f3460; color:#fff; font-size:14px; outline:none; margin-bottom:12px;
}
.admin-panel .admin-content .admin-close {
    padding:10px 30px; border-radius:20px; border:none;
    background:#4a6fa5; color:#fff; cursor:pointer; font-size:14px; margin-top:10px; width:100%;
}
.admin-panel .admin-content .admin-empty { color:#888; text-align:center; padding:20px; }

/* دکمه‌های شناور FAB */
.fab-container {
    position:fixed; bottom:30px; right:30px; z-index:999;
    display:flex; flex-direction:column; gap:12px; align-items:center;
}
.fab-btn {
    width:56px; height:56px; border-radius:50%; border:none; color:#fff;
    font-size:24px; cursor:pointer; box-shadow:0 4px 15px rgba(0,0,0,0.3);
    transition:all 0.3s ease; display:flex; align-items:center;
    justify-content:center; position:relative;
}
.fab-btn:hover { transform:scale(1.15); box-shadow:0 6px 25px rgba(0,0,0,0.5); }
.fab-btn .tooltip {
    position:absolute; right:65px; background:rgba(0,0,0,0.85); color:#fff;
    padding:5px 14px; border-radius:8px; font-size:12px; white-space:nowrap; display:none;
}
.fab-btn:hover .tooltip { display:block; }
.fab-btn svg { width:28px; height:28px; fill:currentColor; }
.fab-btn.pink { background:#e91e63; }
.fab-btn.pink:hover { background:#c2185b; }
.fab-btn.green { background:#2e7d32; }
.fab-btn.green:hover { background:#1b5e20; }
.fab-btn.orange { background:#e65100; }
.fab-btn.orange:hover { background:#bf360c; }
.fab-btn.purple { background:#6a1b9a; }
.fab-btn.purple:hover { background:#4a148c; }
.fab-btn.blue { background:#0d47a1; }
.fab-btn.blue:hover { background:#0a2a6e; }

/* ایمیل و کد تایید */
.email-verify-box {
    background: #0f3460;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
}
.email-verify-box input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 30px;
    border: none;
    background: #1a1a2e;
    color: #fff;
    font-size: 14px;
    outline: none;
    margin-bottom: 10px;
    direction: ltr;
}
.email-verify-box button {
    width: 100%;
    padding: 10px;
    border-radius: 30px;
    border: none;
    background: #4a6fa5;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.email-verify-box button:hover { opacity: 0.8; }
.email-verify-box .code-row {
    display: flex;
    gap: 10px;
}
.email-verify-box .code-row input {
    flex: 2;
}
.email-verify-box .code-row button {
    flex: 1;
    background: #2e7d32;
}
.email-status {
    font-size: 13px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 8px;
}
.email-status.success { color: #81c784; background: rgba(129,199,132,0.1); }
.email-status.error { color: #ff6b6b; background: rgba(255,107,107,0.1); }

/* حریم خصوصی */
.privacy-settings {
    margin: 10px 0;
    padding: 10px;
    background: rgba(74,111,165,0.1);
    border-radius: 8px;
}
.privacy-settings label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eee;
    font-size: 14px;
    padding: 5px 0;
    cursor: pointer;
}
.privacy-settings input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* تیک آبی و PRO */
.tick-badge img {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle;
}
.pro-icon img {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle;
}
.tick-blue img {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
}
.pro-badge-msg img {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle;
}

/* ریسپانسیو */
@media (max-width:768px) {
    .admin-panel .admin-content { width:98%; padding:15px; }
}
@media (max-width:480px) {
    .container { padding:6px; }
    .msg { font-size:14px; padding:6px 12px; max-width:92%; }
    #input-area input { padding:8px 12px; font-size:14px; }
    #input-area button { padding:8px 12px; font-size:13px; }
    .context-menu { min-width:150px; }
    .context-menu-item { padding:8px 16px; font-size:13px; }
    .header-actions button, .header-actions a { font-size:10px; padding:2px 8px; height:26px; }
    .user-list-item { padding:10px; }
    .user-list-item .user-avatar { width:35px; height:35px; font-size:16px; }
    .user-profile-card .profile-avatar-large { width:90px; height:90px; font-size:36px; }
    #login .login-box { padding:20px; }
    .stories-bar { padding:6px 8px; }
    .story-item .story-avatar { width:50px; height:50px; }
    .admin-panel .admin-content { padding:12px; }
    .admin-panel .admin-content .admin-user-item { flex-wrap:wrap; }
    .admin-panel .admin-content .admin-user-item .admin-actions { margin-top:5px; }
    .tabs button { font-size:11px; padding:4px 10px; }
    .fab-container { bottom:15px; right:15px; gap:8px; }
    .fab-btn { width:48px; height:48px; }
    .fab-btn svg { width:24px; height:24px; }
    .fab-btn .tooltip { display:none !important; }
    .email-verify-box .code-row { flex-direction: column; }
}

/* اسکرول بارها */
#messages::-webkit-scrollbar { width:5px; }
#messages::-webkit-scrollbar-track { background:#0f3460; }
#messages::-webkit-scrollbar-thumb { background:#4a6fa5; border-radius:10px; }
.sidebar .chats-list::-webkit-scrollbar { width:3px; }
.sidebar .chats-list::-webkit-scrollbar-track { background:transparent; }
.sidebar .chats-list::-webkit-scrollbar-thumb { background:#4a6fa5; border-radius:10px; }
#usersList::-webkit-scrollbar { width:4px; }
#usersList::-webkit-scrollbar-track { background:transparent; }
#usersList::-webkit-scrollbar-thumb { background:#4a6fa5; border-radius:10px; }

/* انیمیشن */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}

/* لوگو */
.header .header-left img {
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(79,195,247,0.2);
    transition: transform 0.3s ease;
}
.header .header-left img:hover {
    transform: scale(1.05);
}