.chat-body{overflow:hidden;height:100vh}.chat-layout{display:grid;grid-template-columns:280px 1fr 0px;height:100vh;transition:grid-template-columns var(--transition-normal)}.chat-layout.users-open{grid-template-columns:280px 1fr 280px}.chat-sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--border-color)}.sidebar-logo{font-size:18px}.sidebar-close-btn{display:none;background:0 0;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.sidebar-close-btn:hover{background:var(--bg-glass);color:var(--text-primary)}.sidebar-online-badge{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:13px;color:var(--text-secondary);font-weight:500}.online-dot{width:8px;height:8px;background:var(--success);border-radius:50%;animation:2s infinite pulse}.sidebar-search{padding:0 12px 12px}.sidebar-search input{width:100%;padding:10px 14px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-family);font-size:13px;outline:0;transition:border-color var(--transition-fast)}.sidebar-search input:focus{border-color:var(--accent-primary)}.sidebar-search input::placeholder{color:var(--text-muted)}.sidebar-tabs{display:flex;gap:4px;padding:0 12px 12px}.sidebar-tab{flex:1;padding:7px 0;background:0 0;border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);font-family:var(--font-family);font-size:11px;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.sidebar-tab:hover{background:var(--bg-glass);color:var(--text-primary)}.sidebar-tab.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.sidebar-rooms{flex:1;overflow-y:auto;padding:0 8px;scrollbar-width:thin;scrollbar-color:var(--bg-tertiary) transparent}.sidebar-rooms::-webkit-scrollbar{width:4px}.sidebar-rooms::-webkit-scrollbar-track{background:0 0}.sidebar-rooms::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}.sidebar-room-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-bottom:2px}.sidebar-room-item:hover{background:var(--bg-glass-hover)}.sidebar-room-item.active{background:rgba(108,92,231,.15);border:1px solid rgba(108,92,231,.3)}.sidebar-room-icon{font-size:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-glass);border-radius:var(--radius-sm);flex-shrink:0}.sidebar-room-info{flex:1;min-width:0}.sidebar-room-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-room-count{font-size:11px;color:var(--text-muted)}.sidebar-user-info{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--border-color);background:var(--bg-glass)}.user-avatar-small{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);font-size:18px}.user-info-text{flex:1;display:flex;flex-direction:column}.user-info-name{font-size:13px;font-weight:600}.user-info-status{font-size:11px;color:var(--success)}.chat-main{display:flex;flex-direction:column;height:100dvh;height:var(--v-height, 100dvh);background:var(--bg-primary);position:relative}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(17,17,40,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);flex-shrink:0}.chat-header-left{display:flex;align-items:center;gap:12px}.mobile-menu-btn{display:none}.chat-room-info{display:flex;align-items:center;gap:10px}.chat-room-icon{font-size:24px}.chat-room-name{font-size:16px;font-weight:700;margin:0}.chat-room-desc{font-size:12px;color:var(--text-muted)}.chat-header-right{display:flex;align-items:center;gap:12px}.room-member-count{font-size:12px;color:var(--text-secondary);font-weight:500;padding:5px 12px;background:var(--bg-glass);border-radius:var(--radius-full)}.btn-icon{background:0 0;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.btn-icon:hover{background:var(--bg-glass-hover);color:var(--text-primary)}.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:var(--bg-tertiary) transparent}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}.chat-welcome{text-align:center;padding:40px 20px;color:var(--text-muted)}.welcome-icon{font-size:48px;margin-bottom:12px}.chat-welcome h3{font-size:18px;color:var(--text-secondary);margin-bottom:8px}.chat-welcome p{font-size:13px}.message{display:flex;gap:10px;padding:8px 12px;border-radius:var(--radius-md);transition:background var(--transition-fast);animation:.3s messageSlideIn;max-width:100%}.message:hover{background:var(--bg-glass)}@keyframes messageSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;font-weight:700;color:#fff}.message-avatar.male{background:linear-gradient(135deg,#6c5ce7,#a29bfe)}.message-avatar.female{background:linear-gradient(135deg,#fd79a8,#e84393)}.message-avatar.other{background:linear-gradient(135deg,#00cec9,#55efc4)}.message-content{flex:1;min-width:0}.message-header{display:flex;align-items:center;gap:8px;margin-bottom:3px}.message-username{font-size:13px;font-weight:700;cursor:pointer;transition:color var(--transition-fast)}.message-username:hover{color:var(--accent-secondary)}.message-username.male{color:#a29bfe}.message-username.female{color:#fd79a8}.message-username.other{color:#55efc4}.message-time{font-size:11px;color:var(--text-muted)}.message-text{font-size:14px;color:var(--text-primary);line-height:1.5;word-wrap:break-word;overflow-wrap:break-word}.msg-hover-actions{display:none;align-items:center;gap:2px;margin-left:auto}.message:hover .msg-hover-actions{display:flex}.msg-action-btn{background:0 0;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all var(--transition-fast);line-height:1}.msg-action-btn:hover{background:var(--bg-glass-hover);color:var(--accent-secondary);transform:scale(1.2)}.reaction-picker{position:fixed;z-index:1000;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:24px;padding:6px 10px;box-shadow:0 8px 30px rgba(0,0,0,.4);gap:4px;animation:.15s reactionPopIn}@keyframes reactionPopIn{from{opacity:0;transform:scale(.8) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.reaction-emoji{background:0 0;border:none;font-size:22px;cursor:pointer;padding:4px 6px;border-radius:8px;transition:.15s;line-height:1}.reaction-emoji:hover{background:var(--bg-glass-hover);transform:scale(1.35)}.reactions-container{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;min-height:0}.reaction-badge{display:inline-flex;align-items:center;gap:4px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:12px;padding:3px 8px;font-size:14px;cursor:pointer;transition:all var(--transition-fast);line-height:1}.reaction-badge span{font-size:11px;color:var(--text-muted);font-weight:600}.reaction-badge:hover{background:var(--bg-glass-hover);border-color:var(--accent-primary);transform:scale(1.05)}.reaction-badge.reacted{background:rgba(108,92,231,.15);border-color:var(--accent-primary)}.reaction-badge.reacted span{color:var(--accent-secondary)}.reply-btn{display:none}.message:hover .reply-btn{display:inline-flex}.edited-tag{font-size:10px;color:var(--text-muted);font-style:italic;font-weight:400;opacity:.7}.deleted-msg{color:var(--text-muted)!important;font-style:italic;opacity:.6}.msg-delete-btn:hover{color:var(--danger)!important}.sticker-message{padding:4px 0}.sticker-large{font-size:64px;line-height:1.1;display:inline-block;transition:transform .2s;cursor:default;animation:.4s stickerBounce}.sticker-large:hover{transform:scale(1.15)}@keyframes stickerBounce{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}.sticker-picker{position:absolute;bottom:70px;left:16px;width:340px;height:360px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:100;flex-direction:column;overflow:hidden;animation:.2s reactionPopIn}.sticker-picker-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-color)}.sticker-picker-header h4{margin:0;font-size:14px;font-weight:700}.sticker-pack-tabs{display:flex;gap:4px;padding:8px 10px;overflow-x:auto;border-bottom:1px solid var(--border-color);scrollbar-width:none}.sticker-pack-tabs::-webkit-scrollbar{display:none}.sticker-pack-tab{background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);padding:5px 12px;font-size:11px;font-weight:600;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);font-family:var(--font-family)}.sticker-pack-tab:hover{background:var(--bg-glass-hover);color:var(--text-primary)}.sticker-pack-tab.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.sticker-pack-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bg-tertiary) transparent}.sticker-grid-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);gap:4px}.sticker-grid-item:hover{background:var(--bg-glass-hover);transform:scale(1.1)}.sticker-grid-item span:first-child{font-size:36px;line-height:1}.sticker-label{font-size:9px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.search-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:80px;animation:.2s fadeIn}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.search-panel{width:500px;max-width:90vw;max-height:70vh;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:.2s reactionPopIn}.search-panel-header{display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.search-panel-header input{flex:1;padding:10px 16px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-family);font-size:14px;outline:0;transition:border-color var(--transition-fast)}.search-panel-header input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.search-panel-header input::placeholder{color:var(--text-muted)}.search-results{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:50vh;scrollbar-width:thin;scrollbar-color:var(--bg-tertiary) transparent}.search-count{font-size:12px;color:var(--accent-secondary);font-weight:600;padding:4px 8px;margin-bottom:4px}.search-result-item{padding:12px 14px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:default}.search-result-item:hover{background:var(--bg-glass-hover);border-color:var(--accent-primary)}.search-result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.search-result-user{font-size:13px;font-weight:700;color:var(--accent-secondary)}.search-result-time{font-size:11px;color:var(--text-muted)}.search-result-text{font-size:13px;color:var(--text-primary);line-height:1.5;word-wrap:break-word}.search-highlight{background:rgba(253,203,110,.3);color:#fdcb6e;border-radius:2px;padding:0 2px}.search-empty{text-align:center;padding:30px 20px;color:var(--text-muted)}.search-empty-icon{font-size:40px;margin-bottom:12px}.search-empty p{font-size:14px;margin:0}.search-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px;color:var(--text-muted);font-size:14px}.level-badge{font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;letter-spacing:.5px;display:inline-block;line-height:1.4;vertical-align:middle;margin-left:4px;background:rgba(149,165,166,.2);color:#95a5a6}.level-badge[class*=level-5],.level-badge[class*=level-6],.level-badge[class*=level-7],.level-badge[class*=level-8],.level-badge[class*=level-9]{background:rgba(46,204,113,.2);color:#2ecc71}.level-badge.level-10,.level-badge.level-11,.level-badge.level-12,.level-badge.level-13,.level-badge.level-14,.level-badge.level-15,.level-badge.level-16,.level-badge.level-17,.level-badge.level-18,.level-badge.level-19{background:rgba(52,152,219,.2);color:#3498db}.level-badge.level-20,.level-badge.level-21,.level-badge.level-22,.level-badge.level-23,.level-badge.level-24,.level-badge.level-25,.level-badge.level-26,.level-badge.level-27,.level-badge.level-28,.level-badge.level-29{background:rgba(155,89,182,.2);color:#9b59b6}.level-badge.level-30,.level-badge.level-31,.level-badge.level-32,.level-badge.level-33,.level-badge.level-34,.level-badge.level-35,.level-badge.level-36,.level-badge.level-37,.level-badge.level-38,.level-badge.level-39{background:rgba(230,126,34,.2);color:#e67e22}.level-badge.level-40,.level-badge.level-41,.level-badge.level-42,.level-badge.level-43,.level-badge.level-44,.level-badge.level-45,.level-badge.level-46,.level-badge.level-47,.level-badge.level-48,.level-badge.level-49{background:rgba(231,76,60,.2);color:#e74c3c}.level-badge.level-50{background:linear-gradient(135deg,rgba(241,196,15,.3),rgba(243,156,18,.3));color:#f1c40f}.xp-progress-container{padding:0 16px 8px}.xp-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.xp-progress-label{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.xp-progress-text{font-size:10px;color:var(--accent-secondary);font-weight:600}.xp-progress-track{width:100%;height:4px;background:var(--bg-glass);border-radius:4px;overflow:hidden}.xp-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:4px;transition:width .5s;width:0%}.user-level-badge{font-size:10px;font-weight:700;color:var(--accent-secondary);margin-left:4px}.level-up-glow{animation:.5s 3 levelUpPulse}@keyframes levelUpPulse{0%,100%{text-shadow:none}50%{text-shadow:0 0 10px var(--accent-secondary),0 0 20px var(--accent-primary);color:#f1c40f}}.streak-display{font-size:11px;font-weight:700;color:#e67e22;background:rgba(230,126,34,.15);padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:2px}.leaderboard-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;animation:.2s fadeIn}.leaderboard-panel{width:440px;max-width:90vw;max-height:75vh;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:.2s reactionPopIn}.leaderboard-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.leaderboard-header h3{margin:0;font-size:16px}.leaderboard-content{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;max-height:60vh}.lb-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-md);transition:all var(--transition-fast)}.lb-row:hover{background:var(--bg-glass-hover)}.lb-top{background:var(--bg-glass)}.lb-row-me{background:rgba(108,92,231,.12)!important;border:1px solid rgba(108,92,231,.3)}.lb-medal{font-size:22px;min-width:30px;text-align:center}.lb-rank{font-size:13px;font-weight:700;color:var(--text-muted);min-width:30px;text-align:center}.lb-user{flex:1;display:flex;align-items:center;gap:6px;min-width:0}.lb-name{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-stats{display:flex;align-items:center;gap:10px;flex-shrink:0}.lb-xp{font-size:12px;font-weight:700;color:var(--accent-secondary)}.lb-msgs{font-size:11px;color:var(--text-muted)}.lb-streak{font-size:11px;color:#e67e22;font-weight:600}.games-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:50px;animation:.2s fadeIn}.games-panel{width:520px;max-width:95vw;max-height:80vh;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;animation:.2s reactionPopIn}.games-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.games-header h3{margin:0;font-size:16px}.games-content{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px;overflow-y:auto;scrollbar-width:thin}.game-card{padding:18px 14px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;text-align:center;transition:.2s}.game-card:hover{transform:translateY(-3px);border-color:var(--accent-primary);box-shadow:0 8px 24px rgba(0,0,0,.3)}.game-card-hot{border-color:rgba(249,115,22,.3);background:linear-gradient(135deg,var(--bg-card),rgba(249,115,22,.05))}.game-card-hot:hover{border-color:#f97316;box-shadow:0 8px 24px rgba(249,115,22,.2)}.game-card-extreme{border-color:rgba(239,68,68,.3);background:linear-gradient(135deg,var(--bg-card),rgba(239,68,68,.05))}.game-card-extreme:hover{border-color:#ef4444;box-shadow:0 8px 24px rgba(239,68,68,.2)}.game-icon{font-size:28px;margin-bottom:6px}.game-card h4{font-size:13px;font-weight:700;margin:0 0 4px}.game-card p{font-size:11px;color:var(--text-muted);margin:0}@media (max-width:500px){.games-content{grid-template-columns:repeat(2,1fr)}}.friends-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;animation:.2s fadeIn}.friends-panel{width:420px;max-width:90vw;max-height:70vh;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;animation:.2s reactionPopIn}.friends-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.friends-header h3{margin:0;font-size:16px}.friends-tabs{display:flex;border-bottom:1px solid var(--border-color)}.friends-tab{flex:1;padding:10px;background:0 0;border:none;color:var(--text-muted);font-family:var(--font-family);font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition-fast)}.friends-tab:hover{color:var(--text-primary)}.friends-tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.friends-content{flex:1;overflow-y:auto;padding:8px;scrollbar-width:thin}.friends-empty{text-align:center;padding:40px 20px;color:var(--text-muted)}.friends-empty p{margin:4px 0}.text-muted{color:var(--text-muted);font-size:12px}.friend-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);transition:background var(--transition-fast)}.friend-row:hover{background:var(--bg-glass)}.friend-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}.friend-info{flex:1;display:flex;flex-direction:column;min-width:0}.friend-name{font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-name:hover{color:var(--accent-primary)}.friend-status{font-size:11px;color:var(--text-muted)}.friend-actions{display:flex;gap:4px;flex-shrink:0}.theme-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:80px;animation:.2s fadeIn}.theme-panel{width:460px;max-width:90vw;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;animation:.2s reactionPopIn}.theme-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.theme-header h3{margin:0;font-size:16px}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}.theme-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast);position:relative}.theme-card:hover{background:var(--bg-glass-hover);transform:translateY(-2px)}.theme-active{border-color:var(--accent-primary);background:var(--bg-glass)}.theme-preview{width:48px;height:48px;border-radius:50%;position:relative;border:2px solid var(--border-color);overflow:hidden}.theme-preview-accent{position:absolute;bottom:0;left:0;right:0;height:40%;border-radius:0 0 50% 50%}.theme-icon{font-size:16px}.theme-name{font-size:11px;font-weight:600;color:var(--text-secondary);text-align:center}.theme-check{position:absolute;top:6px;right:6px;background:var(--accent-primary);color:#fff;width:18px;height:18px;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:800}.profile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;animation:.2s fadeIn}.profile-panel{width:420px;max-width:90vw;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;animation:.2s reactionPopIn}.profile-header-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.profile-header-bar h3{margin:0;font-size:16px}.profile-body{padding:0}.profile-card{text-align:center;padding:24px 20px}.profile-avatar-large{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 20px var(--accent-glow)}.profile-name{margin:0 0 8px;font-size:22px;font-weight:800}.profile-meta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;color:var(--text-muted);margin-bottom:16px}.profile-level-bar{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:0 10px}.profile-xp{font-size:11px;color:var(--accent-secondary);font-weight:600;white-space:nowrap}.profile-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.profile-stat{display:flex;flex-direction:column;align-items:center;background:var(--bg-glass);border-radius:var(--radius-md);border:1px solid var(--border-color)}.profile-stat-value{color:var(--text-primary)}.profile-stat-label{color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.profile-badges-section{border-top:1px solid var(--border-color);padding-top:14px;text-align:left}.profile-badges-section h4{margin:0 0 8px;font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.profile-badges{display:flex;flex-wrap:wrap}.profile-badge{font-size:22px;cursor:default;transition:transform .15s}.profile-badge:hover{transform:scale(1.3)}.random-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:2000;display:flex;align-items:center;justify-content:center;animation:.2s fadeIn}.random-panel{width:500px;max-width:95vw;height:500px;max-height:80vh;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:.2s reactionPopIn}.random-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.random-header h3{margin:0;font-size:16px}.random-status{padding:12px 16px;border-bottom:1px solid var(--border-color);min-height:50px}.random-welcome{text-align:center;padding:40px 20px}.random-welcome-icon{font-size:48px;margin-bottom:12px}.random-welcome h3{margin:0 0 8px;font-size:20px}.random-welcome p{margin:0 0 20px;color:var(--text-muted);font-size:14px}.random-searching{text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}.random-searching p{margin:0;color:var(--text-muted)}.random-matched{display:flex;align-items:center;justify-content:space-between;gap:10px}.random-matched span{font-size:14px}.random-actions{display:flex;gap:6px}.random-ended{text-align:center;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}.random-ended p{margin:0;color:var(--text-muted)}.random-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}.random-system-msg{text-align:center;color:var(--text-muted);font-size:12px;font-style:italic;padding:8px}.random-msg{display:flex;flex-direction:column;max-width:75%;padding:8px 14px;border-radius:16px;gap:2px}.random-msg-me{align-self:flex-end;background:var(--accent-primary);border-bottom-right-radius:4px}.random-msg-them{align-self:flex-start;background:var(--bg-glass);border:1px solid var(--border-color);border-bottom-left-radius:4px}.random-msg-user{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.random-msg-me .random-msg-user{color:rgba(255,255,255,.7)}.random-msg-text{font-size:14px;line-height:1.4;word-wrap:break-word}.random-msg-me .random-msg-text{color:#fff}.random-msg-time{font-size:10px;color:var(--text-muted);align-self:flex-end}.random-msg-me .random-msg-time{color:rgba(255,255,255,.5)}.random-input-area{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border-color);background:var(--bg-tertiary)}.random-input-area input{flex:1;padding:10px 16px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-family);font-size:14px;outline:0}.random-input-area input:focus{border-color:var(--accent-primary)}.btn-danger{background:var(--danger);color:#fff;border:none;padding:6px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-family)}.btn-sm{padding:6px 14px;font-size:12px}.btn-secondary{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border-color);padding:8px 16px;border-radius:var(--radius-full);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-family);transition:all var(--transition-fast)}.btn-secondary:hover{background:var(--bg-glass-hover)}.reply-quote{display:flex;gap:8px;margin-bottom:6px;padding:6px 10px;background:rgba(108,92,231,.08);border-radius:6px;cursor:pointer;transition:background var(--transition-fast)}.reply-quote:hover{background:rgba(108,92,231,.15)}.reply-quote-bar{width:3px;min-height:100%;background:var(--accent-primary);border-radius:3px;flex-shrink:0}.reply-quote-body{display:flex;flex-direction:column;gap:2px;min-width:0}.reply-quote-user{font-size:11px;font-weight:700;color:var(--accent-secondary)}.reply-quote-text{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}.reply-preview{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:rgba(108,92,231,.1);border-top:1px solid rgba(108,92,231,.3);border-left:3px solid var(--accent-primary);animation:.2s slideDown}@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.reply-preview-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.reply-preview-label{font-size:12px;color:var(--accent-secondary)}.reply-preview-text{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.edit-preview{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:rgba(253,203,110,.1);border-top:1px solid rgba(253,203,110,.3);border-left:3px solid #fdcb6e;animation:.2s slideDown}.edit-preview-content{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.edit-preview-label{font-size:12px;color:#fdcb6e}.edit-preview-text{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-system{text-align:center;padding:6px 12px;justify-content:center}.message-system .message-text{font-size:12px;color:var(--text-muted);font-style:italic}.typing-indicator{display:flex;align-items:center;gap:8px;padding:8px 20px;font-size:12px;color:var(--text-muted)}.typing-dots{display:flex;gap:3px}.typing-dots span{width:6px;height:6px;background:var(--text-muted);border-radius:50%;animation:1.4s ease-in-out infinite typingBounce}.typing-dots span:first-child{animation-delay:0s}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,100%,80%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.chat-input-area{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-secondary);border-top:1px solid var(--border-color);flex-shrink:0}.chat-input{flex:1;padding:12px 18px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-family);font-size:14px;outline:0;transition:border-color var(--transition-fast)}.chat-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.chat-input::placeholder{color:var(--text-muted)}.send-btn{width:44px;height:44px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.emoji-btn{font-size:22px}.emoji-picker{position:absolute;bottom:70px;left:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow-lg);z-index:100;width:320px;max-height:250px;overflow-y:auto}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.emoji-item{font-size:22px;padding:6px;border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:background var(--transition-fast)}.emoji-item:hover{background:var(--bg-glass-hover);transform:scale(1.2)}.chat-users-panel{background:var(--bg-secondary);border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.users-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border-color)}.users-panel-header h3{font-size:14px;font-weight:700}.users-search{padding:12px}.users-search input{width:100%;padding:9px 12px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-family);font-size:12px;outline:0}.users-search input::placeholder{color:var(--text-muted)}.users-filters{padding:0 12px 8px}.users-filters select{width:100%;padding:7px 10px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:12px;outline:0}.users-filters select option{background:var(--bg-secondary)}.users-list{flex:1;overflow-y:auto;padding:0 8px}.user-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);margin-bottom:2px}.user-item:hover{background:var(--bg-glass-hover)}.user-item-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}.user-item-avatar.male{background:linear-gradient(135deg,#6c5ce7,#a29bfe)}.user-item-avatar.female{background:linear-gradient(135deg,#fd79a8,#e84393)}.user-item-avatar.other{background:linear-gradient(135deg,#00cec9,#55efc4)}.user-item-info{flex:1;min-width:0}.user-item-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-item-meta{font-size:11px;color:var(--text-muted)}.user-item-actions{display:flex;gap:4px;opacity:0;transition:opacity var(--transition-fast)}.user-item:hover .user-item-actions{opacity:1}.user-action-btn{background:0 0;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;padding:4px;border-radius:4px;transition:all var(--transition-fast)}.user-action-btn:hover{background:var(--bg-glass);color:var(--text-primary)}.dm-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);display:flex;flex-direction:column}.dm-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary);border-radius:var(--radius-xl) var(--radius-xl) 0 0}.dm-messages{flex:1;display:flex;flex-direction:column}.dm-message{border-radius:var(--radius-md);animation:.2s messageSlideIn}.dm-message.sent{background:var(--accent-primary);align-self:flex-end}.dm-message.received{background:var(--bg-glass);color:var(--text-primary);align-self:flex-start}.dm-input-area{display:flex;border-top:1px solid var(--border-color)}.dm-input{flex:1;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-family)}.dm-input::placeholder{color:var(--text-muted)}@media (max-width:1024px){.chat-layout{grid-template-columns:0px 1fr 0px}.chat-layout.users-open{grid-template-columns:0px 1fr 280px}.chat-sidebar{position:fixed;top:0;left:-300px;width:280px;height:100vh;z-index:1000;transition:left var(--transition-normal)}.chat-sidebar.open{left:0;box-shadow:var(--shadow-lg)}.sidebar-close-btn{display:block}.mobile-menu-btn{display:flex}}@media (max-width:768px){.chat-layout.users-open{grid-template-columns:0px 1fr 0px}.chat-users-panel{position:fixed;top:0;right:-300px;width:280px;height:100vh;z-index:1000;transition:right var(--transition-normal)}.chat-users-panel.open{right:0;box-shadow:var(--shadow-lg)}.dm-panel{width:calc(100% - 20px);right:10px;bottom:10px;height:400px}.emoji-picker{width:calc(100% - 32px)}}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.status-dot.online{background-color:var(--success);box-shadow:0 0 5px var(--success)}.status-dot.offline{background-color:var(--text-muted)}.user-status-indicator{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-secondary)}.user-status-indicator.online{background-color:var(--success)}.user-status-indicator.offline{background-color:var(--text-muted)}.user-item-avatar{position:relative}.ai-chat-panel{position:fixed;bottom:20px;right:20px;width:360px;height:500px;background:rgba(17,17,40,.95);backdrop-filter:blur(20px);border:1px solid var(--accent-primary);border-radius:var(--radius-xl);box-shadow:0 10px 40px rgba(108,92,231,.3);display:flex;flex-direction:column;z-index:500;animation:.3s modalSlideIn}.ai-chat-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(108,92,231,.3);background:linear-gradient(90deg,rgba(108,92,231,.2),transparent);border-radius:var(--radius-xl) var(--radius-xl) 0 0}.ai-chat-info{display:flex;align-items:center;gap:12px}.ai-avatar{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--bg-tertiary);border-radius:50%}.ai-avatar-ring{position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;background:var(--accent-gradient);z-index:-1;animation:3s linear infinite spin}@keyframes spin{100%{transform:rotate(360deg)}}.ai-chat-details{display:flex;flex-direction:column}.ai-chat-name{font-weight:700;font-size:15px;color:#fff}.ai-chat-subtitle{font-size:11px;color:var(--accent-secondary)}.ai-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.ai-message{display:flex;gap:10px;max-width:90%;animation:.2s messageSlideIn}.ai-message.user{align-self:flex-end;flex-direction:row-reverse}.ai-message.user .ai-msg-content{background:var(--accent-primary);color:#fff;border-radius:12px 12px 0}.ai-message.ai .ai-msg-content{background:var(--bg-card);color:var(--text-primary);border-radius:12px 12px 12px 0;border:1px solid var(--border-color)}.ai-message.error .ai-msg-content{border-color:var(--danger);color:var(--danger)}.ai-msg-content{padding:10px 14px;font-size:13px;line-height:1.5}.ai-welcome-msg{text-align:center;padding:20px;margin-top:20px}.ai-avatar-large{font-size:48px;margin-bottom:12px}.ai-suggestions{display:flex;flex-direction:column;gap:8px;margin-top:20px}.ai-suggestion-btn{background:var(--bg-glass);border:1px solid var(--accent-secondary);color:var(--accent-secondary);padding:8px 12px;border-radius:var(--radius-full);font-size:12px;cursor:pointer;transition:all var(--transition-fast)}.ai-suggestion-btn:hover{background:var(--accent-primary);color:#fff}.ai-chat-input-area{padding:12px;border-top:1px solid rgba(108,92,231,.3);display:flex;gap:8px}.ai-chat-input{flex:1;padding:10px 14px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-family);font-size:13px;outline:0}.ai-typing-indicator{padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--accent-secondary)}.voice-recording-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,10,26,.95);z-index:10;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--danger)}.voice-recording-content{display:flex;align-items:center;gap:20px}.voice-recording-pulse{width:12px;height:12px;background:var(--danger);border-radius:50%;animation:1s infinite alternate pulse}.voice-recording-timer{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}.voice-recording-actions{display:flex;gap:10px;margin-left:20px}.voice-cancel-btn,.voice-send-btn{padding:6px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;cursor:pointer;border:none}.voice-cancel-btn{background:var(--bg-glass);color:var(--text-muted)}.voice-send-btn{background:var(--success);color:#fff}.voice-message{display:flex;align-items:center;gap:10px;background:var(--bg-card);padding:8px 16px;border-radius:var(--radius-full);border:1px solid var(--border-color)}.voice-waveform{color:var(--accent-secondary);letter-spacing:-2px}.voice-duration{font-size:11px;color:var(--text-muted)}.image-message img{max-width:250px;max-height:250px;border-radius:var(--radius-md);cursor:zoom-in;object-fit:cover}.image-caption{font-size:12px;margin-top:4px;color:var(--text-secondary)}.image-preview-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);z-index:2000;display:flex;align-items:center;justify-content:center}.image-preview-content{background:var(--bg-secondary);padding:20px;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:16px;max-width:90%}.image-preview-content img{max-width:100%;max-height:60vh;border-radius:var(--radius-md)}.image-preview-actions{display:flex;justify-content:flex-end;gap:12px}.lightbox-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);z-index:3000;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.lightbox-overlay img{max-width:95%;max-height:95%;object-fit:contain}.dm-status-icon.sent{color:var(--text-muted)}.dm-status-icon.delivered{color:var(--text-secondary)}.profile-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);backdrop-filter:blur(5px);z-index:2000;display:flex;align-items:center;justify-content:center}.profile-modal{background:var(--bg-secondary);width:400px;border-radius:var(--radius-xl);border:1px solid var(--border-color);padding:30px;position:relative}.profile-modal-close{position:absolute;top:15px;right:15px}.profile-modal-header{display:flex;align-items:center;gap:20px;margin-bottom:20px}.profile-avatar-large{width:80px;height:80px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;box-shadow:0 0 20px var(--accent-glow)}.profile-info h3{font-size:22px;margin-bottom:4px}.profile-status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);margin-bottom:4px}.profile-meta{font-size:12px;color:var(--text-muted)}.profile-bio{padding:15px;background:var(--bg-glass);border-radius:var(--radius-md);font-size:14px;margin-bottom:20px;font-style:italic;color:var(--text-secondary)}.profile-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}.profile-stat{display:flex;flex-direction:column;align-items:center;background:var(--bg-tertiary);padding:10px;border-radius:var(--radius-md)}.profile-stat-value{font-size:18px;font-weight:700;color:var(--accent-secondary)}.profile-stat-label{font-size:10px;color:var(--text-muted);text-transform:uppercase}.profile-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.badge{background:rgba(253,121,168,.1);color:#fd79a8;border:1px solid rgba(253,121,168,.3);padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600}.profile-actions{display:flex;gap:12px}.profile-actions button{flex:1}.dm-panel{position:fixed;right:20px;bottom:20px;width:360px;max-width:95vw;height:480px;max-height:80vh;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:0 10px 40px rgba(0,0,0,.4);display:flex;flex-direction:column;z-index:1500;overflow:hidden;animation:.3s slideUp}.dm-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.dm-user-info{display:flex;align-items:center;gap:10px}.dm-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}.dm-user-details{display:flex;flex-direction:column}.dm-username{font-size:14px;font-weight:600;color:var(--text-primary)}.dm-user-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}.dm-messages{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:var(--bg-main);scrollbar-width:thin}.dm-message{max-width:85%;padding:10px 14px;border-radius:var(--radius-lg);font-size:13px;line-height:1.4;position:relative;word-wrap:break-word}.dm-message.received{align-self:flex-start;background:var(--bg-card);border:1px solid var(--border-color);border-bottom-left-radius:4px}.dm-message.sent{align-self:flex-end;background:var(--accent-primary);color:#fff;border-bottom-right-radius:4px}.dm-message-time{opacity:.6;font-size:10px;opacity:.7;margin-top:4px;display:flex;justify-content:flex-end;align-items:center;gap:4px}.dm-status-icon{margin-left:4px;font-size:12px;display:inline-block;font-weight:700}.dm-status-icon.delivered,.dm-status-icon.sent{color:rgba(255,255,255,.6);text-shadow:0 1px 2px rgba(0,0,0,.15)}.dm-status-icon.read{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}.dm-input-area{display:flex;padding:12px;gap:8px;background:var(--bg-tertiary);border-top:1px solid var(--border-color)}.dm-input{flex:1;padding:10px 14px;border-radius:var(--radius-full);border:1px solid var(--border-color);background:var(--bg-glass);color:var(--text-primary);font-family:var(--font-family);font-size:13px;outline:0}.dm-input:focus{border-color:var(--accent-primary)}@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* ============================================================
   MOBILE RESPONSIVE FIXES — Chat fits screen without pinch-zoom
   ============================================================ */

/* Prevent any horizontal overflow on the chat page */
html.chat-page-html, .chat-body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure the chat layout never exceeds the viewport width */
.chat-layout {
  max-width: 100vw;
  overflow: hidden;
}

/* ---- Phones: max-width 600px ---- */
@media (max-width: 600px) {

  /* Core layout: full width single column, use dvh for mobile browsers */
  .chat-body { overflow: hidden; height: 100dvh; }
  .chat-layout {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  /* Chat main takes all available space */
  .chat-main {
    flex: 1;
    min-height: 0;
    height: 100dvh;
    max-width: 100vw;
    overflow: hidden;
  }

  /* Header: compact on mobile, prevent overflow */
  .chat-header {
    padding: 8px 10px;
    flex-shrink: 0;
  }
  .chat-header-left { gap: 6px; }
  .chat-header-right { gap: 4px; }
  .chat-room-icon { font-size: 18px; }
  .chat-room-name { font-size: 13px; }
  .chat-room-desc { display: none; } /* hide desc on small screens */
  .btn-icon { padding: 6px; font-size: 16px; }

  /* Messages area scrolls properly */
  .chat-messages {
    flex: 1;
    min-height: 0;
    padding: 10px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Messages don't overflow */
  .message {
    max-width: 100%;
    gap: 6px;
    padding: 6px 8px;
  }
  .message-avatar { width: 28px; height: 28px; font-size: 13px; flex-shrink: 0; }
  .message-text { font-size: 13px; word-break: break-word; }
  .message-username { font-size: 12px; }
  .message-time { font-size: 10px; }

  /* Input area: compact, no overflow */
  .chat-input-area {
    flex-shrink: 0;
    padding: 8px 8px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100vw;
  }

  /* Hide some action buttons on very small screens to free up space */
  .file-btn, .sticker-btn { display: none; }

  /* Make remaining buttons smaller */
  .emoji-btn, .img-btn, .voice-btn { font-size: 18px; padding: 5px; }

  /* Input field takes remaining space */
  .chat-input {
    min-width: 0;
    flex: 1;
    padding: 10px 12px;
    font-size: 14px; /* prevents iOS auto-zoom (must be ≥ 16px or exact) */
  }

  /* Send button stays fixed size */
  .send-btn { width: 38px; height: 38px; flex-shrink: 0; }

  /* Emoji picker: full-width, anchored to bottom */
  .emoji-picker {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 500;
    max-height: 50vh;
    padding: 12px 8px;
  }
  .emoji-grid { grid-template-columns: repeat(8, 1fr); gap: 2px; }
  .emoji-item { font-size: 20px; padding: 4px; }

  /* Sticker picker: full width bottom sheet */
  .sticker-picker {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw;
    height: auto;
    max-height: 55vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 500;
  }

  /* DM panel: full width bottom sheet */
  .dm-panel {
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw;
    height: 70dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* Profile modal: full width */
  .profile-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px);
    padding: 20px 16px;
    margin: 12px;
  }
  .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-modal-header { gap: 12px; }
  .profile-avatar-large { width: 60px; height: 60px; font-size: 24px; }
  .profile-info h3 { font-size: 16px; }

  /* Games panel: full width */
  .games-panel {
    width: 100vw !important;
    max-width: 100vw;
    max-height: 85dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .games-content { grid-template-columns: repeat(2, 1fr); padding: 10px; gap: 8px; }
  .games-overlay { padding-top: 0; align-items: flex-end; }

  /* Theme panel: full width */
  .theme-panel {
    width: 100vw !important;
    max-width: 100vw;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .theme-overlay { padding-top: 0; align-items: flex-end; }
  .theme-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }

  /* Friends panel: full width */
  .friends-panel {
    width: 100vw !important;
    max-width: 100vw;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .friends-overlay { padding-top: 0; align-items: flex-end; }

  /* Leaderboard panel: full width */
  .leaderboard-panel {
    width: 100vw !important;
    max-width: 100vw;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .leaderboard-overlay { padding-top: 0; align-items: flex-end; }

  /* Random chat panel: full width */
  .random-panel {
    width: 100vw !important;
    max-width: 100vw;
    height: 80dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .random-overlay { align-items: flex-end; }

  /* Search panel: full width */
  .search-panel {
    width: 100vw !important;
    max-width: 100vw;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 80dvh;
  }
  .search-overlay { padding-top: 0; align-items: flex-end; }

  /* Profile overlay panels */
  .profile-panel, .profile-overlay .profile-panel {
    width: 100vw !important;
    max-width: 100vw;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .profile-overlay { padding-top: 0; align-items: flex-end; }

  /* Voice recording overlay: compact on mobile */
  .voice-recording-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 12px;
  }
  .voice-recording-actions { margin-left: 0; }

  /* Reply/edit preview: compact */
  .reply-preview, .edit-preview { padding: 6px 10px; }
  .reply-preview-text, .edit-preview-text { font-size: 11px; }

  /* Image messages: constrain size */
  .image-message img {
    max-width: min(200px, 60vw);
    max-height: 200px;
  }

  /* Sidebar: already off-screen (fixed), show correctly */
  .chat-sidebar {
    width: min(280px, 85vw) !important;
  }

  /* Users panel: already off-screen (fixed), show correctly */
  .chat-users-panel {
    width: min(280px, 85vw) !important;
  }

  /* Typing indicator: compact */
  .typing-indicator { padding: 4px 12px; font-size: 11px; }

  /* Context menu: ensure doesn't overflow */
  .context-menu { max-width: calc(100vw - 24px); }

  /* Reaction picker: may overflow on very small screens */
  .reaction-picker {
    max-width: calc(100vw - 20px);
    flex-wrap: wrap;
  }

  /* AI chat panel: full width on mobile */
  .ai-chat-panel {
    width: calc(100vw - 16px) !important;
    right: 8px;
    bottom: 60px;
    height: min(500px, 70dvh);
  }
}

/* ---- Slightly larger phones (360–480px) ---- */
@media (min-width: 361px) and (max-width: 480px) {
  /* Show sticker button but hide file button */
  .file-btn { display: none; }
  .sticker-btn { display: inline-flex; }
  .emoji-btn, .sticker-btn, .img-btn, .voice-btn { font-size: 19px; padding: 5px; }
  .chat-input { padding: 10px 14px; }
}

/* iOS safe area support (notch / home bar) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 600px) {
    .chat-input-area {
      padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .chat-body { height: 100dvh; }
  }
}

/* Prevent input font-size zoom on iOS (font-size < 16px triggers zoom) */
@media (max-width: 600px) {
  .chat-input, .dm-input, .random-input-area input,
  .sidebar-search input, .users-search input,
  .search-panel-header input {
    font-size: 16px !important;
  }
}

/* ============================================================
   REPLY + REACTION FEATURE POLISH
   ============================================================ */

/* --- Reply Quote (shown inside a replied message) --- */
.reply-quote {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 6px;
  padding: 6px 10px;
  background: rgba(108, 92, 231, 0.08);
  border-radius: 8px;
  border-left: 3px solid var(--accent-primary);
  cursor: pointer;
  transition: background 0.15s;
  max-width: 100%;
}
.reply-quote:hover { background: rgba(108, 92, 231, 0.16); }
.reply-quote-bar { display: none; } /* already using border-left above */
.reply-quote-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reply-quote-user  { font-size: 11px; font-weight: 700; color: var(--accent-secondary); }
.reply-quote-text  { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Reaction picker position fix for mobile --- */
.reaction-picker {
  position: fixed;
  z-index: 1100;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 6px 10px;
  display: flex;
  gap: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  flex-wrap: wrap;
  max-width: min(340px, 94vw);
}

/* --- Context Menu (right-click / long-press) --- */
.context-menu {
  position: fixed;
  z-index: 2500;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  min-width: 180px;
  animation: 0.15s reactionPopIn;
}
.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  font-family: var(--font-family);
}
.context-menu-item:hover { background: var(--bg-glass-hover); }
.context-menu-item.danger { color: var(--danger); }
.context-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

/* ============================================================
   MOBILE LONG-PRESS: show action bar on .touch-active messages
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  /* On touch devices, action buttons are hidden by default */
  .message .msg-hover-actions,
  .message .message-actions-bar {
    display: none !important;
  }

  /* When long-pressed, show a bottom action bar */
  .message.touch-active {
    background: var(--bg-glass) !important;
    position: relative;
  }
  .message.touch-active .msg-hover-actions,
  .message.touch-active .message-actions-bar {
    display: flex !important;
    position: absolute;
    bottom: calc(100% + 4px);
    right: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 4px 8px;
    gap: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
    z-index: 200;
    animation: 0.15s reactionPopIn;
    flex-wrap: nowrap;
  }
  .message.touch-active .msg-action-btn {
    font-size: 18px;
    padding: 6px 8px;
    border-radius: 10px;
  }
  /* Larger touch targets */
  .msg-action-btn { min-width: 36px; min-height: 36px; }
  .reaction-emoji { min-width: 40px; min-height: 40px; font-size: 24px; }
  .reaction-badge { padding: 5px 10px; font-size: 15px; }
}

/* ============================================================
   MENTION HIGHLIGHT + CHAT LINK
   ============================================================ */
.mention-highlight {
  color: var(--accent-secondary);
  font-weight: 700;
  background: rgba(108, 92, 231, 0.12);
  border-radius: 4px;
  padding: 0 3px;
}
.chat-link {
  color: var(--accent-secondary);
  text-decoration: underline;
  word-break: break-all;
}
.chat-link:hover { opacity: 0.8; }

/* Link preview card */
.link-preview {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  max-width: 380px;
}
.link-preview:hover { background: var(--bg-glass-hover); }
.link-preview-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.link-preview-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.link-preview-title { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-preview-desc  { font-size: 12px; color: var(--text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.link-preview-url   { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   FILE MESSAGE
   ============================================================ */
.file-message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  max-width: 320px;
}
.file-icon { font-size: 28px; flex-shrink: 0; }
.file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-name { font-size: 13px; font-weight: 600; color: var(--accent-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.file-name:hover { text-decoration: underline; }
.file-size { font-size: 11px; color: var(--text-muted); }
.file-download-btn { font-size: 20px; cursor: pointer; flex-shrink: 0; transition: transform 0.15s; text-decoration: none; }
.file-download-btn:hover { transform: scale(1.2); }