/* ========================================================== THEME SYSTEM ---------------------------------------------------------- Three themes, all driven by CSS custom properties: - "default" : the original chattr navy/indigo look (:root) - "black" : true-black OLED theme - "custom" : palette derived in JS from a user-picked accent + background, injected as inline custom properties on Applied via ========================================================== */ :root { --bg-rail: #07090e; --bg-sub-sidebar: #0f131d; --bg-main: #141926; --bg-card: #1c2333; --bg-card-hover: #252e42; --bg-input: #1c2333; --border-subtle: rgba(255, 255, 255, 0.07); --border-hover: rgba(255, 255, 255, 0.15); --primary: #6366f1; --primary-hover: #4f46e5; --primary-glow: rgba(99, 102, 241, 0.35); --primary-light: rgba(99, 102, 241, 0.15); --owner-color: #f43f5e; --owner-badge-bg: rgba(244, 63, 94, 0.18); --online-green: #10b981; --offline-gray: #64748b; --danger: #ef4444; --danger-hover: #dc2626; --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-dim: #64748b; --bg-elevated: #1c2333; --bg-hover: rgba(255, 255, 255, 0.04); --bg-sidebar: #0f131d; --bg-auth: #141926; --bg-modal: #1c2333; --accent: #6366f1; --text-muted: #64748b; --sub-sidebar-width: 240px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', monospace; --rail-width: 72px; --sidebar-width: 240px; --members-width: 240px; --header-height: 56px; --announcements-height: 0; } html[data-theme="black"] { --bg-rail: #000000; --bg-sub-sidebar: #000000; --bg-main: #000000; --bg-card: #0b0b0d; --bg-card-hover: #16161a; --bg-input: #0b0b0d; --bg-elevated: #101013; --bg-hover: rgba(255, 255, 255, 0.05); --bg-sidebar: #000000; --bg-auth: #000000; --bg-modal: #0b0b0d; --border-subtle: rgba(255, 255, 255, 0.10); --border-hover: rgba(255, 255, 255, 0.22); --text-primary: #ffffff; --text-secondary: #a1a1aa; --text-dim: #71717a; --text-muted: #71717a; } html[data-theme="black"] .nav-rail, html[data-theme="black"] .sub-sidebar, html[data-theme="black"] .members-sidebar, html[data-theme="black"] .pinned-sidebar { border-color: rgba(255, 255, 255, 0.10); } html[data-theme="custom"] { } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background-color: var(--bg-main); color: var(--text-primary); min-height: 100vh; min-height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; height: 100vh; height: 100dvh; } body.chattr-bg .app-layout, body.chattr-bg .nav-rail, body.chattr-bg .sub-sidebar, body.chattr-bg .sub-sidebar-header, body.chattr-bg .sub-sidebar-content, body.chattr-bg .main-content, body.chattr-bg .view-chat-panel, body.chattr-bg .view-friends-hub, body.chattr-bg .chat-messages-container, body.chattr-bg .chat-header, body.chattr-bg .chat-input-container, body.chattr-bg .message-composer, body.chattr-bg .members-sidebar, body.chattr-bg .members-sidebar-header, body.chattr-bg .members-sidebar-list, body.chattr-bg .pinned-sidebar, body.chattr-bg .pinned-sidebar-header, body.chattr-bg .pinned-sidebar-list, body.chattr-bg .pinned-message-item, body.chattr-bg .app-footer, body.chattr-bg .auth-screen { background: transparent; } #announcements-banner { flex-shrink: 0; z-index: 100; } .app-layout { display: flex; flex: 1; width: 100%; overflow: hidden; position: relative; min-height: 0; height: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; outline: none; color: inherit; transition: all 0.15s ease; } input, textarea { font-family: inherit; color: inherit; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 14px; font-size: 0.95rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .mobile-only { display: none !important; } .nav-rail { width: var(--rail-width); background-color: var(--bg-rail); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 8px; flex-shrink: 0; z-index: 60; border-right: 1px solid rgba(0, 0, 0, 0.3); height: 100%; min-height: 0; } .rail-btn { width: 48px; height: 48px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; transition: border-radius 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease; } .rail-btn .rail-icon { width: 48px; height: 48px; border-radius: 50%; background-color: var(--bg-card); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 1.15rem; transition: inherit; } .rail-btn .rail-icon.server-icon { background: linear-gradient(135deg, #4f46e5, #9333ea); color: var(--text-primary); } .rail-btn .rail-icon .rail-favicon { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .rail-btn.active .rail-icon .rail-favicon, .rail-btn:hover .rail-icon .rail-favicon { background: var(--bg-hover); } .rail-btn:hover .rail-icon { border-radius: var(--radius-lg); background-color: var(--bg-hover); color: var(--text-primary); } .rail-btn.active .rail-icon { border-radius: var(--radius-lg); background-color: var(--bg-hover); color: var(--text-primary); box-shadow: 0 0 16px rgba(0, 0, 0, 0.4); } .rail-indicator { position: absolute; left: -12px; width: 4px; height: 0px; border-radius: 0 4px 4px 0; background-color: var(--text-primary); transition: height 0.2s ease; } .rail-btn:hover .rail-indicator { height: 20px; } .rail-btn.active .rail-indicator { height: 38px; } .server-rail-icon .rail-indicator { left: -12px; border-radius: 0 4px 4px 0; } .rail-badge { position: absolute; bottom: -2px; right: -2px; background-color: var(--danger); color: var(--text-primary); font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); border: 2px solid var(--bg-rail); } .rail-separator { width: 32px; height: 2px; background-color: var(--border-subtle); border-radius: 1px; margin: 4px 0; } .rail-spacer { flex: 1; } .rail-profile-display { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .rail-avatar { width: 44px; height: 44px; border-radius: 50%; background-color: var(--primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; position: relative; } .status-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg-rail); position: absolute; bottom: 0; right: 0; } .status-dot.online { background-color: var(--online-green); } .status-dot.offline { background-color: var(--offline-gray); } .sub-sidebar { width: var(--sidebar-width); background-color: var(--bg-sub-sidebar); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; flex-shrink: 0; height: 100%; min-height: 0; z-index: 40; overflow: hidden; } .sub-sidebar-header { height: var(--header-height); padding: 0 12px; display: flex; align-items: center; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .sub-sidebar-header.server-header { justify-content: space-between; padding: 0 16px; } .server-header-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; } .server-icon-mini { color: #a855f7; font-size: 1.1rem; } .owner-pill { font-size: 0.65rem; font-weight: 700; background-color: var(--owner-badge-bg); color: var(--owner-color); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid rgba(244, 63, 94, 0.3); } .btn-find-convo { width: 100%; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; transition: all 0.15s ease; } .btn-find-convo:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--primary); } .sidebar-section-title { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); text-transform: uppercase; flex-shrink: 0; } .sidebar-section-title .btn-icon-xs { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); border-radius: var(--radius-sm); } .sidebar-section-title .btn-icon-xs:hover { background: var(--bg-card-hover); color: var(--text-primary); } .msg-request-title { cursor: pointer; gap: 6px; } .msg-request-title .counter-badge { margin-left: 4px; } .dm-request-item .dm-username { display: flex; align-items: center; gap: 4px; } .dm-request-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 8px 12px 0; background: rgba(99, 102, 241, 0.10); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: var(--radius-md); flex-shrink: 0; } .dm-request-banner .drb-text { flex: 1; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; } .dm-request-banner .drb-text i { margin-right: 6px; color: var(--primary); } .dm-request-banner .drb-actions { display: flex; gap: 8px; flex-shrink: 0; } .dm-request-banner .btn-cib-cancel { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-dim); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; } .dm-request-banner .btn-cib-cancel:hover { background: var(--bg-card-hover); color: var(--text-primary); } .sub-sidebar-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 8px; min-height: 0; } .dm-conversations-list, .server-channels-list, .user-servers-list { display: flex; flex-direction: column; gap: 2px; } .dm-item, .channel-item, .user-server-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer; transition: background-color 0.1s ease; min-width: 0; } .dm-item:hover, .channel-item:hover, .user-server-item:hover { background-color: rgba(255, 255, 255, 0.04); } .dm-item.active, .channel-item.active, .user-server-item.active { background-color: var(--primary-light); color: var(--text-primary); } .dm-avatar, .channel-icon, .user-server-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); flex-shrink: 0; overflow: hidden; } .dm-avatar img, .channel-icon img, .user-server-avatar img { width: 100%; height: 100%; object-fit: cover; } .channel-icon { background: var(--primary); width: 28px; height: 28px; font-size: 0.8rem; border-radius: 6px; } .user-server-delete-btn { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); background: transparent; opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease; flex-shrink: 0; margin-left: auto; } .user-server-item:hover .user-server-delete-btn { opacity: 1; } .user-server-delete-btn:hover { background-color: rgba(239, 68, 68, 0.15); color: var(--danger); } .user-server-avatar { width: 40px; height: 40px; border-radius: var(--radius-lg); } .dm-info, .channel-info, .user-server-info { flex: 1; min-width: 0; } .dm-username, .channel-name, .user-server-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-last-msg { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .user-server-member-count { font-size: 0.7rem; color: var(--text-dim); } .dm-badge, .channel-badge { background-color: var(--danger); color: var(--text-primary); font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); flex-shrink: 0; } .sub-sidebar-footer { padding: 12px; border-top: 1px solid var(--border-subtle); flex-shrink: 0; } .current-user-card { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease; } .current-user-card:hover { border-color: var(--primary); } .current-card-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--primary); color: var(--text-primary); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .current-card-info { flex: 1; min-width: 0; } .current-card-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .current-card-role { font-size: 0.7rem; color: var(--text-dim); } .current-card-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); } .current-card-actions .btn-subtle { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: 0.75rem; font-weight: 500; } .pinned-sidebar { width: 0; min-width: 0; background-color: var(--bg-sub-sidebar); border-left: none; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .pinned-sidebar.open { width: var(--members-width); border-left: none; } .sub-sidebar-header { height: var(--header-height); padding: 0 12px; display: flex; align-items: center; border-bottom: 1px solid var(--border-subtle); } .sub-sidebar-header.server-header { justify-content: space-between; padding: 0 16px; } .server-header-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; } .server-icon-mini { color: #a855f7; font-size: 1.1rem; } .owner-pill { font-size: 0.65rem; font-weight: 700; background-color: var(--owner-badge-bg); color: var(--owner-color); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid rgba(244, 63, 94, 0.3); } .btn-find-convo { width: 100%; padding: 8px 12px; background-color: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; } .btn-find-convo:hover { background-color: rgba(0, 0, 0, 0.4); color: var(--text-secondary); } .sub-sidebar-content { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; } .nav-sub-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; } .nav-sub-item:hover { background-color: rgba(255, 255, 255, 0.04); color: var(--text-primary); } .nav-sub-item.active { background-color: var(--primary-light); color: var(--text-primary); font-weight: 600; } .nav-sub-item .counter-badge { margin-left: auto; background-color: var(--danger); color: var(--text-primary); font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); } .sidebar-section-title { display: flex; align-items: center; justify-content: space-between; padding: 16px 8px 6px 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); } .dm-conversations-list, .server-channels-list { display: flex; flex-direction: column; gap: 2px; } .dm-item, .channel-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease; } .dm-item:hover, .channel-item:hover { background-color: rgba(255, 255, 255, 0.04); } .dm-item.active, .channel-item.active { background-color: var(--primary-light); color: var(--text-primary); } .dm-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); position: relative; flex-shrink: 0; } .dm-info { flex: 1; min-width: 0; } .dm-username { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-last-msg { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-badge { background-color: var(--danger); color: var(--text-primary); font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); } .channel-unread-badge { margin-left: auto; background-color: var(--danger); color: var(--text-primary); font-size: 0.68rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px var(--bg-sidebar, #1e1f29); } .rail-unread-badge { position: absolute; bottom: -2px; right: -2px; background-color: var(--danger); color: var(--text-primary); font-size: 0.62rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-full); border: 2px solid var(--bg-rail, #16171f); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .deleted-message { color: var(--text-dim); font-style: italic; opacity: 0.75; } .channel-item { color: var(--text-secondary); font-size: 0.95rem; } .channel-item i { color: var(--text-dim); width: 16px; } .channel-item.active i { color: var(--primary); } .current-user-card { padding: 10px 12px; background-color: rgba(0, 0, 0, 0.25); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; } .user-card-avatar { width: 34px; height: 34px; border-radius: 50%; background-color: var(--primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; position: relative; flex-shrink: 0; } .user-card-info { flex: 1; min-width: 0; } .user-card-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-card-role { font-size: 0.7rem; color: var(--text-dim); text-transform: capitalize; } .user-card-actions { display: flex; align-items: center; gap: 3px; } .btn-icon-xs { width: 28px; height: 28px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.85rem; } .btn-icon-xs:hover { background-color: var(--bg-card-hover); color: var(--text-primary); } .btn-icon-xs.btn-logout:hover { color: var(--danger); } .main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; background-color: var(--bg-main); position: relative; min-height: 0; height: 100%; } } .top-nav-bar { height: var(--header-height); border-bottom: 1px solid var(--border-subtle); padding: 0 18px; display: flex; align-items: center; justify-content: space-between; background-color: rgba(20, 25, 38, 0.8); backdrop-filter: blur(8px); z-index: 20; } .top-nav-left { display: flex; align-items: center; gap: 16px; min-width: 0; } .nav-title-group { display: flex; align-items: center; gap: 12px; min-width: 0; } .nav-title-group .title-icon { color: var(--text-dim); font-size: 1.1rem; } .nav-title-group .title-text { font-weight: 700; font-size: 1.05rem; white-space: nowrap; } .nav-title-group .title-subtext { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-title-group .hash-icon { font-size: 1.3rem; font-weight: 700; color: var(--text-dim); } .dm-avatar-mini { width: 28px; height: 28px; border-radius: 50%; background-color: var(--primary); color: var(--text-primary); font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .friends-tab-bar { display: flex; align-items: center; gap: 8px; } .friend-tab { padding: 5px 12px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); } .friend-tab:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .friend-tab.active { background-color: rgba(255, 255, 255, 0.1); color: var(--text-primary); font-weight: 600; } .friend-tab.btn-tab-add { background-color: #10b981; color: var(--text-primary); font-weight: 600; } .friend-tab.btn-tab-add:hover { background-color: #059669; } .tab-badge { background-color: var(--danger); color: var(--text-primary); font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-full); margin-left: 4px; } .top-nav-right { display: flex; align-items: center; gap: 10px; } .owner-channel-controls { display: flex; gap: 6px; } .btn-nav-action { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); background-color: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; } .btn-nav-action:hover { background-color: var(--bg-card-hover); color: var(--text-primary); } .btn-nav-action.danger:hover { background-color: rgba(239, 68, 68, 0.15); color: var(--danger); border-color: rgba(239, 68, 68, 0.3); } .btn-nav-action .badge { background-color: var(--primary); color: var(--text-primary); font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); } .view-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-height: 0; height: 100%; } .friends-search-container { padding: 18px 24px 10px 24px; } .search-input-wrapper { position: relative; display: flex; align-items: center; } .search-input-wrapper i { position: absolute; left: 14px; color: var(--text-dim); } .search-input-wrapper input { width: 100%; padding-left: 40px; background-color: var(--bg-card); } .friends-view-content { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 24px 24px 24px; display: flex; flex-direction: column; gap: 8px; height: 100%; } .find-convo-results { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; } .find-convo-empty { text-align: center; color: var(--text-dim); padding: 24px 0; font-size: 0.88rem; } .friend-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: var(--radius-lg); background-color: var(--bg-card); border: 1px solid var(--border-subtle); transition: background-color 0.15s ease; } .friend-card:hover { background-color: var(--bg-card-hover); } .friend-card-left { display: flex; align-items: center; gap: 14px; } .friend-card-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: var(--text-primary); position: relative; } .friend-card-name { font-weight: 600; font-size: 0.95rem; } .friend-card-bio { font-size: 0.8rem; color: var(--text-secondary); } .friend-card-actions { display: flex; align-items: center; gap: 8px; } .btn-friend-action { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .btn-friend-action:hover { background-color: var(--primary); color: var(--text-primary); } .btn-friend-action.danger:hover { background-color: var(--danger); color: var(--text-primary); } .btn-friend-action.success:hover { background-color: var(--online-green); color: var(--text-primary); } .chat-messages-container { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; height: 100%; } .chat-welcome-banner { padding: 30px 0 20px 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: 10px; } .welcome-badge-icon { width: 56px; height: 56px; border-radius: 50%; background-color: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--primary); margin-bottom: 14px; } .chat-welcome-banner h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; } .chat-welcome-banner p { color: var(--text-secondary); font-size: 0.95rem; } .messages-stream { display: flex; flex-direction: column; gap: 16px; } .message-item { display: flex; gap: 14px; align-items: flex-start; animation: messageFade 0.2s ease-out; } @keyframes messageFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .system-message-item { display: flex; justify-content: center; animation: messageFade 0.2s ease-out; } .system-message { text-align: center; font-size: 0.78rem; color: var(--text-dim); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 4px 14px; margin: 4px auto; max-width: 90%; } .system-message strong { color: var(--text-secondary); font-weight: 600; } .system-message-time { margin-left: 8px; opacity: 0.6; font-size: 0.7rem; } .message-author-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: var(--text-primary); flex-shrink: 0; } .message-body { flex: 1; min-width: 0; } .message-header-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .author-role-badge, .role-tag { flex-shrink: 0; } .message-author-name { font-weight: 600; font-size: 0.95rem; } .message-timestamp { font-size: 0.72rem; color: var(--text-dim); } .author-role-badge { font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-sm); text-transform: uppercase; } .author-role-badge.owner { background-color: var(--owner-badge-bg); color: var(--owner-color); border: 1px solid rgba(244, 63, 94, 0.3); } .chattr-owner { background-color: rgba(244, 63, 94, 0.18) !important; color: #f43f5e !important; border: 1px solid #f43f5e !important; font-weight: 800 !important; text-transform: uppercase; user-select: none !important; -webkit-user-select: none !important; } .author-role-badge.admin { background-color: rgba(99, 102, 241, 0.2); color: #818cf8; } .message-text { font-size: 0.95rem; line-height: 1.5; color: var(--text-primary); word-break: break-word; white-space: pre-wrap; } .message-text a { color: #818cf8; text-decoration: underline; text-underline-offset: 2px; } .message-text code { font-family: var(--font-mono); font-size: 0.85em; background: rgba(0, 0, 0, 0.4); padding: 2px 6px; border-radius: 4px; color: #f472b6; } .message-text h1 { font-size: 1.5rem; font-weight: 700; margin: 12px 0 8px; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; } .message-text h2 { font-size: 1.3rem; font-weight: 600; margin: 10px 0 6px; color: var(--text-primary); } .message-text h3 { font-size: 1.15rem; font-weight: 600; margin: 8px 0 4px; color: var(--text-secondary); } .message-text blockquote { border-left: 3px solid var(--primary); padding-left: 12px; margin: 8px 0; color: var(--text-dim); font-style: italic; background: rgba(99, 102, 241, 0.1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .message-text pre { background: rgba(0, 0, 0, 0.5); border-radius: var(--radius-md); padding: 12px; margin: 8px 0; overflow-x: auto; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.5; } .message-text pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; } .message-text ul, .message-text ol { margin: 8px 0 8px 24px; padding: 0; } .message-text li { margin: 4px 0; line-height: 1.5; } .message-text hr { border: none; border-top: 1px solid var(--border-subtle); margin: 16px 0; } .message-text del { text-decoration: line-through; color: var(--text-dim); } .message-text em { font-style: italic; } .message-text strong { font-weight: 600; } .reply-preview-bar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 8px; animation: slideDown 0.2s ease; } .reply-preview-content { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .reply-preview-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--text-primary); flex-shrink: 0; } .reply-preview-info { display: flex; flex-direction: column; min-width: 0; } .reply-preview-author { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reply-preview-text { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } .reply-preview-close { width: 24px; height: 24px; border-radius: 50%; background: transparent; border: none; color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .reply-preview-close:hover { background: var(--bg-hover); color: var(--text-primary); } .message-reply-preview { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; background: rgba(99, 102, 241, 0.1); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: 8px; } .reply-preview-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--text-primary); flex-shrink: 0; margin-top: 2px; } .reply-preview-content { flex: 1; min-width: 0; } .reply-preview-author { font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reply-preview-text { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; margin-top: 2px; } .reply-preview-close { width: 20px; height: 20px; border-radius: 50%; background: transparent; border: none; color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; margin-top: 2px; } .reply-preview-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); } .embed-card { margin-top: 8px; max-width: 540px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); background-color: rgba(0, 0, 0, 0.25); } .embed-image-card { margin-top: 8px; display: inline-block; max-width: 100%; background: transparent !important; border: none !important; box-shadow: none !important; } .embed-image-wrapper { display: inline-block; max-width: 100%; background: transparent !important; border: none !important; } .embed-image-wrapper img { max-width: min(100%, 480px); max-height: 380px; width: auto; height: auto; object-fit: contain; display: block; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); cursor: zoom-in; transition: transform 0.2s ease, box-shadow 0.2s ease; } .embed-image-wrapper img:hover { transform: scale(1.01); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .embed-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-md); } .embed-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .embed-native-video-wrapper { margin-top: 8px; max-width: min(100%, 540px); border-radius: var(--radius-md); overflow: hidden; background-color: #000000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); border: 1px solid var(--border-subtle); } .embed-native-video-wrapper video { width: 100%; max-height: 400px; display: block; outline: none; } .embed-file { margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); max-width: 440px; width: fit-content; } .embed-file-thumb { position: relative; width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--fc, #8b949e); background: rgba(255, 255, 255, 0.07); background: color-mix(in srgb, var(--fc, #8b949e) 18%, transparent); flex-shrink: 0; } .embed-file-ext { position: absolute; bottom: -6px; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: var(--fc, #8b949e); padding: 1px 4px; border-radius: 4px; text-transform: uppercase; line-height: 1.3; } .embed-file-body { flex: 1; min-width: 0; } .embed-file-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); } .embed-file-meta { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; } .embed-file-dl { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: var(--text-secondary); background: rgba(255, 255, 255, 0.06); transition: background-color 0.15s ease, color 0.15s ease; } .embed-file-dl:hover { background: var(--primary); color: #fff; } .embed-audio-wrapper { margin-top: 8px; background-color: var(--bg-card); padding: 8px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); max-width: 380px; } .embed-audio-wrapper audio { width: 100%; height: 36px; outline: none; } .msg-edit-box { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .msg-edit-textarea { width: 100%; background-color: var(--bg-input); border: 1px solid var(--primary); border-radius: var(--radius-md); padding: 8px 12px; font-size: 0.95rem; color: var(--text-primary); resize: vertical; min-height: 50px; max-height: 200px; } .msg-edit-actions { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; } .msg-edit-hint { color: var(--text-dim); } .msg-edited-tag { font-size: 0.7rem; color: var(--text-dim); margin-left: 4px; font-style: italic; } .message-item { position: relative; padding: 4px 6px; border-radius: var(--radius-md); transition: background-color 0.15s ease; } .message-item:hover { background-color: rgba(255, 255, 255, 0.025); } .message-actions-bar { position: absolute; top: -12px; right: 12px; background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 2px 6px; display: none; align-items: center; gap: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); z-index: 10; } .message-item:hover .message-actions-bar { display: flex; } .btn-msg-action { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--text-secondary); } .btn-msg-action:hover { background-color: var(--bg-card-hover); color: var(--text-primary); transform: scale(1.15); } .btn-msg-action.danger:hover { color: var(--danger); } .reactions-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .reaction-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; transition: all 0.15s ease; user-select: none; } .reaction-pill:hover { background-color: rgba(255, 255, 255, 0.1); transform: scale(1.05); } .reaction-pill.reacted { background-color: var(--primary-light); border-color: var(--primary); color: var(--text-primary); } .reaction-count { font-size: 0.75rem; font-weight: 600; } .typing-bar { padding: 2px 24px; height: 20px; font-size: 0.78rem; color: var(--text-dim); display: flex; align-items: center; gap: 6px; font-style: italic; } .typing-dots { display: inline-flex; gap: 2px; } .typing-dots span { width: 4px; height: 4px; background-color: var(--primary); border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out both; } .typing-dots span:nth-child(1) { animation-delay: -0.32s; } .typing-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .lightbox-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; padding: 20px; } .lightbox-modal.open { opacity: 1; pointer-events: auto; } .lightbox-content { max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; gap: 12px; } .lightbox-content img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8); } .lightbox-actions { display: flex; gap: 12px; } .btn-lightbox { padding: 8px 16px; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, 0.15); color: var(--text-primary); font-size: 0.85rem; display: flex; align-items: center; gap: 6px; } .btn-lightbox:hover { background-color: var(--primary); } .chat-input-container { padding: 10px 24px 18px 24px; background-color: var(--bg-main); } .quick-emoji-bar { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; } .emoji-chip { padding: 4px 8px; border-radius: var(--radius-full); background-color: var(--bg-card); border: 1px solid var(--border-subtle); font-size: 1rem; } .emoji-chip:hover { background-color: var(--bg-card-hover); transform: scale(1.15); } .message-composer { display: flex; align-items: flex-end; background-color: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 6px 10px 6px 12px; gap: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .message-composer:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .btn-composer-upload { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.25rem; padding-bottom: 2px; transition: color 0.15s ease, transform 0.15s ease; } .btn-composer-upload:hover { color: var(--primary); transform: scale(1.1); } .btn-composer-upload.uploading { animation: spin 1s linear infinite; color: var(--primary); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .composer-textarea { flex: 1; background: transparent; border: none; padding: 8px 0; resize: none; font-size: 0.95rem; max-height: 140px; line-height: 1.4; } .composer-textarea:focus { border: none; box-shadow: none; } .btn-composer-send { width: 38px; height: 38px; border-radius: 50%; background-color: var(--primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .btn-composer-send:hover { background-color: var(--primary-hover); transform: scale(1.05); } .composer-actions { display: flex; align-items: center; gap: 4px; } .btn-composer-action { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.2rem; border-radius: 50%; transition: color 0.15s ease, transform 0.15s ease, background-color 0.15s ease; } .btn-composer-action:hover { color: var(--primary); background-color: var(--bg-card-hover); transform: scale(1.1); } .gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; } .gif-item { position: relative; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--bg-card); aspect-ratio: 1 / 1; border: 1px solid var(--border-subtle); transition: transform 0.12s ease, border-color 0.12s ease; } .gif-item:hover { transform: scale(1.03); border-color: var(--primary); } .gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .gif-empty, .gif-error { grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--text-dim); } .gif-loading { grid-column: 1 / -1; padding: 18px; text-align: center; color: var(--text-dim); } .gif-fav-btn { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.45); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; cursor: pointer; opacity: 0; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease; z-index: 2; } .gif-item:hover .gif-fav-btn, .gif-fav-btn.active { opacity: 1; } .gif-fav-btn:hover { background: rgba(0, 0, 0, 0.65); } .gif-fav-btn.active { color: #f43f5e; } .gif-tabs { display: flex; gap: 8px; padding: 0 12px 10px; } .gif-tabs .gif-tab { flex: 1; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--bg-input); color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .gif-tabs .gif-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } .members-sidebar { width: 0; min-width: 0; background-color: var(--bg-sub-sidebar); border-left: none; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .members-sidebar.open { width: var(--members-width); border-left: none; } .members-sidebar-header { height: var(--header-height); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); border-bottom: 1px solid var(--border-subtle); } .members-sidebar-list { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; } .member-group-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); padding: 12px 8px 4px 8px; } .member-card-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-md); font-size: 0.9rem; cursor: pointer; transition: background-color 0.15s ease; } .member-card-row:hover { background-color: rgba(255, 255, 255, 0.04); } .member-row-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: var(--text-primary); position: relative; flex-shrink: 0; } .member-row-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .member-row-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .member-row-badges { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; flex-shrink: 0; white-space: nowrap; } .member-banned-tag { font-size: 0.65rem; font-weight: 700; color: var(--danger); border: 1px solid var(--danger); border-radius: 4px; padding: 0 4px; margin-left: 4px; } .member-section-header { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 10px 8px 2px; } .member-role-header { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary); padding: 8px 8px 2px; opacity: 0.8; } .cs-section { margin-bottom: 18px; } .cs-section-title { font-weight: 700; margin-bottom: 8px; color: var(--text-primary); } .cs-mode-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .cs-mode-row label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; } .cs-choices { display: flex; gap: 16px; margin-top: 6px; } .cs-col { flex: 1; min-width: 0; } .cs-col-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .cs-roles-list, .cs-members { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; } .cs-check { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; } .cs-check:hover { background-color: rgba(255,255,255,0.04); } .cs-members .cs-check { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .channel-lock-icon { margin-left: 6px; color: var(--text-muted); font-size: 0.8rem; } .channel-settings-gear { margin-left: auto; opacity: 0.55; cursor: pointer; color: var(--text-muted); font-size: 0.8rem; padding: 0 6px; transition: opacity 0.15s ease, color 0.15s ease; } .channel-item:hover .channel-settings-gear { opacity: 1; } .channel-settings-gear:hover { color: var(--accent); } .composer-locked-note { font-size: 0.82rem; color: var(--text-muted); padding: 10px 14px; text-align: center; display: none; } .upload-hdd-warning { display: none; margin-top: 6px; font-size: 0.8rem; color: #ffe16b; background: rgba(255, 210, 0, 0.12); border: 1px solid rgba(255, 210, 0, 0.4); border-radius: var(--radius-sm); padding: 6px 10px; } .btn-kick-member { font-size: 0.75rem; padding: 2px 6px; border-radius: var(--radius-sm); background-color: rgba(239, 68, 68, 0.15); color: var(--danger); } .btn-kick-member:hover { background-color: var(--danger); color: var(--text-primary); } .pinned-sidebar { width: 0; min-width: 0; background-color: var(--bg-sub-sidebar); border-left: none; display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .pinned-sidebar.open { width: var(--members-width); border-left: none; } .pinned-sidebar-header { height: var(--header-height); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); border-bottom: 1px solid var(--border-subtle); } .pinned-sidebar-title { display: flex; align-items: center; gap: 8px; color: var(--primary); } .pinned-sidebar-list { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; } .pinned-message-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 12px; transition: all 0.15s ease; } .pinned-message-item:hover { border-color: var(--primary); box-shadow: 0 0 12px rgba(99, 102, 241, 0.2); } .pinned-message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .pinned-message-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--text-primary); flex-shrink: 0; overflow: hidden; } .pinned-message-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .pinned-message-author { font-size: 0.8rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pinned-message-time { font-size: 0.7rem; color: var(--text-dim); flex-shrink: 0; } .pinned-message-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; white-space: pre-wrap; word-break: break-word; max-height: 80px; overflow: hidden; text-overflow: ellipsis; } .pinned-message-item.has-media .pinned-message-text { max-height: none; overflow: visible; } .pinned-message-text img, .pinned-message-text video { display: block; max-width: 100%; max-height: 240px; width: auto; border-radius: var(--radius-md); margin-top: 6px; } .pinned-message-actions { display: flex; justify-content: flex-end; margin-top: 8px; gap: 6px; } .pinned-message-actions .btn-msg-action { font-size: 0.75rem; padding: 4px 8px; } .pinned-message-actions .btn-msg-action.pinned { color: var(--primary); } .auth-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, #1a2236 0%, #07090e 100%); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .auth-card { background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); width: 100%; max-width: 420px; padding: 32px 28px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); } .auth-header { text-align: center; margin-bottom: 24px; } .auth-logo { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--bg-card); display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); font-size: 1.5rem; margin-bottom: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .auth-logo img { width: 62%; height: 62%; object-fit: contain; border-radius: 10px; } .auth-header h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; } .auth-header p { font-size: 0.85rem; color: var(--text-secondary); } .auth-tabs { display: flex; background-color: rgba(0, 0, 0, 0.3); border-radius: var(--radius-md); padding: 4px; margin-bottom: 20px; } .auth-tab-btn { flex: 1; padding: 8px 0; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); } .auth-tab-btn.active { background-color: var(--primary); color: var(--text-primary); } .auth-alert { padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.85rem; margin-bottom: 16px; } .auth-alert.error { background-color: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); } .auth-alert.success { background-color: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); } .auth-form { display: flex; flex-direction: column; gap: 16px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 0.75rem; font-weight: 700; color: var(--text-dim); letter-spacing: 0.05em; } .field-hint { font-size: 0.72rem; color: var(--text-dim); } .form-agree { gap: 4px; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; } .agree-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 500; color: var(--text-primary); letter-spacing: normal; cursor: pointer; } .agree-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent, #6366f1); cursor: pointer; } .agree-label .tos-link { font-weight: 700; } .agree-tos-link { display: inline-block; color: var(--accent, #6366f1); text-decoration: underline; font-size: 0.8rem; font-weight: 700; } .auth-color-picker { display: flex; gap: 8px; flex-wrap: wrap; } .color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease; } .color-swatch:hover { transform: scale(1.15); } .color-swatch.active { border-color: var(--text-primary); transform: scale(1.1); } .btn-auth-submit { background: linear-gradient(135deg, #6366f1, #4f46e5); color: var(--text-primary); padding: 11px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.95rem; margin-top: 6px; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } .btn-auth-submit:hover { opacity: 0.95; transform: translateY(-1px); } .modal-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; padding: 16px; } .modal-wrapper.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.2s ease, visibility 0s linear 0s; } .modal-box { background-color: var(--bg-card, #1c2333); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); width: 100%; max-width: 440px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); overflow: hidden; } .modal-box.modal-wide { max-width: 650px; } .modal-wrapper.open .modal-box { transform: none; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); } .modal-head h3 { font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; } .modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; background-color: rgba(0, 0, 0, 0.2); border-top: 1px solid var(--border-subtle); } .btn-subtle { padding: 8px 16px; border-radius: var(--radius-md); background-color: rgba(255, 255, 255, 0.06); color: var(--text-secondary); font-size: 0.9rem; } .btn-subtle:hover { background-color: rgba(255, 255, 255, 0.12); color: var(--text-primary); } .btn-accent { padding: 8px 18px; border-radius: var(--radius-md); background-color: var(--primary); color: var(--text-primary); font-weight: 600; font-size: 0.9rem; } .btn-accent:hover { background-color: var(--primary-hover); } .profile-preview-box { display: flex; align-items: center; gap: 14px; padding: 12px; background-color: rgba(0, 0, 0, 0.2); border-radius: var(--radius-md); } .profile-preview-avatar { width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; position: relative; } .profile-image-upload-btn { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; border-radius: 50%; background-color: var(--primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; cursor: pointer; border: 2px solid var(--bg-modal); opacity: 0; transition: opacity 0.2s ease; } .profile-preview-avatar:hover .profile-image-upload-btn { opacity: 1; } .role-tag { font-size: 0.7rem; font-weight: 700; background-color: var(--primary-light); color: #818cf8; padding: 2px 6px; border-radius: var(--radius-sm); text-transform: uppercase; } .uwu-tag, .uwu-tag-alt { position: relative; display: inline-block; overflow: hidden; z-index: 0; color: #fff; border: 1px solid transparent; background: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); vertical-align: middle; } .uwu-tag::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 200%; z-index: -1; background-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000); animation: uwu-rainbow 4s linear infinite; } .uwu-tag-alt::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 200%; z-index: -1; background-image: linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #00ff88, #ffd000, #ff0080, #7928ca, #00d4ff, #00ff88, #ffd000, #ff0080); animation: uwu-rainbow 5s linear infinite; } @keyframes uwu-rainbow { from { transform: translateX(0); } to { transform: translateX(-50%); } } .official-tester-tag { background-color: rgba(250, 204, 21, 0.18) !important; color: #facc15 !important; border: 1px solid #facc15 !important; font-weight: 800 !important; text-transform: uppercase; user-select: none !important; -webkit-user-select: none !important; } .channel-input-prefix { display: flex; align-items: center; background-color: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .channel-input-prefix span { padding: 0 12px; color: var(--text-dim); font-weight: 700; } .channel-input-prefix input { border: none; padding-left: 0; width: 100%; } .owner-members-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .owner-members-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; text-align: left; } .owner-members-table th, .owner-members-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); } .owner-members-table th { background-color: rgba(0, 0, 0, 0.3); color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: var(--radius-full); } @media (max-width: 960px) { .members-sidebar { position: fixed; right: 0; top: 0; bottom: 0; width: var(--members-width); z-index: 50; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .members-sidebar.open { transform: translateX(0); } } @media (max-width: 720px) { .mobile-only { display: inline-flex !important; } .desktop-only { display: none !important; } .sub-sidebar { position: fixed; left: var(--rail-width); top: 0; bottom: 0; transform: translateX(-150%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .sub-sidebar.open { transform: translateX(0); } .friends-search-container, .friends-view-content { padding-left: 14px; padding-right: 14px; } .chat-messages-container { padding: 14px; } .chat-input-container { padding: 8px 14px 14px 14px; } } .app-footer { position: absolute; bottom: 0; left: calc(var(--rail-width) + var(--sub-sidebar-width)); right: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.75rem; color: var(--text-dim); border-top: 1px solid var(--border-subtle); background: var(--bg-sub-sidebar); z-index: 60; } .members-sidebar.open ~ .app-footer, .pinned-sidebar.open ~ .app-footer { right: var(--members-width); } .app-layout .chat-input-container { margin-bottom: 40px; } .tos-link { color: var(--text-dim); text-decoration: none; transition: color 0.15s ease; font-weight: 500; } .tos-link:hover { color: var(--primary); text-decoration: underline; } .footer-separator { color: var(--border-subtle); user-select: none; } .privacy-link { color: var(--text-dim); text-decoration: none; transition: color 0.15s ease; font-weight: 500; } .privacy-link:hover { color: var(--primary); text-decoration: underline; } .tos-content h4 { font-size: 1.1rem; font-weight: 700; } .tos-content h5 { font-size: 0.95rem; font-weight: 600; } .tos-content p { line-height: 1.7; } .tos-content strong { color: var(--text-primary); } #modal-tos, #modal-privacy { color: #e2e8f0 !important; } #modal-tos .modal-box, #modal-privacy .modal-box { background-color: #1c2333 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; } #modal-tos .modal-head, #modal-privacy .modal-head { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } #modal-tos .modal-head h3, #modal-privacy .modal-head h3, #modal-tos .btn-icon, #modal-privacy .btn-icon { color: #f8fafc !important; } #modal-tos .modal-body, #modal-privacy .modal-body, #modal-tos .tos-content p, #modal-privacy .tos-content p, #modal-tos .tos-content h5, #modal-privacy .tos-content h5, #modal-tos .tos-content a, #modal-privacy .tos-content a { color: #94a3b8 !important; } #modal-tos .tos-content h4, #modal-privacy .tos-content h4, #modal-tos .tos-content strong, #modal-privacy .tos-content strong { color: #f8fafc !important; } #modal-tos .tos-content p[style*="monospace"], #modal-privacy .tos-content p[style*="monospace"] { color: #818cf8 !important; } .profile-view-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 0 8px; } .profile-view-avatar { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; position: relative; } .profile-view-avatar .status-dot { position: absolute; bottom: 4px; right: 4px; width: 16px; height: 16px; border: 3px solid var(--bg-modal); border-radius: 50%; } .profile-view-info { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .profile-view-username { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); } .profile-view-role { display: flex; flex-wrap: wrap; gap: 4px; } .profile-view-role .role-tag { font-size: 0.7rem; padding: 2px 8px; } .profile-view-status { font-size: 0.8rem; color: var(--text-dim); display: flex; align-items: center; justify-content: center; gap: 6px; } .profile-view-status .status-dot { position: relative; bottom: auto; right: auto; border: none; flex-shrink: 0; } .profile-view-bio { background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px; margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; min-height: 40px; display: flex; align-items: center; justify-content: center; } .profile-view-bio.empty { color: var(--text-dim); font-style: italic; } .profile-view-actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-subtle); width: 100%; } .profile-view-actions button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; font-size: 0.85rem; font-weight: 600; } .user-servers-list { display: flex; flex-direction: column; gap: 4px; } .user-server-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease; } .user-server-item:hover { background-color: rgba(255, 255, 255, 0.04); } .user-server-item.active { background-color: var(--primary-light); color: var(--text-primary); } .user-server-avatar { width: 40px; height: 40px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-primary); flex-shrink: 0; overflow: hidden; } .user-server-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-server-info { flex: 1; min-width: 0; } .user-server-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-server-member-count { font-size: 0.75rem; color: var(--text-dim); } .user-servers-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px 20px; text-align: center; } .user-servers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 20px 24px; overflow-y: auto; height: 100%; } .user-server-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: all 0.15s ease; } .user-server-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .user-server-card-avatar { width: 64px; height: 64px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-primary); margin-bottom: 12px; overflow: hidden; background: linear-gradient(135deg, #6366f1, #ec4899); } .user-server-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-server-card-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .user-server-card-meta { font-size: 0.75rem; color: var(--text-dim); } .server-icon-preview { border: 2px solid var(--border-subtle); } .server-icon-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; } #view-user-server-chat .chat-messages-container { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; height: 100%; } .settings-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-md); margin-bottom: 16px; } .settings-tab { flex: 1; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; transition: all 0.15s ease; } .settings-tab:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .settings-tab.active { background: var(--primary); color: var(--text-primary); } .settings-panel { display: flex; flex-direction: column; gap: 16px; } .channels-list, .roles-list, .members-list { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; } .channel-setting-row, .role-setting-row, .member-setting-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .channel-setting-row .channel-icon, .role-setting-row .role-color-dot { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--text-primary); flex-shrink: 0; } .role-setting-row .role-color-dot { border-radius: 50%; } .channel-setting-info, .role-setting-info, .member-setting-info { flex: 1; min-width: 0; } .channel-setting-name, .role-setting-name, .member-setting-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .channel-setting-desc, .role-setting-perms { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .channel-setting-actions, .role-setting-actions, .member-setting-actions { display: flex; gap: 6px; } .btn-icon-sm { width: 28px; height: 28px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.8rem; background: transparent; border: none; cursor: pointer; } .btn-icon-sm:hover { background: var(--bg-card-hover); color: var(--text-primary); } .btn-icon-sm.danger:hover { color: var(--danger); } .emoji-picker-modal { max-width: 420px !important; max-height: 90vh; } .emoji-picker-modal .modal-body { padding: 0; max-height: 60vh; } .emoji-cat-btn { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.1rem; background: transparent; border: none; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .emoji-cat-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); } .emoji-cat-btn.active { background: var(--primary-light); color: var(--primary); } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 12px; } .emoji-btn { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: transparent; border: none; cursor: pointer; transition: all 0.15s ease; user-select: none; } .emoji-btn:hover { background: var(--bg-card-hover); transform: scale(1.2); z-index: 1; } .emoji-btn:active { transform: scale(0.95); } #emoji-search { padding: 6px 10px !important; font-size: 0.85rem !important; } .profile-image-preview { position: relative; } .profile-image-preview img { border-radius: 50%; } .profile-image-preview-char { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .nav-title-group .server-icon-mini { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-primary); flex-shrink: 0; overflow: hidden; } .nav-title-group .server-icon-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .dm-last-msg { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .message-reply-preview { cursor: pointer; transition: background-color 0.15s ease; } .message-reply-preview:hover { background: rgba(99, 102, 241, 0.15); } .pinned-sidebar-header, .members-sidebar-header { z-index: 10; } .members-sidebar { z-index: 50; } .pinned-sidebar { z-index: 49; } .top-nav-bar { z-index: 60; } #nav-title-user-server-channel { min-width: 0; } #nav-title-user-server-channel .title-details { min-width: 0; } #nav-title-user-server-channel .title-text, #nav-title-user-server-channel .title-subtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .server-rail-list { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; } .server-rail-icon { width: 48px; height: 48px; border: none; cursor: pointer; color: var(--text-primary); font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: border-radius .2s ease, transform .15s ease; box-shadow: 0 2px 8px rgba(0,0,0,.35); } .server-rail-icon:hover { border-radius: 14px; transform: translateY(-1px); } .server-rail-icon.active { border-radius: 14px; } .server-rail-icon .rail-indicator { background-color: var(--text-primary); } .server-rail-icon:hover .rail-indicator { height: 20px; } .server-rail-icon.active .rail-indicator { height: 38px; } .server-rail-icon.has-icon { background: transparent !important; box-shadow: none; } .server-rail-icon.has-icon:hover { background: transparent !important; } .server-rail-icon:hover .rail-icon-img { border-radius: var(--radius-lg); } .rail-icon-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .server-icon-upload { display: flex; align-items: center; gap: 14px; } .server-icon-preview { width: 56px; height: 56px; border-radius: var(--radius-lg); object-fit: cover; background: transparent; border: none; flex-shrink: 0; } .server-icon-upload-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .server-icon-upload-controls input[type="file"] { font-size: 0.8rem; color: var(--text-secondary); max-width: 220px; } .btn-sm { padding: 4px 10px; font-size: 0.78rem; } .rail-btn-add .rail-icon { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-secondary); } .rail-btn-add { background: var(--bg-elevated); } .rail-btn-add:hover { background: var(--primary); color: var(--text-primary); } .channel-del { margin-left: auto; font-size: .7rem; color: var(--text-dim); padding: 2px 6px; border-radius: 6px; display: none; } .channel-item:hover .channel-del { display: inline-block; } .channel-del:hover { color: var(--danger); background: rgba(255,255,255,.08); } .channel-add { color: var(--text-dim); cursor: pointer; } .channel-add:hover { color: var(--primary); } .tabs-row { display: flex; gap: 8px; } .tab-btn { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); cursor: pointer; font-weight: 600; } .tab-btn.active { background: var(--primary); color: var(--text-primary); border-color: var(--primary); } .form-hint { font-size: .8rem; color: var(--text-dim); margin: 0; } .btn-block { width: 100%; justify-content: center; } .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-md, 10px); border: 1px solid rgba(239,68,68,.5); background: rgba(239,68,68,.12); color: var(--danger, #ef4444); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .btn-danger:hover { background: var(--danger, #ef4444); color: #fff; } .account-danger-zone { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(239,68,68,.45); background: rgba(239,68,68,.08); border-radius: var(--radius-md, 10px); } .account-danger-zone .danger-zone-header { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--danger); margin-bottom: 6px; } .account-danger-zone .danger-zone-desc { font-size: 0.82rem; color: var(--text-secondary, #c7cdda); line-height: 1.5; margin: 0 0 12px; } .account-danger-zone .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; border-radius: var(--radius-md, 10px); border: 1px solid rgba(239,68,68,.55); background: rgba(239,68,68,.12); color: var(--danger, #ef4444); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .account-danger-zone .btn-danger:hover { background: var(--danger, #ef4444); color: #fff; } .invite-link-box { display: flex; gap: 8px; } .invite-link-box input { flex: 1; } .server-settings-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .modal-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 4px 0; } .invite-embed { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(99,102,241,.06)); border: 1px solid rgba(99,102,241,.4); border-radius: 12px; padding: 12px 14px; margin: 8px 0; } .invite-embed-icon { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; background: var(--primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .invite-embed-info { flex: 1; min-width: 0; } .invite-embed-title { font-weight: 700; } .invite-embed-sub { font-size: .8rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 2px; } .invite-embed-sub .invite-meta { font-size: .74rem; color: var(--text-dim); opacity: .85; } .invite-embed .btn-accent, .invite-embed .btn-subtle { flex: 0 0 auto; } .perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .perm-grid label { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-secondary); } .role-row { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 10px; } .role-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .role-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .role-name { font-weight: 600; } .role-perms { font-size: .75rem; color: var(--text-dim); } .role-row-actions { display: flex; gap: 6px; } .member-manage-row { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px; margin-bottom: 8px; } .member-manage-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .member-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .role-check { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--text-secondary); } .member-manage-actions { display: flex; gap: 8px; } .banned-tag { font-size: .7rem; color: var(--danger); font-weight: 700; } .server-rail-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 0 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } .server-rail-list::-webkit-scrollbar { width: 8px; } .server-rail-list::-webkit-scrollbar-track { background: transparent; } .server-rail-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .server-rail-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); background-clip: padding-box; } .sub-sidebar-header.server-header { min-width: 0; } .server-header-title { min-width: 0; flex: 1 1 auto; overflow: hidden; } .server-header-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #btn-owner-server-menu, #btn-user-server-menu { flex: 0 0 auto; width: 28px; height: 28px; flex-shrink: 0; } .theme-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; } .theme-option { position: relative; border: 2px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0; overflow: hidden; cursor: pointer; background: var(--bg-input); transition: border-color 0.15s ease, transform 0.15s ease; text-align: left; } .theme-option:hover { border-color: var(--border-hover); transform: translateY(-2px); } .theme-option.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .theme-swatch-preview { height: 54px; display: flex; align-items: stretch; } .theme-swatch-preview .tsp-rail { width: 22%; } .theme-swatch-preview .tsp-side { width: 30%; } .theme-swatch-preview .tsp-main { flex: 1; display: flex; align-items: center; justify-content: center; } .theme-swatch-preview .tsp-dot { width: 16px; height: 16px; border-radius: 50%; } .theme-option-label { display: block; padding: 7px 8px; font-size: 0.76rem; font-weight: 600; color: var(--text-secondary); text-align: center; border-top: 1px solid var(--border-subtle); } .theme-option.active .theme-option-label { color: var(--text-primary); } .theme-custom-controls { display: none; gap: 12px; margin-top: 10px; padding: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .theme-custom-controls.open { display: block; } .theme-color-row { display: flex; flex-direction: column; gap: 16px; } .theme-color-field { flex: 1; min-width: 130px; } .theme-color-field label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 6px; } .theme-color-input-wrap { display: flex; align-items: center; gap: 8px; } .theme-color-input-wrap input[type="color"] { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-input); cursor: pointer; flex-shrink: 0; } .theme-color-input-wrap input[type="text"] { flex: 1; min-width: 0; padding: 7px 9px; font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; } .theme-hint { font-size: 0.75rem; color: var(--text-dim); margin-top: 10px; line-height: 1.5; } .theme-reset-btn { margin-top: 10px; font-size: 0.78rem; color: var(--text-secondary); padding: 6px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .theme-reset-btn:hover { color: var(--text-primary); border-color: var(--border-hover); } .btn-nav-action.btn-call { color: var(--text-secondary); } .btn-nav-action.btn-call:hover { color: var(--online-green); background: rgba(16, 185, 129, 0.12); } .btn-nav-action.btn-call.in-call { color: var(--danger); background: rgba(239, 68, 68, 0.14); } .call-ring-modal { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 20px; } .call-ring-modal.open { display: flex; } .call-ring-card { width: 100%; max-width: 360px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 28px 24px 22px; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); animation: callRingIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); } @keyframes callRingIn { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .call-ring-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: var(--text-primary); background: var(--primary); background-size: cover; background-position: center; position: relative; } .call-ring-avatar::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--online-green); opacity: 0.7; animation: callPulse 1.6s ease-out infinite; } @keyframes callPulse { 0% { transform: scale(0.95); opacity: 0.7; } 70% { transform: scale(1.22); opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } } .call-ring-name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; word-break: break-word; } .call-ring-sub { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 6px; } .call-ring-note { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; } .call-ring-actions { display: flex; gap: 12px; justify-content: center; } .btn-call-round { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--text-primary); transition: transform 0.12s ease, filter 0.15s ease; } .btn-call-round:hover { transform: scale(1.08); filter: brightness(1.1); } .btn-call-round:active { transform: scale(0.96); } .btn-call-accept { background: var(--online-green); } .btn-call-decline { background: var(--danger); } .call-ring-actions-label { display: flex; gap: 12px; justify-content: center; margin-top: 8px; } .call-ring-actions-label span { width: 54px; text-align: center; font-size: 0.7rem; color: var(--text-dim); } .call-stage { position: fixed; z-index: 3500; display: none; flex-direction: column; background: #05060a; border: 1px solid var(--border-subtle); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65); overflow: hidden; } .call-stage.open { display: flex; } .call-stage.mode-docked { right: 18px; bottom: 18px; width: 420px; height: 268px; border-radius: var(--radius-lg); } .call-stage.mode-expanded { right: 3vw; bottom: 3vh; top: 3vh; left: 3vw; width: auto; height: auto; border-radius: var(--radius-lg); } .call-stage-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0, 0, 0, 0.55); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; cursor: grab; user-select: none; } .call-stage.mode-expanded .call-stage-header { cursor: default; } .call-stage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--offline-gray); flex-shrink: 0; transition: background 0.2s ease; } .call-stage-dot.connecting { background: #f59e0b; animation: callBlink 1s ease-in-out infinite; } .call-stage-dot.connected { background: var(--online-green); } .call-stage-dot.failed { background: var(--danger); } @keyframes callBlink { 50% { opacity: 0.3; } } .call-stage-title { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .call-stage-timer { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-secondary); flex-shrink: 0; } .call-stage-header-btns { display: flex; gap: 2px; flex-shrink: 0; } .btn-call-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.82rem; } .btn-call-icon:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); } .btn-call-icon.active { background: var(--primary-light); color: var(--primary); } .btn-call-icon.danger:hover { background: rgba(239, 68, 68, 0.18); color: var(--danger); } .call-stage-body { position: relative; flex: 1; min-height: 0; background: #05060a; display: flex; align-items: center; justify-content: center; } .call-remote-video { width: 100%; height: 100%; object-fit: contain; background: #05060a; display: none; } .call-remote-video.live { display: block; } .call-stage-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 18px; color: var(--text-dim); } .call-stage-placeholder.hidden { display: none; } .call-stage-placeholder i { font-size: 1.9rem; opacity: 0.5; } .call-stage-placeholder .csp-title { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); } .call-stage-placeholder .csp-sub { font-size: 0.76rem; max-width: 280px; line-height: 1.5; } .call-local-preview { position: absolute; right: 10px; bottom: 10px; width: 27%; max-width: 190px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.22); background: #000; object-fit: contain; display: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); z-index: 3; } .call-local-preview.live { display: block; } .call-stats-hud { position: absolute; left: 10px; top: 10px; display: none; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.66); border: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.35; color: var(--text-primary); z-index: 4; pointer-events: none; max-width: 62%; } .call-stats-hud.open { display: flex; } .call-stats-row { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; } .call-stats-row .csl { color: var(--text-dim); } .call-stats-row .csv { color: var(--text-primary); font-weight: 600; } .call-stats-row .csv.good { color: #34d399; } .call-stats-row .csv.warn { color: #fbbf24; } .call-stats-row .csv.bad { color: #f87171; } .call-stage-footer { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(0, 0, 0, 0.55); border-top: 1px solid var(--border-subtle); flex-shrink: 0; flex-wrap: wrap; } .btn-call-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; background: rgba(255, 255, 255, 0.08); color: var(--text-primary); white-space: nowrap; } .btn-call-pill:hover { background: rgba(255, 255, 255, 0.16); } .btn-call-pill.share-on { background: var(--primary); color: var(--text-primary); } .btn-call-pill.hangup { background: var(--danger); color: var(--text-primary); margin-left: auto; } .btn-call-pill.hangup:hover { background: var(--danger-hover); } .btn-call-pill:disabled { opacity: 0.45; cursor: not-allowed; } .call-quality-select { padding: 6px 8px; font-size: 0.76rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.08); border: 1px solid transparent; color: var(--text-primary); cursor: pointer; max-width: 150px; } .call-quality-select:focus { border-color: var(--primary); box-shadow: none; } .call-no-mic-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--text-dim); padding: 4px 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); white-space: nowrap; } .call-warning-bar { display: none; align-items: flex-start; gap: 8px; padding: 7px 10px; font-size: 0.74rem; line-height: 1.45; background: rgba(245, 158, 11, 0.14); border-top: 1px solid rgba(245, 158, 11, 0.3); color: #fcd34d; flex-shrink: 0; } .call-warning-bar.open { display: flex; } .call-warning-bar i { margin-top: 2px; flex-shrink: 0; } .call-stage:fullscreen { border-radius: 0; border: none; } .call-stage:fullscreen .call-stage-body { background: #000; } .call-stage:-webkit-full-screen { border-radius: 0; border: none; } .call-inline-banner { display: none; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 9px 12px; border-radius: var(--radius-md); background: var(--primary-light); border: 1px solid var(--primary); font-size: 0.83rem; color: var(--text-primary); } .call-inline-banner.open { display: flex; } .call-inline-banner .cib-spacer { flex: 1; } .btn-cib-cancel { padding: 5px 11px; border-radius: var(--radius-full); background: var(--danger); color: var(--text-primary); font-size: 0.76rem; font-weight: 600; } @media (max-width: 720px) { .call-stage.mode-docked { left: 10px; right: 10px; bottom: 10px; width: auto; height: 220px; } .call-stage.mode-expanded { inset: 0; border-radius: 0; } .call-stage-footer { gap: 6px; } .btn-call-pill { padding: 7px 10px; font-size: 0.75rem; } .call-stats-hud { max-width: 78%; font-size: 0.63rem; } .theme-picker-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; } .theme-option-label { font-size: 0.68rem; padding: 6px 4px; } } .call-overlay { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5000; display: none; flex-direction: column; align-items: center; gap: 10px; width: min(94vw, 600px); padding: 12px; background: var(--bg-modal); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); animation: callFadeIn 0.18s ease-out; } @keyframes callFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .call-overlay.dragging { user-select: none; cursor: grabbing; } .call-stage { position: relative; width: 100%; height: 340px; background: #000; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; cursor: grab; touch-action: none; } .call-stage:active { cursor: grabbing; } .call-topbar { cursor: grab; touch-action: none; } .call-remote-video { width: 100%; height: 100%; object-fit: contain; background: #000; } .call-remote-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(circle at 50% 40%, var(--bg-elevated), var(--bg-main)); color: var(--text-secondary); } .call-peer-avatar { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 800; color: var(--text-primary); background: var(--accent); box-shadow: 0 0 0 6px var(--primary-light); } .call-status-text { font-size: 0.95rem; letter-spacing: 0.02em; } .call-local-wrap { position: absolute; right: 10px; bottom: 10px; width: 132px; max-width: 38%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); background: #000; } .call-local-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .call-local-label { position: absolute; left: 8px; bottom: 6px; font-size: 0.7rem; padding: 2px 7px; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.6); color: var(--text-primary); } .call-topbar { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.55); color: var(--text-primary); font-size: 0.85rem; } .call-topbar .call-title { font-weight: 600; display: flex; align-items: center; gap: 7px; } .call-topbar .call-timer { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 0.8rem; } .call-controls { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 18px; border-radius: var(--radius-full); background: var(--bg-elevated); border: 1px solid var(--border-subtle); } .call-ctrl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 64px; height: 64px; border: none; border-radius: 50%; background: var(--bg-card-hover); color: var(--text-primary); cursor: pointer; font-size: 1.1rem; transition: transform 0.12s ease, background 0.12s ease; } .call-ctrl span { font-size: 0.62rem; font-weight: 600; } .call-ctrl:hover { transform: translateY(-2px); background: var(--border-hover); } .call-ctrl.active { background: var(--accent); color: var(--text-primary); } .call-ctrl.danger { background: var(--danger); color: var(--text-primary); } .call-ctrl.danger:hover { background: var(--danger-hover); } .call-ctrl.disabled { opacity: 0.55; cursor: not-allowed; } .call-ctrl.disabled:hover { transform: none; background: var(--bg-card-hover); } .call-toast { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(10px); padding: 10px 18px; border-radius: var(--radius-full); background: var(--bg-modal); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .call-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .call-incoming { position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center; background: rgba(5, 7, 12, 0.8); backdrop-filter: blur(4px); } .call-incoming-card { width: 320px; max-width: 88vw; padding: 28px 24px; text-align: center; border-radius: var(--radius-lg); background: var(--bg-modal); border: 1px solid var(--border-subtle); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); } .call-incoming-card h3 { margin-top: 14px; font-size: 1.25rem; color: var(--text-primary); } .call-incoming-card p { margin-top: 4px; font-size: 0.85rem; color: var(--text-secondary); } .call-incoming-ring { width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, var(--primary-light), transparent 70%); animation: callRing 1.4s ease-out infinite; } @keyframes callRing { 0% { box-shadow: 0 0 0 0 var(--primary-glow); } 70% { box-shadow: 0 0 0 22px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } } .call-incoming-avatar { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: var(--text-primary); background: var(--accent); } .call-incoming-actions { display: flex; gap: 12px; margin-top: 22px; } .call-accept, .call-decline { flex: 1; padding: 12px; border: none; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--text-primary); } .call-accept { background: var(--online-green); } .call-accept:hover { filter: brightness(1.1); } .call-decline { background: var(--danger); } .call-decline:hover { background: var(--danger-hover); } .theme-rgb-sliders { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .rgb-slider { -webkit-appearance: none; appearance: none; width: 100%; flex: none; height: 16px; border-radius: var(--radius-full); outline: none; cursor: pointer; } .rgb-slider#accent-r { background: linear-gradient(90deg, #000, #ff0000); } .rgb-slider#accent-g { background: linear-gradient(90deg, #000, #00ff00); } .rgb-slider#accent-b { background: linear-gradient(90deg, #000, #0000ff); } .rgb-slider#bg-r { background: linear-gradient(90deg, #000, #ff0000); } .rgb-slider#bg-g { background: linear-gradient(90deg, #000, #00ff00); } .rgb-slider#bg-b { background: linear-gradient(90deg, #000, #0000ff); } .rgb-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .rgb-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); } .call-topbar .call-title { gap: 7px; } .call-topbar.connected .call-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--online-green); box-shadow: 0 0 0 3px var(--primary-light); } .call-stage:fullscreen, .call-stage:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; border: none; } .call-stage:fullscreen .call-remote-video, .call-stage:-webkit-full-screen .call-remote-video { object-fit: contain; } .call-topbar.ringing .call-title i { color: var(--online-green); animation: callRingPulse 1.1s ease-in-out infinite; } @keyframes callRingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.6; } } .call-peer-avatar img, .call-incoming-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .call-peer-avatar #call-peer-initial, .call-incoming-avatar #incoming-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.4rem; font-weight: 800; color: var(--text-primary); } .call-peer-displayname { margin-top: 4px; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .call-remote-placeholder { gap: 10px; padding: 0 16px; text-align: center; } .call-incoming-avatar #incoming-initial { font-size: 2rem; } .btn-call.disabled, button.btn-call:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); } .rail-btn .rail-icon.server-icon, .rail-badge, .rail-avatar, .dm-badge, .channel-badge, .tab-badge, .channel-unread-badge, .rail-unread-badge, .btn-friend-action.danger:hover, .btn-kick-member:hover, .invite-embed-icon, .btn-call-accept, .btn-call-decline, .btn-call-pill.share-on, .btn-call-pill.hangup, .btn-cib-cancel, .call-ctrl.active, .call-ctrl.danger, .call-accept, .call-decline, .user-server-card-avatar, .btn-auth-submit, .tab-btn.active, .rail-btn-add:hover, .btn-accent { color: #ffffff !important; } .channel-icon, .counter-badge, .call-ring-avatar, .call-incoming-avatar { color: #ffffff !important; } .call-overlay .call-stage { display: flex; } .call-overlay .call-remote-video { display: block; background: #000; } .call-overlay .call-remote-placeholder { background: radial-gradient(circle at 50% 38%, #2a2f3a, #1a1d24); } .call-ctrl.active-off { background: var(--danger); color: #ffffff; } .call-ctrl.active-off:hover { background: var(--danger-hover); } .call-ctrl.active { background: var(--accent); color: #ffffff; } .call-overlay .call-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; } .call-overlay .call-ctrl { width: 56px; height: 56px; font-size: 1.05rem; background: rgba(255,255,255,0.08); border: 1px solid var(--border-subtle); } .call-overlay .call-ctrl:hover { background: rgba(255,255,255,0.16); } .call-overlay .call-ctrl.danger { background: var(--danger); color: #fff; } .call-overlay .call-ctrl.danger:hover { background: var(--danger-hover); } .call-overlay .call-ctrl.disabled { opacity: 0.5; cursor: not-allowed; } .call-overlay .call-ctrl.disabled:hover { transform: none; background: rgba(255,255,255,0.08); } .call-overlay .call-ctrl span { font-size: 0.6rem; font-weight: 600; margin-top: 2px; }