:root{--glass-bg:#1a243866;--glass-border:#ffffff14;--glass-blur:12px;--primary-color:#ffd600;--primary-gradient:linear-gradient(135deg, #ffd600, #ffc107);--text-primary:#fff;--text-secondary:#ffffffb3;--danger-color:#ef4444}.messaging-layout{grid-template-columns:320px 1fr 0;gap:1.5rem;width:100%;height:calc(100vh - 120px);transition:all .3s cubic-bezier(.4,0,.2,1);display:grid;position:relative}.messaging-layout.show-members{grid-template-columns:320px 1fr 280px}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:16px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 4px 24px #0003}.sidebar-header,.chat-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;height:70px;padding:1.25rem 1.5rem;display:flex}.chat-header.blur-header{background:#1a2438d9}.sidebar-header h2,.chat-header h2{color:var(--primary-color);margin:0;font-size:1.25rem;font-weight:600}.member-count{color:var(--text-secondary);margin-top:2px;font-size:.85rem;display:block}.chat-title-block{min-width:0}.chat-title-block h2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-header-actions{align-items:center;gap:.75rem;min-width:0;display:flex}.message-search input{border:1px solid var(--glass-border);width:min(220px,28vw);color:var(--text-primary);background:#ffffff0d;border-radius:10px;outline:none;padding:.65rem .8rem}.message-search input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #ffd7001f}.groups-list-container{flex:1;padding:1rem;overflow-y:auto}.group-item{cursor:pointer;width:100%;color:inherit;font:inherit;text-align:left;background:#ffffff08;border:1px solid #0000;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding:1rem 1.25rem;transition:all .2s;display:flex}.group-item:hover{background:#ffd70014;transform:translateY(-2px)}.group-item.active{border-color:var(--primary-color);background:#ffd70026;box-shadow:0 0 15px #ffd7001a}.group-item-info{flex:1}.group-item-name{color:var(--text-primary);margin-bottom:4px;font-size:1rem;font-weight:600}.group-item-members{color:var(--text-secondary);font-size:.8rem}.chat-area{flex-direction:column;height:100%;display:flex}.messages-container{scroll-behavior:smooth;flex-direction:column;flex:1;gap:1.5rem;padding:1.5rem;display:flex;overflow-y:auto}.message{gap:12px;max-width:80%;animation:.3s ease-out slideUp;display:flex}.message.sent{flex-direction:row-reverse;align-self:flex-end}.message-avatar{border:2px solid var(--primary-color);background:var(--primary-gradient);color:#0f172a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.78rem;font-weight:800;display:flex}.message-bubble{flex-direction:column;display:flex}.message-sender{color:var(--text-secondary);margin-bottom:4px;padding-left:4px;font-size:.8rem}.message.sent .message-sender{text-align:right;padding-right:4px}.message-content{word-wrap:break-word;white-space:pre-wrap;border-radius:16px;padding:.85rem 1.15rem;font-size:.95rem;line-height:1.5;position:relative;box-shadow:0 2px 8px #0000001a}.message.sent .message-content{background:var(--primary-gradient);color:#0f172a;border-top-right-radius:4px;font-weight:500}.message.received .message-content{color:#fff;background:#2a3852;border:1px solid #ffffff1a;border-top-left-radius:4px}.message-time{color:var(--text-secondary);margin-top:4px;padding-left:4px;font-size:.7rem}.message.sent .message-time{text-align:right;padding-right:4px}.message-input-area{border-top:1px solid var(--glass-border);background:#1a2438d9;flex-direction:column;gap:.75rem;padding:1.25rem 1.5rem;display:flex}.composer-row{align-items:flex-end;gap:12px;width:100%;display:flex}#messageInput{border:1px solid var(--glass-border);color:#fff;resize:none;background:#ffffff0d;border-radius:12px;flex:1;min-height:48px;max-height:120px;padding:12px 16px;font-family:inherit;font-size:1rem;transition:all .2s}#messageInput:focus{border-color:var(--primary-color);background:#ffffff1a;outline:none;box-shadow:0 0 0 3px #ffd70026}.composer-context{border-left:3px solid var(--primary-color);background:#ffd70014;border-radius:10px;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.75rem .9rem;display:flex}.composer-context div{flex-direction:column;gap:.2rem;min-width:0;display:flex}.composer-context strong{color:var(--primary-color);font-size:.85rem}.composer-context span{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;overflow:hidden}.composer-context button{color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #ffffff29;border-radius:8px;padding:.4rem .65rem}.composer-meta{color:#ffffff73;justify-content:space-between;gap:1rem;width:100%;font-size:.75rem;display:flex}.send-button{background:var(--primary-gradient);color:#0f172a;cursor:pointer;border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:flex}.send-button:hover{transform:scale(1.05);box-shadow:0 4px 12px #ffd7004d}.send-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.send-button svg{width:24px;height:24px}.members-sidebar{opacity:0;visibility:hidden;height:100%;transition:opacity .3s,visibility .3s;position:relative;overflow:hidden}.messaging-layout.show-members .members-sidebar{opacity:1;visibility:visible}.members-list-container{flex:1;padding:1rem;overflow-y:auto}.member-card{border-radius:8px;align-items:center;gap:12px;padding:10px;transition:background .2s;display:flex}.member-card:hover{background:#ffffff0d}.member-card img{object-fit:cover;border:2px solid #ffd7004d;border-radius:50%;width:40px;height:40px}.member-card-avatar{width:40px;height:40px;color:var(--primary-color);background:#ffd70029;border:2px solid #ffd7004d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:800;display:flex}.member-card-name{color:var(--text-primary);font-size:.95rem;font-weight:500}.member-card-role{color:var(--text-secondary);font-size:.75rem}.empty-state{text-align:center;height:100%;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon svg{width:80px;height:80px;color:var(--primary-color);opacity:.6;filter:drop-shadow(0 0 10px #ffd70033);margin-bottom:24px}.empty-state h2{color:#fff;margin-bottom:8px;font-size:1.5rem}.mobile-groups-toggle{display:none}@media (max-width:1024px){.messaging-layout{grid-template-columns:280px 1fr 0}.messaging-layout.show-members{grid-template-columns:280px 1fr 240px}}@media (max-width:768px){.messaging-layout{grid-template-rows:minmax(180px,28vh) 1fr;grid-template-columns:1fr;gap:1rem;height:calc(100vh - 80px)}.messaging-sidebar{z-index:auto;width:100%;height:100%;display:flex;position:relative}.messaging-layout.show-members{grid-template-columns:1fr}.members-sidebar{z-index:1000;opacity:1;visibility:visible;background:#101622;width:85%;height:100%;transition:transform .3s;position:fixed;top:0;right:0;transform:translate(100%)}.messaging-layout.show-members .members-sidebar{transform:translate(0)}.chat-header{flex-direction:column;align-items:stretch;gap:.75rem;height:auto}.chat-header-actions,.message-search,.message-search input{width:100%}.message{max-width:95%}}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#fff6}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.spinner{border:3px solid #ffd7004d;border-top-color:var(--primary-color);border-radius:50%;width:30px;height:30px;margin:0 auto 10px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-state,.empty-group-list,.empty-chat-state{text-align:center;color:var(--text-secondary);padding:2rem}.message-alert{color:var(--primary-color);background:#ffd70014;border:1px solid #ffd7002e;border-radius:10px;margin:.75rem 1.5rem 0;padding:.65rem .85rem;font-size:.88rem}.message-alert.error{color:#fca5a5;background:#ef44441a;border-color:#ef44443d}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.icon-btn{color:var(--primary-color);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.icon-btn:hover{background:#ffd7001a}.icon-btn svg{width:24px;height:24px}.group-item-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.unread-badge{background:var(--primary-gradient);color:#0f172a;text-align:center;border-radius:10px;flex-shrink:0;min-width:18px;padding:2px 6px;font-size:.7rem;font-weight:700;animation:2s infinite badgePulse}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.message-footer{justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding:0 4px;display:flex}.message.sent .message-footer{flex-direction:row-reverse}.message-actions{gap:4px;display:none}.message:hover .message-actions{display:flex}.msg-action-btn{cursor:pointer;color:var(--text-secondary);background:#ffffff1a;border:none;border-radius:4px;padding:4px;transition:all .2s}.msg-action-btn:hover{color:var(--text-primary);background:#fff3}.msg-action-btn.delete-btn:hover{color:#ef4444;background:#ef444433}.message.sending{opacity:.7}.message-status.sending{color:var(--text-secondary);align-items:center;gap:4px;font-style:italic;display:inline-flex}.sending-dot{background:var(--primary-color);border-radius:50%;width:6px;height:6px;animation:1s infinite sendingPulse}@keyframes sendingPulse{0%,to{opacity:.3}50%{opacity:1}}.edited-indicator{opacity:.7;font-size:.65rem;font-style:italic}.message.deleted .message-content{opacity:.6;font-style:italic}.deleted-message{color:var(--text-secondary)}.reply-preview{border-left:3px solid var(--primary-color);color:inherit;text-align:left;cursor:pointer;background:#1e232de6;border-top:0;border-bottom:0;border-right:0;border-radius:8px;margin-bottom:10px;padding:10px 12px;transition:background .2s}.reply-preview:hover{background:#282d37}.reply-author{color:#fff;margin-bottom:4px;font-size:.8rem;font-weight:600;display:block}.reply-text{color:#fffc;font-size:.85rem;line-height:1.4;display:block}.reply-input-preview{border-left:3px solid var(--primary-color);background:#ffd6001a;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:8px 12px;display:flex}.reply-input-content{flex:1;min-width:0}.reply-input-label{color:var(--primary-color);margin-bottom:2px;font-size:.75rem;display:block}.reply-input-text{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;display:block;overflow:hidden}.reply-cancel-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;border-radius:4px;padding:4px;transition:all .2s}.reply-cancel-btn:hover{color:var(--text-primary);background:#ffffff1a}.message.highlight{animation:2s ease-out highlightPulse}@keyframes highlightPulse{0%,to{background:0 0}25%,75%{background:#ffd60033}}