:root{--blue: #0084ff;--blue-dark: #0078ff;--bg: #ffffff;--surface: #ffffff;--sidebar-hover: #f0f2f5;--sidebar-active: #e7f3ff;--border: #e4e6eb;--text: #050505;--text-secondary: #65676b;--bubble-other: #e4e6eb}[data-theme=dark]{--bg: #18191a;--surface: #242526;--sidebar-hover: #3a3b3c;--sidebar-active: #263951;--border: #3e4042;--text: #e4e6eb;--text-secondary: #b0b3b8;--bubble-other: #3a3b3c}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}.auth-screen{max-width:360px;margin:80px auto;padding:28px;background:var(--surface);border-radius:12px;box-shadow:0 2px 12px #00000014;border:1px solid var(--border)}.auth-screen h2{margin-top:0;text-align:center}.auth-screen input{display:block;width:100%;padding:10px 12px;margin-bottom:10px;border:1px solid var(--border);border-radius:8px;font-size:15px}.auth-screen input:focus{outline:2px solid var(--blue);outline-offset:-1px}.auth-screen button{width:100%;padding:10px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer}.auth-screen .switch{text-align:center;margin-top:12px;font-size:13px;color:var(--blue);cursor:pointer}.error{color:#d32f2f;font-size:13px;margin-bottom:10px}.info-message{color:#1b7a2e;font-size:13px;margin-bottom:10px}.auth-divider{display:flex;align-items:center;text-align:center;color:var(--text-secondary);font-size:12px;margin:16px 0 12px}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid var(--border)}.auth-divider span{padding:0 10px}.google-btn-slot{display:flex;justify-content:center;margin-bottom:8px}.microsoft-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;cursor:pointer}.microsoft-btn:hover{background:var(--sidebar-hover)}.app-shell{display:flex;flex-direction:column;height:100vh}.app-header{flex-shrink:0;padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center}.app-header-spacer{flex:1}.app-header-brand{flex:1;display:flex;align-items:center;justify-content:center;gap:10px}.app-header-logo{height:36px;width:36px;object-fit:contain;border-radius:8px}.app-header-title{font-size:21px;font-weight:800;color:#ff0763;letter-spacing:.3px;text-align:left}.app-header-tagline{font-size:11px;color:var(--text-secondary);margin-top:1px;text-align:left}.theme-toggle-btn{flex:1;display:flex;justify-content:flex-end;background:none;border:none;cursor:pointer;font-size:18px;padding:6px 10px;border-radius:50%}.theme-toggle-btn:hover{background:var(--sidebar-hover)}.app{display:flex;flex:1;min-height:0}.sidebar{width:320px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-header{padding:14px 16px;display:flex;justify-content:space-between;align-items:center}.sidebar-header .me{display:flex;align-items:center;gap:8px}.logout-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:13px}.logout-btn:hover{text-decoration:underline}.search-box{margin:4px 16px 8px;padding:8px 12px;background:var(--sidebar-hover);border-radius:20px;display:flex;align-items:center;gap:8px;color:var(--text-secondary)}.search-box input{border:none;background:transparent;outline:none;font-size:14px;width:100%;color:var(--text)}.conversation-list{flex:1;overflow-y:auto;padding:4px 8px}.conversation-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;position:relative}.conversation-item:hover{background:var(--sidebar-hover)}.conversation-item.active{background:var(--sidebar-active)}.conversation-text{flex:1;min-width:0}.conversation-name{font-weight:600;font-size:14px}.conversation-name.unread{color:var(--blue)}.conversation-preview{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-preview.unread{color:var(--text);font-weight:600}.conversation-time{font-size:11px;color:var(--text-secondary);flex-shrink:0}.conversation-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.unread-dot{width:9px;height:9px;border-radius:50%;background:var(--blue);display:inline-block}.delete-conversation-btn{display:none;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;flex-shrink:0}.conversation-item:hover .delete-conversation-btn{display:flex}.delete-conversation-btn:hover{background:#ffe1e1;color:#d32f2f}.sidebar-actions{padding:8px 16px 14px;border-top:1px solid var(--border)}.sidebar-new{font-size:13px;color:var(--blue);cursor:pointer;padding:6px 0;font-weight:600}.sidebar-new:hover{text-decoration:underline}.avatar{border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;-webkit-user-select:none;user-select:none}.chat-area{flex:1;display:flex;flex-direction:column;min-width:0}.back-to-list-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;margin-right:4px;color:var(--text)}@media (max-width: 768px){.sidebar{width:100%;border-right:none}.sidebar.mobile-hide,.chat-area.mobile-hide{display:none}.back-to-list-btn{display:inline-flex;align-items:center}}.chat-header{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.chat-header-name{font-weight:600;font-size:15px}.chat-header-sub{font-size:12px;color:var(--text-secondary)}.chat-header-sub.clickable{cursor:pointer}.chat-header-sub.clickable:hover{text-decoration:underline;color:var(--blue)}.members-list{max-height:280px;overflow-y:auto;margin-bottom:8px}.member-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;font-size:14px}.member-row:hover{background:var(--sidebar-hover)}.member-row-text{flex:1;min-width:0}.member-remove-btn{background:none;border:none;color:#d32f2f;font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;flex-shrink:0}.member-remove-btn:hover{background:#ffe1e1}.chat-header-info{flex:1}.header-icon-btn{background:none;border:none;color:var(--blue);cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center}.header-icon-btn:hover{background:var(--sidebar-hover)}.messages{flex:1;overflow-y:auto;padding:12px 20px;display:flex;flex-direction:column}.message-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px;max-width:65%}.message-row.mine{align-self:flex-end;flex-direction:row-reverse}.message-avatar-slot{width:28px;flex-shrink:0}.message-col{display:flex;flex-direction:column;min-width:0}.message-row.mine .message-col{align-items:flex-end}.sender-name{font-size:12px;color:var(--text-secondary);margin:6px 0 2px 4px}.bubble{padding:8px 14px;border-radius:18px;font-size:14.5px;line-height:1.35;word-break:break-word;background:var(--bubble-other);color:var(--text);margin-bottom:2px}.message-row.mine .bubble{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff}.bubble.image{padding:0;background:transparent;overflow:hidden;line-height:0}.message-row.mine .bubble.image{background:transparent}.chat-image{display:block;max-width:260px;max-height:320px;border-radius:14px;object-fit:cover}.chat-video{display:block;max-width:260px;max-height:320px;border-radius:14px}.chat-file{display:inline-block;padding:10px 14px;border-radius:14px;background:var(--bubble-other, #eee);color:inherit;text-decoration:none;word-break:break-all}.bubble.deleted{font-style:italic;color:var(--text-secondary);background:var(--bubble-other)!important}.bubble-wrapper{position:relative;display:inline-flex;align-items:center;gap:6px}.message-row.mine .bubble-wrapper{flex-direction:row-reverse}.bubble-actions{display:none;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2px 4px;box-shadow:0 1px 4px #00000014}.bubble-wrapper:hover .bubble-actions{display:flex}.bubble-action-btn{background:none;border:none;cursor:pointer;font-size:13px;padding:4px 6px;border-radius:50%;line-height:1}.bubble-action-btn:hover{background:var(--sidebar-hover)}.reaction-picker{display:flex}.reaction-picker button{background:none;border:none;cursor:pointer;font-size:15px;padding:2px 4px;border-radius:50%;line-height:1}.reaction-picker button:hover{background:var(--sidebar-hover);transform:scale(1.15)}.reaction-pills{display:flex;gap:4px;margin-top:2px;flex-wrap:wrap}.reaction-pill{background:var(--sidebar-hover);border:1px solid var(--border);border-radius:12px;font-size:12px;padding:1px 8px;cursor:pointer}.reaction-pill.mine{background:var(--sidebar-active);border-color:var(--blue)}.edited-label{font-size:10.5px;color:var(--text-secondary);margin:1px 4px}.seen-label{font-size:11px;color:var(--text-secondary);margin:2px 4px 6px;text-align:right}.edit-form{display:flex;gap:4px;align-items:center}.edit-form input{padding:6px 12px;border-radius:14px;border:1px solid var(--blue);font-size:14.5px;min-width:160px}.edit-form button{background:none;border:none;cursor:pointer;font-size:15px;padding:2px 6px;border-radius:50%}.edit-form button:hover{background:var(--sidebar-hover)}.typing-indicator{font-size:12.5px;color:var(--text-secondary);font-style:italic;padding:4px 4px 0}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:15px}.composer{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border)}.composer input{flex:1;padding:10px 16px;border:none;background:var(--sidebar-hover);border-radius:20px;font-size:14.5px;outline:none}.send-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.send-btn:disabled{background:var(--border);color:var(--text-secondary);cursor:default}.attach-btn{width:36px;height:36px;border-radius:50%;border:none;background:none;color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.attach-btn:hover{background:var(--sidebar-hover)}.attach-btn:disabled{color:var(--text-secondary);cursor:default}.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:10}.modal{background:var(--surface);padding:20px;border-radius:12px;width:320px}.modal h3{margin-top:0}.modal-message{color:var(--text-secondary);font-size:14px;line-height:1.4;margin:0 0 4px}.modal input{display:block;width:100%;padding:10px 12px;margin-bottom:10px;border:1px solid var(--border);border-radius:8px;font-size:14px}.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.modal button{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-weight:600}.modal .cancel{background:var(--sidebar-hover);color:var(--text)}.modal .confirm{background:var(--blue);color:#fff}.modal .confirm.danger{background:#d32f2f}.modal-user-result{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;font-size:14px}.modal-user-result:hover{background:var(--sidebar-hover)}.modal-user-result .dim{color:var(--text-secondary);font-size:12.5px}.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.chip{display:inline-flex;align-items:center;gap:6px;background:var(--sidebar-active);color:var(--blue);padding:4px 6px 4px 10px;border-radius:14px;font-size:13px;font-weight:600}.chip button{background:none;border:none;color:var(--blue);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;border-radius:50%}.chip button:hover{background:#0084ff26}.picker-results{max-height:180px;overflow-y:auto;margin-top:4px;border:1px solid var(--border);border-radius:8px;padding:4px}