*, *::before, *::after {
box-sizing: border-box;
}
:root {
--app-gradient: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
--bg-dark: #0f141f;
--bg-panel: #141b2a;
--bg-chat: #101826;
--bg-members: #131b29;
--accent: #5865f2;
--text-main: #e3e8f0;
--text-muted: #8d97ab;
--border-dark: #1b2536;
--message-mentioned-background-default: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--sidebar-width: 240px;
--sidebar-resizer-width: 6px;
}
/* Custom Scrollbar Styles */
* {
scrollbar-width: thin;
scrollbar-color: var(--bg-dark) transparent;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--bg-dark);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--bg-panel);
}
body {
margin: 0;
font-family: "Segoe UI", sans-serif;
background: var(--app-gradient);
color: var(--text-main);
height: 100vh;
height: 100dvh;
display: flex;
overflow: hidden;
}
/* LAYOUT */
#app-container {
display: flex;
flex: 1 1 auto;
min-width: 0;
height: 100%;
height: calc(var(--app-vh, 1vh) * 100);
position: relative;
background: var(--app-gradient);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
}
#app-container.app-hidden #sidebar,
#app-container.app-hidden #members-sidebar,
#app-container.app-hidden #main-pane,
#app-container.app-hidden #sidebar-resizer {
visibility: hidden;
}
#sidebar {
width: var(--sidebar-width);
max-width: 400px;
background: var(--bg-dark);
display: flex;
flex-direction: column;
flex: 0 0 var(--sidebar-width);
}
#server-switcher {
height: 40px;
display: flex;
align-items: center;
padding: 0 3px;
font-weight: 700;
font-size: 0.9em;
border-bottom: 1px solid var(--border-dark);
background: var(--bg-panel);
}
.server-logout-btn {
margin-left: 8px;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--border-dark);
background: var(--bg-dark);
color: var(--text-main);
font-size: 0.75em;
font-weight: 600;
cursor: pointer;
}
.server-logout-btn:hover {
background: var(--bg-panel);
color: #ffffff;
}
#sidebar input {
width: auto;
box-sizing: border-box;
}
#sidebar select {
width: 100%;
box-sizing: border-box;
}
#myDetailsName,
#myDetailsStatus {
background: var(--bg-panel);
border: 1px solid var(--border-dark);
color: var(--text-main);
}
#myPresenceSelect {
background: var(--bg-panel);
border: 1px solid var(--border-dark);
color: var(--text-main);
padding: 4px;
border-radius: 6px;
font-size: 0.75em;
}
#myPresenceSelect[data-presence="online"] {
border-color: #3ba55c;
box-shadow: 0 0 0 1px rgba(59, 165, 92, 0.35);
}
#myPresenceSelect[data-presence="idle"] {
border-color: #faa61a;
box-shadow: 0 0 0 1px rgba(250, 166, 26, 0.35);
}
#myPresenceSelect[data-presence="dnd"] {
border-color: #ed4245;
box-shadow: 0 0 0 1px rgba(237, 66, 69, 0.35);
}
#myPresenceSelect[data-presence="invisible"] {
border-color: #747f8d;
box-shadow: 0 0 0 1px rgba(116, 127, 141, 0.35);
}
#sidebar-resizer {
width: var(--sidebar-resizer-width);
cursor: col-resize;
background: var(--border-dark);
flex: 0 0 var(--sidebar-resizer-width);
height: 100%;
align-self: stretch;
}
#main-pane {
flex: 1 1 auto;
display: flex;
flex-direction: row;
background: var(--bg-chat);
min-width: 0;
min-height: 0;
position: relative;
flex-basis: calc(100% - var(--sidebar-width));
}
#main-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}
#main-pane.members-sidebar-collapsed {
flex-basis: calc(100%);
}
#members-sidebar {
background: var(--bg-members);
display: flex;
flex-direction: column;
border-left: 1px solid var(--border-dark);
transition: width 0.15s ease;
min-width: 200px;
}
#members-sidebar.collapsed {
display: none !important;
}
#members-sidebar.collapsed #members-list {
display: none !important;
}
#members-sidebar.collapsed #status-bar {
display: none !important;
}
#connection-warning {
position: fixed;
top: 8px;
left: 50%;
transform: translateX(-50%);
background: #f28c2c;
color: #111;
padding: 3px 3px;
border-radius: 6px;
font-size: 0.75em;
z-index: 3000;
display: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
#app-container.mobile-layout,
html.force-mobile #app-container {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: var(--mobile-top, 50%) 1fr;
position: relative;
--mobile-tabs-height: 36px;
}
#app-container.mobile-layout #sidebar,
html.force-mobile #app-container #sidebar {
grid-column: 1;
grid-row: 1;
width: 100%;
min-width: 0;
max-width: none;
overflow: hidden;
}
#app-container.mobile-layout #membersToggleBtn,
html.force-mobile #app-container #membersToggleBtn {
display: none;
}
#app-container.mobile-layout #sidebar-resizer,
html.force-mobile #app-container #sidebar-resizer {
display: none;
}
#app-container.mobile-layout #members-sidebar,
html.force-mobile #app-container #members-sidebar {
grid-column: 1;
grid-row: 1;
width: 100%;
overflow: hidden;
}
#app-container.mobile-layout.mobile-show-members #sidebar,
html.force-mobile #app-container.mobile-show-members #sidebar {
display: none;
}
#app-container.mobile-layout.mobile-show-channels #members-sidebar,
html.force-mobile #app-container.mobile-show-channels #members-sidebar {
display: none;
}
#mobile-tabs {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: auto;
padding: 6px;
gap: 6px;
align-items: center;
justify-content: center;
flex-direction: column;
background: var(--bg-panel);
border: 1px solid var(--border-dark);
box-sizing: border-box;
touch-action: pan-y;
z-index: 30;
}
.mobile-tabs-header {
width: 100%;
text-align: center;
font-size: 0.7em;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #b9bbbe;
border: 1px solid #2b2d31;
padding: 3px 5px;
cursor: grab;
user-select: none;
}
.mobile-tabs-header:active {
cursor: grabbing;
}
#app-container.mobile-layout #mobile-tabs,
html.force-mobile #app-container #mobile-tabs {
display: flex;
}
.mobile-tab {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 28px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: #b9bbbe;
font-size: 0.85em;
font-weight: 600;
cursor: pointer;
}
.mobile-tab.active {
background: #2b2d31;
color: #ffffff;
border-color: #2a2d31;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.mobile-tab-icon {
font-size: 1em;
line-height: 1;
}
#app-container.mobile-layout #main-pane,
html.force-mobile #app-container #main-pane {
grid-column: 1 / span 3;
grid-row: 2;
min-width: 0;
overflow: hidden;
}
#main-pane-resizer {
position: absolute;
left: 0;
right: 0;
top: calc(var(--mobile-top, 50%) - 6px);
height: 12px;
cursor: row-resize;
display: none;
z-index: 25;
pointer-events: none;
touch-action: none;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(4px);
border-radius: 6px;
}
#main-pane-resizer::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}
#app-container.mobile-layout #main-pane-resizer,
html.force-mobile #app-container #main-pane-resizer {
display: block;
pointer-events: all;
}
#app-container.mobile-layout #main-content,
html.force-mobile #app-container #main-content {
max-height: calc(100vh - var(--mobile-top, 50%));
overflow-y: auto;
}
#app-container.mobile-layout #members-sidebar.collapsed,
html.force-mobile #app-container #members-sidebar.collapsed {
width: 100%;
border-left: 1px solid #202225;
}
#app-container.mobile-layout #channels-container,
html.force-mobile #app-container #channels-container {
height: 100%;
}
#app-container.mobile-layout #members-list,
html.force-mobile #app-container #members-list {
height: 100%;
}
#app-container.mobile-layout #messages,
html.force-mobile #app-container #messages {
min-height: 50px;
}
/* CHAT */
#messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 3px;
list-style: none;
margin: 0;
}
#messages li {
margin-bottom: 3px;
position: relative;
}
#messages li.message-group {
border-radius: 6px;
padding-right: 48px;
margin: 6px 0;
}
#messages li.message-group:hover {
background: rgba(79, 84, 92, 0.08);
}
#messages li.message-group .message-header {
display: flex;
align-items: baseline;
gap: 8px;
line-height: 1.375rem;
}
#messages li.message-group .message-content {
line-height: 1.4;
}
#messages li.message-group .message-content p {
margin: 0;
}
.message-avatar {
left: 8px;
}
#messages li.message-mentioned,
.message-content.message-mentioned {
background: var(--message-mentioned-background-default);
position: relative;
}
#messages li.message-system {
display: flex;
justify-content: center;
margin: 10px 0;
}
.message-system-content {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border-radius: 10px;
background: rgba(79, 84, 92, 0.25);
color: #b9bbbe;
font-size: 0.85rem;
}
.message-system-timestamp {
  color: #72767d;
  font-size: 0.75rem;
  }
.message-edited {
  color: #72767d;
  font-size: 0.75rem;
  margin-left: 6px;
  }
.discord-timestamp {
background: rgba(79, 84, 92, 0.16);
border-radius: 4px;
padding: 0 4px;
}
#messages li:hover .reaction-btn {
opacity: 1;
}
#changelog-panel {
transition: max-height 0.15s ease;
}
#changelog-list {
overflow-y: auto;
}
#changelog-panel.log-min {
max-height: 32px;
}
#changelog-panel.log-full {
max-height: 320px;
}
#changelog-panel.log-full #changelog-list {
max-height: 260px;
}
@media (max-width: 600px) {
#messages li.message-group {
padding-right: 8px;
}
.message-avatar {
width: 32px !important;
height: 32px !important;
left: 6px;
top: 6px !important;
}
.message-content {
margin-left: 44px !important;
}
.message-username {
font-size: 0.95rem !important;
}
.message-timestamp {
font-size: 0.7rem !important;
}
}
/* Chat input */
.chat-input-row {
display: flex;
gap: 8px;
padding: 3px;
border-top: 1px solid var(--border-dark);
background: var(--bg-panel);
align-items: center;
}
.emoji-picker-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #202225;
background: #2b2d31;
color: #f0f0f0;
cursor: pointer;
font-size: 18px;
flex-shrink: 0;
}
.emoji-picker-btn:hover {
background: #3a3d42;
}
.emoji-picker {
position: fixed;
display: none;
flex-direction: column;
width: min(498px, 100%);
max-height: min(540px, 80vh);
background: #1f2124;
border: 1px solid #202225;
border-radius: 12px;
padding: 0;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
z-index: 3000;
pointer-events: all;
}
.emoji-picker.open {
display: flex;
}
.emoji-picker-nav {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px 6px;
border-bottom: 1px solid #2a2d31;
background: #1c1e22;
}
.emoji-picker-tab {
border: none;
background: transparent;
color: #b9bbbe;
font-size: 0.85rem;
font-weight: 700;
padding: 6px 0;
cursor: default;
}
.emoji-picker-tab.active {
color: #ffffff;
border-bottom: 2px solid #5865f2;
}
.emoji-picker-tab[aria-disabled="true"],
.emoji-picker-tab:disabled {
opacity: 0.6;
}
.emoji-picker-header {
padding: 8px 14px 12px;
border-bottom: 1px solid #2a2d31;
}
.emoji-picker-search {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid #1f2225;
background: #2b2d31;
}
.emoji-picker-search svg {
color: #b9bbbe;
}
.emoji-picker-header input {
width: 100%;
border: none;
background: transparent;
color: #ffffff;
outline: none;
font-size: 0.9rem;
}
.emoji-picker-header input::placeholder {
color: #8e9297;
}
.emoji-picker-grid {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: 8px;
overflow-y: auto;
padding: 8px 10px 12px 12px;
}
.emoji-tile {
width: 40px;
height: 40px;
border-radius: 8px;
border: 1px solid transparent;
background: #2b2d31;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.emoji-tile:hover {
border-color: #5865f2;
background: #313338;
}
.emoji-tile img {
width: 28px;
height: 28px;
}
.emoji-empty {
color: #b9bbbe;
font-size: 0.85rem;
padding: 12px;
}
@media (max-width: 600px) {
.emoji-picker {
width: 90vw;
max-height: 60vh;
border-radius: 12px;
}
.emoji-picker-btn {
width: 28px;
height: 28px;
}
}
.reply-bar {
display: none;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 8px;
border-top: 1px solid var(--border-dark);
background: var(--bg-panel);
}
.reply-bar.open {
display: flex;
}
.reply-bar-main {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.reply-bar-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
background: #36393f;
background-size: cover;
background-position: center;
flex: 0 0 20px;
}
.reply-bar-avatar.has-avatar {
background-color: transparent;
}
.reply-bar-texts {
display: flex;
flex-direction: column;
min-width: 0;
}
.reply-bar-label {
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #b9bbbe;
}
.reply-bar-author {
font-size: 0.85rem;
font-weight: 600;
color: #ffffff;
}
.reply-bar-text {
font-size: 0.8rem;
color: #b9bbbe;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reply-bar-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.reply-ping-toggle,
.reply-cancel-btn {
border: 1px solid #202225;
background: #202225;
color: #dcddde;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 8px;
border-radius: 6px;
cursor: pointer;
}
.reply-ping-toggle.off {
background: #2f3136;
color: #72767d;
}
.reply-ping-toggle:hover,
.reply-cancel-btn:hover {
background: #2b2d31;
}
.replied-message {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 4px;
margin-left: 56px;
position: relative;
color: #b9bbbe;
}
.reply-spine {
position: absolute;
left: -36px;
top: 50%;
width: 32px;
height: 12px;
border-left: 2px solid #4f545c;
border-top: 2px solid #4f545c;
border-top-left-radius: 6px;
margin-top: -2px;
}
.reply-arrow {
font-size: 0.8rem;
color: #8e9297;
margin-right: 2px;
}
.reply-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
object-fit: cover;
}
.reply-author {
font-weight: 600;
font-size: 0.85rem;
margin-right: 4px;
color: #b9bbbe;
}
.reply-content {
font-size: 0.85rem;
color: #b9bbbe;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: min(300px, 60vw);
}
.replied-message.reply-clickable {
cursor: pointer;
}
.replied-message.reply-clickable:hover .reply-content {
text-decoration: underline;
}
.reply-deleted .reply-content,
.reply-deleted-text {
color: #8e9297;
font-style: italic;
}
.chat-input-row #msgInput {
  flex: 1;
  margin: 0;
  width: auto;
  background: #2b2d31;
  border: 1px solid #202225;
  color: var(--text-main);
  }
.slowmode-indicator {
  font-size: 0.75rem;
  color: #f0b232;
  padding-right: 6px;
  display: none;
  }
.slowmode-indicator.active {
  display: block;
  }
.slowmode-shake {
  animation: slowmode-shake 0.35s ease;
  }
@keyframes slowmode-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
  }
.message-jump-highlight {
  background: rgba(88, 101, 242, 0.16);
  border-radius: 4px;
  }
.pins-popover {
  width: 320px;
  max-height: 360px;
  background: #202225;
  border: 1px solid #2f3136;
  border-radius: 8px;
  padding: 10px;
  display: none;
  z-index: 2600;
  flex-direction: column;
  gap: 8px;
  }
.pins-popover.open {
  display: flex;
  }
.pins-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  }
.pins-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  }
.pins-empty {
  color: #b9bbbe;
  font-size: 0.85rem;
  }
.pins-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  }
.pins-item {
  background: #2b2d31;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  }
.pins-item-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #b9bbbe;
  }
.pins-item-meta {
  color: #72767d;
  font-size: 0.75rem;
  }
.pins-item-author {
  color: #fff;
  font-weight: 600;
  }
.pins-item-body {
  color: #dcddde;
  font-size: 0.9rem;
  }
.pins-item-actions {
  display: flex;
  gap: 6px;
  }
.pins-item-btn {
  font-size: 0.75rem;
  padding: 4px 8px;
  }
.chat-attach {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
}
.chat-attach-input {
display: none;
}
.chat-attach-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: transparent;
color: #b9bbbe;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.chat-attach-btn:hover {
background-color: #40444b;
color: #ffffff;
}
.channel-badges {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.channel-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
line-height: 18px;
font-size: 12px;
font-weight: var(--font-weight-medium, 500);
color: var(--text-subtle, #b9bbbe);
box-sizing: border-box;
}
.channel-badge-limit {
display: grid;
grid-template-columns: 1fr auto;
align-items: stretch;
background-color: var(--background-base-low, #2b2d31);
border: 1px solid var(--border-normal, #1f2225);
border-radius: var(--radius-md, 6px);
overflow: hidden;
flex: 0 0 auto;
height: 20px;
}
.channel-badge-users {
display: flex;
align-items: center;
background-color: var(--background-base-low, #2b2d31);
box-sizing: border-box;
font-variant-numeric: tabular-nums;
padding: 0 var(--space-4, 8px);
width: 28px;
justify-content: center;
}
.channel-badge-total {
background-color: var(--background-mod-strong, #202225);
box-sizing: border-box;
font-variant-numeric: tabular-nums;
padding-block: 0;
padding-inline: 2px 4px;
position: relative;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.attach-menu {
min-width: 220px;
}
.menu-label-with-icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
.attach-menu-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
color: #b9bbbe;
}
.attach-menu .menu-item:hover .attach-menu-icon {
color: #ffffff;
}
/* === TyrandChat :: Fancy Login Styles === */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes pulseGlow {
0% { box-shadow: 0 0 5px rgba(88, 101, 242, 0.4), 0 0 10px rgba(88, 101, 242, 0.3); }
50% { box-shadow: 0 0 15px rgba(88, 101, 242, 0.7), 0 0 25px rgba(88, 101, 242, 0.5); }
100% { box-shadow: 0 0 5px rgba(88, 101, 242, 0.4), 0 0 10px rgba(88, 101, 242, 0.3); }
}
#login-overlay {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%) !important;
backdrop-filter: blur(4px);
transition: opacity 0.3s ease;
}
html.has-session-token #app-container:not(.app-hidden) #login-overlay {
display: none !important;
}
#login-overlay .login-box {
background: rgba(47, 49, 54, 0.75);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 10px;
width: 340px;
text-align: center;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
animation: fadeIn 0.5s ease-out forwards;
display: flex;
flex-direction: column;
gap: 12px;
}
#login-overlay .login-box h3 {
margin: 0 0 8px 0;
font-size: 22px;
color: #fff;
font-weight: 600;
}
#login-overlay #loginAvatarPreview {
width: 88px !important;
height: 88px !important;
margin: 3px auto !important;
border-radius: 50%;
border: 2px dashed var(--accent);
background: rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s ease;
animation: pulseGlow 4s infinite ease-in-out;
}
#login-overlay #loginAvatarPreview:hover {
border-color: #fff;
background: rgba(88, 101, 242, 0.2);
transform: scale(1.05);
}
#login-overlay .login-box input[type="text"],
#login-overlay .login-box input[type="password"] {
background: rgba(32, 34, 37, 0.8);
border: 1px solid #202225;
color: white;
padding: 10px;
width: 100%;
margin-bottom: 5px;
border-radius: 5px;
box-sizing: border-box;
font-size: 14px;
transition: all 0.2s ease;
}
#login-overlay .login-box input[type="text"]:focus,
#login-overlay .login-box input[type="password"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.3);
}
#login-overlay .login-box .btn-green {
background: var(--accent);
color: white;
border: none;
padding: 10px;
border-radius: 5px;
width: 100%;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
#login-overlay .login-box .btn-green:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(88, 101, 242, 0.4);
}
#login-overlay .login-box .btn-green::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
#login-overlay .login-box .btn-green:hover::before {
left: 100%;
}
#login-overlay .instance-select {
position: relative;
margin-bottom: 10px;
}
#login-overlay .instance-select-selected {
background: rgba(32, 34, 37, 0.8);
border: 1px solid #202225;
color: white;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s ease;
}
#login-overlay .instance-select-selected:hover,
#login-overlay .instance-select.open .instance-select-selected {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.3);
}
#login-overlay .instance-select-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#login-overlay .instance-select.open .instance-select-arrow {
transform: rotate(180deg);
}
#login-overlay .instance-select-options {
display: block;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #282b30;
border: 1px solid #202225;
border-radius: 8px;
z-index: 10;
max-height: 200px;
overflow-y: auto;
opacity: 0;
transform: translateY(-10px) scale(0.98);
visibility: hidden;
transition: all 0.2s ease;
}
#login-overlay .instance-select.open .instance-select-options {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
}
#login-overlay .instance-select-option {
padding: 10px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
transition: background-color 0.2s ease;
}
#login-overlay .instance-select-option:hover {
background: var(--accent);
}
#login-overlay .instance-option-logo {
width: 36px;
height: 36px;
border-radius: 10px;
background: #40444b;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0;
transition: all 0.2s ease;
}
#login-overlay .instance-option-logo.has-avatar {
border-radius: 50%;
background-size: cover;
background-position: center;
color: transparent;
}
#login-overlay .instance-select-option:hover .instance-option-logo {
background: #fff;
color: var(--accent);
transform: rotate(-10deg) scale(1.1);
}
#login-overlay .instance-option-info {
display: flex;
flex-direction: column;
text-align: left;
}
#login-overlay .instance-option-name {
color: white;
font-weight: 500;
}
#login-overlay .instance-option-url {
color: var(--text-muted);
font-size: 0.8em;
}
/* MODAL & LOGIN (Generic Fallbacks) */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content,
.login-box {
background: var(--bg-chat);
padding: 3px;
border-radius: 8px;
width: 300px;
text-align: center;
}
#loginAvatarPreview {
background: radial-gradient(circle at 35% 30%, #4a4d55, #2a2c31);
border: 2px dashed #3b3f46;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6em;
color: var(--text-muted);
}
.btn-green {
background: var(--accent);
color: white;
border: none;
padding: 3px;
border-radius: 4px;
width: 100%;
cursor: pointer;
}
input,
select {
background: #202225;
border: 1px solid #202225;
color: white;
padding: 3px;
width: 90%;
margin-bottom: 3px;
border-radius: 4px;
}
.vc-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 5000;
}
.vc-modal-overlay.open {
display: flex;
}
.confirm-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 5200;
}
.confirm-modal.open {
display: flex;
}
.confirm-modal-card {
background: #2f3136;
border-radius: 10px;
width: 420px;
max-width: 92vw;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
border: 1px solid #202225;
overflow: hidden;
}
.confirm-modal-header {
padding: 10px;
border-bottom: 1px solid #202225;
}
.confirm-modal-header h4 {
margin: 0;
font-size: 16px;
color: #ffffff;
}
.confirm-modal-body {
padding: 10px;
color: #dcddde;
font-size: 13px;
}
.confirm-modal-actions {
padding: 10px;
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid #202225;
}
.vc-modal {
background: #2f3136;
border-radius: 8px;
width: 420px;
max-width: 92vw;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.vc-modal-header,
.vc-modal-footer {
padding: 10px 10px;
border-bottom: 1px solid #202225;
}
.vc-modal-footer {
border-top: 1px solid #202225;
border-bottom: none;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.vc-modal-body {
padding: 10px;
overflow-y: auto;
}
.vc-modal h5 {
margin: 0 0 10px 0;
font-size: 14px;
font-weight: 600;
color: #ffffff;
}
.vc-vmsg-buttons {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.vc-vmsg-preview {
display: flex;
align-items: center;
gap: 10px;
background: #202225;
border-radius: 6px;
padding: 10px;
margin-bottom: 10px;
}
.vc-vmsg-preview-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: #4f545c;
}
.vc-vmsg-preview-indicator.recording {
background: #ed4245;
}
.vc-vmsg-preview-time {
font-variant-numeric: tabular-nums;
color: #b9bbbe;
min-width: 48px;
}
.vc-vmsg-preview-label {
color: #dcddde;
}
.vc-vmsg-audio {
width: 100%;
}
.vc-btn {
border: none;
border-radius: 4px;
padding: 8px 10px;
font-size: 13px;
cursor: pointer;
}
.vc-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.poll-modal-label {
display: block;
margin: 10px 0 6px;
font-size: 13px;
color: #ffffff;
font-weight: 600;
}
.poll-modal-input {
width: 100%;
min-height: 54px;
resize: vertical;
background: #202225;
color: #ffffff;
border: 1px solid #202225;
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
box-sizing: border-box;
}
.poll-answers-header {
margin-top: 12px;
display: flex;
justify-content: space-between;
color: #b9bbbe;
font-size: 12px;
}
.poll-answers {
display: flex;
flex-direction: column;
gap: 8px;
margin: 8px 0 10px;
}
.poll-answer-row {
display: flex;
gap: 8px;
align-items: center;
}
.poll-answer-input {
flex: 1;
background: #202225;
color: #ffffff;
border: 1px solid #202225;
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
}
.poll-answer-remove {
background: #2f3136;
border: 1px solid #202225;
color: #b9bbbe;
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
}
.poll-answer-remove:hover {
color: #ffffff;
border-color: #2c2f33;
}
.poll-options-row {
margin-top: 10px;
}
.poll-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
color: #dcddde;
font-size: 13px;
}
.poll-modal-select {
width: 100%;
background: #202225;
color: #ffffff;
border: 1px solid #202225;
border-radius: 6px;
padding: 8px 10px;
font-size: 13px;
}
.poll-modal-duration {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto;
align-items: center;
gap: 6px;
}
.poll-modal-duration .poll-modal-input {
min-height: 40px;
padding: 6px 8px;
text-align: center;
}
.poll-duration-label {
color: #b9bbbe;
font-size: 12px;
letter-spacing: 0.08em;
}
.poll-duration-preview {
margin-top: 6px;
font-size: 12px;
color: #b9bbbe;
}
.poll-duration-alt {
margin-top: 8px;
display: grid;
gap: 6px;
}
.poll-duration-alt-label {
font-size: 12px;
color: #b9bbbe;
}
.poll-container {
margin-top: 8px;
padding: 10px 10px;
border-radius: 6px;
background: #2b2d31;
border: 1px solid #202225;
max-width: 520px;
}
.poll-header {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.poll-question {
color: #ffffff;
font-weight: 600;
font-size: 14px;
}
.poll-prompt {
color: #b9bbbe;
font-size: 12px;
}
.poll-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.poll-option {
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
background: #202225;
border: 1px solid #202225;
border-radius: 6px;
padding: 8px 10px;
color: #ffffff;
cursor: pointer;
}
.poll-option:hover {
border-color: #2c2f33;
}
.poll-option[data-selected="true"] {
border-color: #5865f2;
box-shadow: inset 0 0 0 1px #5865f2;
}
.poll-option:disabled {
cursor: not-allowed;
opacity: 0.7;
}
.poll-option-label {
font-size: 13px;
font-weight: 600;
color: #ffffff;
}
.poll-option-meta {
font-size: 11px;
color: #b9bbbe;
}
.poll-option-bar {
width: 100%;
height: 6px;
background: #2f3136;
border-radius: 999px;
overflow: hidden;
}
.poll-option-bar-fill {
height: 100%;
background: #5865f2;
width: 0%;
transition: width 0.2s ease;
}
.poll-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
gap: 8px;
}
.poll-stats {
font-size: 11px;
color: #b9bbbe;
}
.poll-vote-btn {
background: #5865f2;
border: none;
border-radius: 4px;
color: #ffffff;
font-size: 12px;
padding: 6px 10px;
cursor: pointer;
}
.poll-vote-btn:hover {
background: #4752c4;
}
.vc-btn-primary {
background: #5865f2;
color: #ffffff;
}
.vc-btn-primary:hover {
background: #4752c4;
}
.vc-btn-secondary {
background: #4f545c;
color: #ffffff;
}
.vc-btn-secondary:hover {
background: #5d6269;
}
/* Req 4: Reactions */
.msg-content p {
margin: 0;
} /* Markdown paragraphs */
.msg-header {
display: flex;
align-items: baseline;
gap: 8px;
}
.msg-author {
font-weight: bold;
color: #fff;
cursor: pointer;
}
.msg-timestamp {
color: var(--text-muted);
font-size: 0.75rem;
line-height: 1.375rem;
vertical-align: baseline;
cursor: default;
display: inline-block;
font-weight: 500;
height: 1.25rem;
pointer-events: none;
}
.emoji {
object-fit: contain;
width: 1.375em;
height: 1.375em;
vertical-align: bottom;
display: inline-block;
margin: 0 1px;
image-rendering: -webkit-optimize-contrast;
}
.emoji.jumboable {
width: 3rem;
height: 3rem;
margin: 2px;
min-height: 3rem;
}
.reaction-tag .emoji {
width: 1rem;
height: 1rem;
}
.emojiItemDisabled {
filter: grayscale(100%);
opacity: 0.3;
cursor: not-allowed;
}
.mention.mention-inner-wrapper {
display: inline-flex;
align-items: center;
padding: 0 4px;
border-radius: 3px;
background: rgba(88, 101, 242, 0.2);
color: #c9d2ff;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.mention.mention-inner-wrapper span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.mention.mention-inner-wrapper.interactive:hover {
background: rgba(88, 101, 242, 0.35);
color: #ffffff;
}
.vc-mentionAvatars-icon {
width: 16px;
height: 16px;
object-fit: cover;
}
.msg-separator {
display: inline-block;
font-style: normal;
}
.reactions-bar {
display: flex;
gap: 4px;
margin-top: 3px;
}
.reaction-tag {
background: #2f3136;
padding: 2px 3px;
border-radius: 4px;
font-size: 0.8em;
border: 1px solid #202225;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
user-select: none;
}
.reaction-btn {
opacity: 0;
position: absolute;
right: 0;
top: -10px;
background: var(--bg-panel);
border: 1px solid #202225;
cursor: pointer;
border-radius: 4px;
padding: 3px;
}
@keyframes reaction-pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.reaction-tag:active .emoji {
animation: reaction-pop 0.2s ease-in-out;
}
.file-attachment {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
border-radius: 8px;
border: 1px solid #202225;
background: #2b2d31;
max-width: 420px;
}
.file-share-thumb-wrap {
border-radius: 6px;
overflow: hidden;
background: #1f2124;
border: 1px solid #202225;
max-width: 240px;
}
.file-share-thumb {
display: block;
width: 100%;
height: auto;
}
.file-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.file-name {
font-weight: 600;
color: #ffffff;
word-break: break-word;
}
.file-size {
font-size: 0.75em;
color: #b9bbbe;
}
.file-actions {
display: flex;
gap: 6px;
}
.file-action {
background: #1f2124;
border: 1px solid #202225;
color: #dcddde;
border-radius: 6px;
padding: 4px 8px;
font-size: 0.85em;
cursor: pointer;
text-decoration: none;
text-align: center;
}
.file-action:hover {
background: #35373c;
color: #ffffff;
}
.file-share-download {
background: linear-gradient(135deg, #3ba55c, #2d7d46);
border-color: #2d7d46;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.01em;
}
.file-share-download:hover {
background: linear-gradient(135deg, #41b969, #2f8a4c);
border-color: #2f8a4c;
color: #ffffff;
}
.file-action.disabled,
.file-action[aria-disabled="true"],
.file-action:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.file-embed {
display: none;
border-top: 1px solid #202225;
padding-top: 8px;
}
.file-embed.open {
display: block;
}
.file-embed img,
.file-embed video,
.file-embed audio {
max-width: 100%;
border-radius: 6px;
}
.chat-attachments {
display: none;
flex-direction: column;
gap: 8px;
padding: 6px 0;
}
.chat-attachments[aria-hidden="false"] {
display: flex;
}
.pending-attachment {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 8px;
align-items: center;
background: #2b2d31;
border: 1px solid #202225;
border-radius: 8px;
padding: 8px;
}
.pending-attachment-preview {
width: 64px;
height: 64px;
background: #1f2124;
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.pending-attachment-preview img,
.pending-attachment-preview video {
width: 100%;
height: 100%;
object-fit: cover;
}
.pending-attachment-icon {
font-size: 1.2rem;
opacity: 0.8;
}
.pending-attachment-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.pending-attachment-name {
font-weight: 600;
color: #ffffff;
word-break: break-word;
}
.pending-attachment-size {
font-size: 0.75em;
color: #b9bbbe;
}
.pending-attachment-controls {
display: flex;
gap: 6px;
}
.pending-attachment-spoiler,
.pending-attachment-remove {
background: #1f2124;
border: 1px solid #202225;
color: #dcddde;
border-radius: 6px;
padding: 4px 8px;
font-size: 0.8em;
cursor: pointer;
}
.pending-attachment-desc {
grid-column: 1 / -1;
border: 1px solid #202225;
background: #1f2124;
color: #dcddde;
border-radius: 6px;
padding: 6px 8px;
font-size: 0.85em;
}
.pending-attachment-status {
grid-column: 1 / -1;
font-size: 0.75em;
color: #b9bbbe;
min-height: 16px;
}
.media-gallery {
display: grid;
gap: 4px;
margin-top: 6px;
max-width: 520px;
}
.media-gallery.count-1 {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.media-gallery.count-1 .media-tile {
min-height: 200px;
}
.media-gallery.count-2 {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 160px;
}
.media-gallery.count-3 {
grid-template-columns: 2fr 1fr;
grid-auto-rows: 120px;
}
.media-gallery.count-3 .media-tile:first-child {
grid-row: span 2;
}
.media-gallery.count-4,
.media-gallery.count-5,
.media-gallery.count-6,
.media-gallery.count-7,
.media-gallery.count-8,
.media-gallery.count-9,
.media-gallery.count-10 {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 110px;
}
.media-tile {
position: relative;
border-radius: 6px;
overflow: hidden;
background: #1f2124;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.media-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.media-tile-icon {
font-size: 1.4rem;
color: #dcddde;
}
.media-spoiler img {
filter: blur(12px);
}
.media-spoiler::after {
content: "SPOILER";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: 700;
font-size: 0.8rem;
background: rgba(0, 0, 0, 0.45);
letter-spacing: 0.08em;
}
.media-lightbox {
position: fixed;
inset: 0;
display: none;
z-index: 9999;
}
.media-lightbox.open {
display: block;
}
.media-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
}
.media-lightbox-body {
position: relative;
max-width: 90vw;
max-height: 90vh;
margin: 5vh auto;
background: #1f2124;
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 1;
}
.media-lightbox-content {
display: flex;
align-items: center;
justify-content: center;
max-height: 70vh;
min-height: 200px;
}
.media-lightbox-content img,
.media-lightbox-content video {
max-width: 100%;
max-height: 70vh;
border-radius: 8px;
}
.media-lightbox-caption {
font-size: 0.9em;
color: #b9bbbe;
word-break: break-word;
}
.media-lightbox-loading {
color: #b9bbbe;
font-size: 0.9em;
}
.media-lightbox-close {
position: absolute;
top: 8px;
right: 8px;
background: #1f2124;
border: 1px solid #202225;
color: #dcddde;
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
}
.media-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
border: none;
color: #ffffff;
border-radius: 999px;
width: 32px;
height: 32px;
cursor: pointer;
}
.media-lightbox-nav.prev { left: -16px; }
.media-lightbox-nav.next { right: -16px; }
.voice-message {
margin-top: 6px;
}
.voice-player {
display: flex;
align-items: center;
gap: 10px;
background: #2b2d31;
border: 1px solid #1f2125;
border-radius: 8px;
padding: 8px 10px;
max-width: 440px;
position: relative;
}
.voice-play-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: #1f2125;
color: #ffffff;
cursor: pointer;
}
.voice-play-btn:hover {
background: #272a30;
}
.voice-play-icon {
display: inline-block;
}
.voice-pause-icon {
display: none;
}
.voice-player.is-playing .voice-play-icon {
display: none;
}
.voice-player.is-playing .voice-pause-icon {
display: inline-block;
}
.voice-wave {
flex: 1;
display: flex;
align-items: center;
}
.voice-progress {
width: 100%;
height: 8px;
background: linear-gradient(90deg, rgba(79, 84, 92, 0.4), rgba(79, 84, 92, 0.2));
border-radius: 999px;
position: relative;
cursor: pointer;
overflow: hidden;
}
.voice-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #23a55a, #1b6f3c);
border-radius: inherit;
transition: width 0.1s ease;
}
.voice-duration {
font-size: 0.75rem;
color: #b5bac1;
min-width: 44px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.voice-rate-btn {
border: 1px solid #1f2125;
background: #1f2125;
color: #ffffff;
border-radius: 6px;
padding: 2px 6px;
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
}
.voice-rate-btn:hover {
background: #272a30;
}
.voice-volume {
display: inline-flex;
align-items: center;
}
.voice-volume-slider {
width: 70px;
accent-color: #23a55a;
}
.voice-audio {
display: none;
}
.voice-download {
color: #b5bac1;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: 1px solid transparent;
border-radius: 6px;
padding: 4px;
}
.voice-download:hover {
color: #ffffff;
background: #1f2125;
}
@media (max-width: 600px) {
.voice-player {
flex-wrap: wrap;
gap: 8px;
}
.voice-volume {
display: none;
}
}
.file-embed-note {
font-size: 0.8em;
color: #b9bbbe;
}
.file-share-progress {
display: none;
flex-direction: column;
gap: 6px;
border-top: 1px solid #202225;
padding-top: 8px;
}
.file-share-progress.open {
display: flex;
}
.file-share-row {
display: flex;
flex-direction: column;
gap: 4px;
}
.file-share-name {
font-size: 0.85em;
font-weight: 600;
color: #ffffff;
}
.file-share-meta {
display: flex;
justify-content: space-between;
font-size: 0.75em;
color: #b9bbbe;
gap: 8px;
}
.file-share-count {
background: #202225;
border-radius: 999px;
padding: 0 6px;
font-size: 0.7em;
color: #ffffff;
display: none;
}
.file-share-bar {
height: 6px;
border-radius: 999px;
background: #202225;
overflow: hidden;
}
.file-share-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #3ba55c, #1e6f3a);
transition: width 0.12s ease;
}
.link-previews {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.link-previews .message-embed {
margin-top: 0;
}
.link-preview-card {
display: flex;
gap: 12px;
padding: 10px;
border-radius: 8px;
border: 1px solid #202225;
background: #2b2d31;
text-decoration: none;
color: inherit;
max-width: 520px;
}
.link-preview-card:hover {
border-color: #3a3d43;
background: #31343a;
}
.link-preview-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.link-preview-title {
font-weight: 600;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-preview-desc {
color: #b9bbbe;
font-size: 0.85em;
max-height: 2.6em;
overflow: hidden;
}
.link-preview-url {
color: #8ea1e1;
font-size: 0.8em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-preview-image {
width: 96px;
height: 96px;
border-radius: 6px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.message-embed {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
padding: 8px 10px;
border-radius: 4px;
border-left: 4px solid #4f545c;
background: #2b2d31;
max-width: 432px;
}
.message-embed-content {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.message-embed-meta {
display: flex;
gap: 8px;
align-items: center;
font-size: 0.75em;
color: #b9bbbe;
}
.message-embed-provider,
.message-embed-author {
color: #b9bbbe;
text-decoration: none;
}
.message-embed-title {
color: #00a8fc;
font-weight: 600;
text-decoration: none;
}
.message-embed-desc {
color: #dcddde;
font-size: 0.85em;
line-height: 1.3;
max-height: 4.2em;
overflow: hidden;
}
.message-embed-image-link {
display: block;
max-width: 400px;
}
.message-embed-image {
width: 100%;
border-radius: 6px;
display: block;
}
.message-embed-video {
width: 100%;
max-width: 400px;
}
.message-embed-video iframe,
.message-embed-video video {
width: 100%;
aspect-ratio: 16 / 9;
border: none;
border-radius: 6px;
background: #000;
display: block;
}
.message-embed-video-placeholder {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 6px;
border: 1px solid #202225;
background: #1f2124;
color: #ffffff;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.message-embed-video-placeholder:hover {
background: #26282c;
}
/* USER INFO (Bottom Left) */
#user-info-area {
background: #101826;
padding: 3px;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
height: auto;
max-height: var(--user-info-expanded, 275px);
transition: max-height 0.2s ease;
font-size: 12px;
}
#user-info-area * {
font-size: 12px !important;
}
#user-info-area.collapsed {
max-height: 70px;
}
#user-info-area.popover-open {
overflow: visible;
}
#user-info-area .styled-btn {
padding: 3px;
}
#user-info-area .view-toggle {
padding: 3px;
}
#user-info-area .view-toggle-btn {
padding: 3px;
}
.user-info-header {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 10px;
cursor: pointer;
}
.user-info-header::after {
content: "v";
font-size: 0.75em;
color: #5f646b;
}
#user-info-area.collapsed .user-info-header::after {
content: ">";
}
.control-row,
.control-row-2 {
display: flex;
justify-content: space-around;
background: #0f141f;
padding: 3px;
border-radius: 4px;
gap: 5px;
}
.media-selects {
display: flex;
flex-direction: column;
gap: 4px;
}
.media-selects label {
font-size: 0.7em;
color: var(--text-muted);
}
.media-checkbox {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.7em;
color: var(--text-muted);
cursor: pointer;
}
.media-checkbox input {
width: auto;
margin: 0;
accent-color: var(--accent);
}
.media-selects select {
margin: 0;
}
.media-selects input[type="range"] {
width: 100%;
margin: 0;
}
.mic-multiselect {
position: relative;
width: 100%;
}
.multiselect-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: #202225;
border: 1px solid #202225;
color: #ffffff;
padding: 6px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 0.85em;
text-align: left;
}
.multiselect-trigger:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.multiselect-trigger::after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #b9bbbe;
margin-left: auto;
transition: transform 0.2s ease;
}
.mic-multiselect.open .multiselect-trigger::after {
transform: rotate(180deg);
}
.multiselect-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.multiselect-count {
font-size: 0.8em;
color: #b9bbbe;
flex: 0 0 auto;
}
.multiselect-list {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #1f2124;
border: 1px solid #202225;
border-radius: 6px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
padding: 6px;
max-height: 220px;
overflow-y: auto;
display: none;
z-index: 4100;
}
.mic-multiselect.open .multiselect-list {
display: block;
}
.multiselect-item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: 4px;
cursor: pointer;
color: #dcddde;
}
.multiselect-item input[type="checkbox"] {
margin: 0;
width: 14px;
height: 14px;
}
.multiselect-item:hover {
background: #2f3136;
}
.multiselect-empty {
padding: 6px 8px;
font-size: 0.8em;
color: #72767d;
}
.camera-consent-selects {
margin-top: 4px;
}
.user-info-row {
display: flex;
align-items: center;
gap: 8px;
}
.icon-btn {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 3px;
border-radius: 4px;
}
.icon-btn:hover {
background: #40444b;
color: white;
}
.icon-btn.active {
color: #3ba55c;
}
.icon-btn.danger {
color: #ed4245;
}
.icon-btn.fix-vc-btn {
background: #6b7280;
border: 1px solid #6b7280;
color: #fff;
}
.icon-btn.fix-vc-btn:hover {
background: #5b616c;
border-color: #5b616c;
}
.icon-btn.disconnect-vc-btn {
background: #d9534f;
border: 1px solid #d9534f;
color: #fff;
}
.icon-btn.disconnect-vc-btn:hover {
background: #c64541;
border-color: #c64541;
}
.icon-btn[title="Close"],
.icon-btn.close-button {
background: #421112;
color: #f0b7b7;
border: 1px solid #7a1a1a;
width: auto;
min-width: 30px;
}
.icon-btn[title="Close"]:hover,
.icon-btn.close-button:hover {
background: #7a1a1a;
color: #fff;
}
.styled-btn {
background-color: #161e33;
color: #a1a1a1;
border: 1px solid #202225;
padding: 5px 10px;
border-radius: 4px;
font-family: "Segoe UI", sans-serif;
font-size: 14px;
cursor: pointer;
text-align: center;
flex-grow: 1;
}
.styled-btn:hover {
background-color: #172f5e;
}
.view-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background-color: #0f1524;
color: #dcddde;
border: 1px solid #202225;
padding: 5px 10px;
border-radius: 4px;
font-family: "Segoe UI", sans-serif;
font-size: 14px;
flex-grow: 1;
}
.view-toggle-label {
color: #dcddde;
}
.view-toggle select {
background-color: #141a24;
border: 1px solid #202225;
color: #dcddde;
padding: 3px 6px;
border-radius: 4px;
font-family: "Segoe UI", sans-serif;
font-size: 12px;
cursor: pointer;
width: auto;
margin: 0;
}
.view-toggle-btn {
background-color: #1f2124;
border: 1px solid #202225;
padding: 3px 6px;
border-radius: 4px;
}
.view-toggle-btn:hover {
background-color: #36393f;
color: white;
}
.login-code-menu {
position: relative;
display: inline-flex;
}
.login-code-popover {
position: absolute;
left: -125px;
bottom: calc(100% + 6px);
width: 260px;
background: #1f2124;
border: 1px solid #202225;
border-radius: 8px;
padding: 3px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
display: none;
z-index: 4000;
}
.draggable-popover {
cursor: grab;
touch-action: none;
}
.draggable-popover.dragging {
cursor: grabbing;
}
.login-code-popover.open {
display: block;
}
.login-code-title {
font-size: 0.8em;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.login-code-value {
font-family: monospace;
font-size: 0.8em;
color: #fff;
background: #2b2d31;
border: 1px solid #202225;
border-radius: 6px;
padding: 3px;
word-break: break-all;
margin-bottom: 3px;
}
.login-code-row {
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 3px;
}
.login-code-row .login-code-value {
flex: 1;
margin-bottom: 0;
}
.login-code-actions {
display: flex;
gap: 6px;
margin-bottom: 3px;
}
.login-code-actions .btn-green {
width: auto;
flex: 1;
}
.login-code-actions-compact {
margin-top: 3px;
margin-bottom: 0;
}
.login-code-divider {
height: 1px;
background: #2c2f33;
margin: 6px 0;
}
.login-code-form {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 4px;
}
.login-code-label {
font-size: 0.7em;
color: var(--text-muted);
}
.login-code-input {
background: #2b2d31;
border: 1px solid #202225;
border-radius: 6px;
color: #ffffff;
padding: 4px 6px;
font-size: 0.8em;
}
.login-code-status {
min-height: 14px;
font-size: 0.7em;
color: #3ba55c;
margin: 3px 0;
}
.login-code-status.error {
color: #ed4245;
}
.login-code-hint {
font-size: 0.7em;
color: var(--text-muted);
}
.quality-menu {
position: relative;
display: inline-flex;
}
.quality-popover {
position: absolute;
right: 0;
bottom: calc(100% + 6px);
width: 260px;
background: #1f2124;
border: 1px solid #202225;
border-radius: 8px;
padding: 3px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
display: none;
z-index: 4000;
}
.quality-popover.open {
display: block;
width: 250px;
}
.quality-title {
font-size: 0.8em;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.quality-section {
margin-bottom: 3px;
}
.quality-label {
font-size: 0.75em;
color: var(--text-muted);
margin-bottom: 3px;
}
.quality-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.quality-field {
display: flex;
flex-direction: column;
gap: 2px;
}
.quality-field label {
font-size: 0.7em;
color: var(--text-muted);
}
.quality-grid input {
width: 100%;
margin: 0;
}
.quality-presets {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.quality-codec-row {
display: flex;
align-items: center;
margin-bottom: 3px;
}
.quality-codec-buttons {
display: flex;
gap: 6px;
}
.quality-codec-test {
margin-left: 6px;
padding: 2px 8px;
font-size: 11px;
width: auto;
flex: 0 0 auto;
}
.quality-preset-btn {
background: #2b2d31;
border: 1px solid #202225;
color: #fff;
}
.quality-preset-btn:hover {
background: #35373c;
}
.quality-preset-btn.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.quality-popover-quick {
width: 230px;
}
.quality-actions {
display: flex;
gap: 6px;
margin-bottom: 3px;
}
.quality-actions .btn-green {
width: auto;
flex: 1;
}
.quality-hint {
font-size: 0.7em;
color: var(--text-muted);
}
.quality-actions-secondary {
justify-content: flex-end;
margin-top: 2px;
}
.quality-actions-secondary .icon-btn {
width: 100%;
text-align: center;
}
.media-menu {
position: relative;
display: inline-flex;
}
.media-popover {
position: absolute;
left: 0;
bottom: calc(100% + 6px);
width: 300px;
background: #1f2124;
border: 1px solid #202225;
border-radius: 0px;
padding: 3px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
display: none;
z-index: 4000;
}
.media-popover.open {
display: block;
}
.media-title {
font-size: 0.8em;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.media-actions {
display: flex;
gap: 6px;
margin-top: 3px;
}
.media-actions .icon-btn {
width: 100%;
text-align: center;
}
.maximizer-popover {
position: fixed;
width: 300px;
background: #1f2124;
border: 1px solid #202225;
border-radius: 8px;
padding: 3px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
display: none;
z-index: 4000;
}
.maximizer-popover.open {
display: block;
}
.maximizer-title {
font-size: 0.8em;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
}
.maximizer-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
.maximizer-row label {
font-size: 0.75em;
color: var(--text-muted);
min-width: 44px;
}
.maximizer-slider {
-webkit-appearance: none;
appearance: none;
flex: 1;
height: 6px;
border-radius: 999px;
background: linear-gradient(
90deg,
#3b3f46 0%,
#3ba55c 40%,
#f5c451 70%,
#ed4245 100%
);
margin: 0;
outline: none;
}
.maximizer-slider::-webkit-slider-runnable-track {
height: 6px;
border-radius: 999px;
background: linear-gradient(
90deg,
#3b3f46 0%,
#3ba55c 40%,
#f5c451 70%,
#ed4245 100%
);
}
.maximizer-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #e3e5e8;
border: 1px solid #202225;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
margin-top: -3px;
}
.maximizer-slider::-moz-range-track {
height: 6px;
border-radius: 999px;
background: linear-gradient(
90deg,
#3b3f46 0%,
#3ba55c 40%,
#f5c451 70%,
#ed4245 100%
);
}
.maximizer-slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #e3e5e8;
border: 1px solid #202225;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.maximizer-value {
font-size: 0.75em;
color: var(--text-muted);
min-width: 52px;
text-align: right;
}
.maximizer-actions {
display: flex;
gap: 6px;
}
.maximizer-actions .btn-green {
width: auto;
flex: 1;
}
/* MEMBERS LIST (Req 1) */
.members-header {
padding: 8px 4px 4px 8px;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
#members-list {
overflow-y: auto;
flex: 1;
padding: 0 3px;
}
#status-bar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
padding: 6px 8px;
border-top: 1px solid #202225;
background: #14202d;
font-size: 0.75em;
color: var(--text-muted);
}
#voice-timer {
font-size: 0.75em;
color: #3ba55c;
margin-top: 3px;
}
.status-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 100%;
}
.status-metric {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.status-up {
color: #3ba55c;
}
.status-down {
color: #ed4245;
}
.member-card {
display: flex;
align-items: center;
padding: 3px;
border-radius: 4px;
gap: 0px;
opacity: 0.5;
} /* Offline by default */
.member-card.online {
opacity: 1;
}
.member-card:hover {
background: #35373c;
}
.member-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-size: cover;
position: relative;
border: 1px solid #4f545c;
box-sizing: border-box;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
bottom: -2px;
right: -2px;
border: 2px solid var(--bg-members);
}
.member-info {
display: flex;
flex-direction: column;
}
.member-status {
font-size: 0.6em;
color: var(--text-muted);
max-height: 40px;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
/* VIDEO GRID */
.video-wrapper {
position: absolute;
width: 300px;
height: auto;
aspect-ratio: 16 / 9;
background: #202225;
border-radius: 0px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
cursor: grab;
z-index: 2000;
resize: none;
min-width: 426px;
min-height: 240px;
max-width: 90vw;
max-height: 90vh;
touch-action: none;
}
.video-wrapper.video-hidden {
display: none !important;
}
.video-wrapper:active {
cursor: grabbing;
}
.video-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
background: linear-gradient(90deg, rgba(21, 22, 24, 0.95), rgba(32, 34, 37, 0.95));
border-bottom: 1px solid rgba(79, 84, 92, 0.45);
user-select: none;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.video-wrapper:hover .video-titlebar,
.video-wrapper:focus-within .video-titlebar,
.video-wrapper:active .video-titlebar {
  opacity: 1;
  pointer-events: auto;
}
.video-hide-button {
  margin-left: auto;
  background: #d83b3b;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.video-hide-button:hover,
.video-hide-button:focus-visible {
  background: #e24a4a;
  outline: none;
}
.video-hide-button:active {
  background: #c23434;
  transform: translateY(1px);
}
.video-wrapper .resize-handle {
position: absolute;
background: transparent;
z-index: 5;
touch-action: none;
}
.video-wrapper .resize-handle.e,
.video-wrapper .resize-handle.w {
top: 6px;
bottom: 6px;
width: 10px;
display: block;
}
.video-wrapper .resize-handle.e {
right: -4px;
cursor: ew-resize;
}
.video-wrapper .resize-handle.w {
left: -4px;
cursor: ew-resize;
}
.video-wrapper .resize-handle.n,
.video-wrapper .resize-handle.s {
left: 6px;
right: 6px;
height: 10px;
display: block;
}
.video-wrapper .resize-handle.n {
top: -4px;
cursor: ns-resize;
}
.video-wrapper .resize-handle.s {
bottom: -4px;
cursor: ns-resize;
}
.video-wrapper .resize-handle.ne,
.video-wrapper .resize-handle.nw,
.video-wrapper .resize-handle.se,
.video-wrapper .resize-handle.sw {
width: 12px;
height: 12px;
}
.video-wrapper .resize-handle.ne {
top: -4px;
right: -4px;
cursor: nesw-resize;
}
.video-wrapper .resize-handle.nw {
top: -4px;
left: -4px;
cursor: nwse-resize;
}
.video-wrapper .resize-handle.se {
bottom: -4px;
right: -4px;
cursor: nwse-resize;
}
.video-wrapper .resize-handle.sw {
bottom: -4px;
left: -4px;
cursor: nesw-resize;
}
.floating-video-layer {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1500;
}
.floating-video-layer .video-wrapper {
pointer-events: auto;
}
.dm-panel {
position: fixed;
right: 3px;
bottom: 3px;
width: 280px;
height: 240px;
min-width: 300px;
min-height: 160px;
max-width: 90vw;
max-height: 90vh;
background: var(--bg-panel);
border: 1px solid #202225;
border-radius: 2px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
display: none;
flex-direction: column;
z-index: 2500;
resize: both;
overflow: hidden;
}
.dm-panel.open {
display: flex;
}
.dm-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #202225;
padding: 3px;
cursor: grab;
touch-action: none;
height: 32px;
}
.channel-panel {
position: fixed;
right: 290px; /* next to dm-panel */
bottom: 3px;
width: 280px;
height: 240px;
min-width: 300px;
min-height: 160px;
max-width: 90vw;
max-height: 90vh;
background: var(--bg-panel);
border: 1px solid #202225;
border-radius: 2px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
display: none;
flex-direction: column;
z-index: 2400;
resize: both;
overflow: hidden;
}
.channel-panel.open {
display: flex;
}
.channel-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #202225;
padding: 3px;
cursor: grab;
touch-action: none;
}
.channel-panel-header:active {
cursor: grabbing;
}
#dm-panel.open {
min-width: 300px;
}
.channel-panel-title {
display: flex;
align-items: center;
gap: 3px;
min-width: 0;
}
.channel-panel-name {
font-weight: 600;
font-size: 0.8em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.channel-messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 3px;
}
.channel-panel-input {
padding: 3px;
border-top: 1px solid #202225;
background: #1f2124;
display: flex;
gap: 4px;
}
.channel-panel-input input {
flex: 1;
margin: 0;
width: auto;
}
.dm-panel-header:active {
cursor: grabbing;
}
.dm-panel-title {
display: flex;
align-items: center;
gap: 3px;
min-width: 0;
}
.dm-panel-avatar {
width: 25px;
height: 25px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-color: #1f2124;
border: 1px solid #202225;
flex: 0 0 25px;
}
.dm-panel-name {
font-weight: 600;
font-size: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dm-messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 3px;
}
.dm-panel-input {
padding: 3px;
border-top: 1px solid #202225;
background: #1f2124;
display: flex;
gap: 4px;
}
.dm-panel-input input {
flex: 1;
margin: 0;
width: auto;
}
.btn-send-small {
background: var(--accent);
color: white;
border: none;
border-radius: 4px;
padding: 0 10px;
cursor: pointer;
font-size: 1.1em;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.1s;
}
.btn-send-small:hover {
background: #4752c4;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-wrapper video {
display: block;
}
.video-label {
position: absolute;
bottom: 5px;
left: 5px;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 2px 3px;
border-radius: 4px;
font-size: 0.8em;
}
.link-notice {
background: #1f2124;
border: 1px solid #2a2d31;
border-radius: 6px;
padding: 6px;
text-align: left;
}
.link-notice-text {
font-size: 0.85em;
color: #e3e5e8;
margin-bottom: 4px;
}
.link-notice-actions {
display: flex;
gap: 6px;
margin-bottom: 4px;
}
.link-notice-actions .btn-green {
width: auto;
flex: 1;
}
.link-notice-actions .icon-btn {
width: auto;
flex: 1;
}
.link-notice-hint {
font-size: 0.7em;
color: var(--text-muted);
}
@media (max-width: 480px) {
#login-overlay .login-box {
width: 100%;
max-width: 320px;
}
.modal {
padding: 3px;
}
.modal-content,
.login-box {
width: 100%;
max-width: 320px;
}
}
.channel-password-prompt {
margin: 4px 6px 6px 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.channel-password-prompt input {
width: 180px;
margin: 0;
padding: 6px 8px;
font-size: 0.9rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: #202225;
}
.channel-password-actions {
display: flex;
gap: 6px;
}
.channel-password-actions button {
margin: 0;
padding: 5px 10px;
font-size: 0.8rem;
border-radius: 6px;
}
@media (max-width: 480px) {
.quality-popover,
.media-popover {
position: fixed;
left: 10px;
right: 10px;
bottom: 72px;
width: auto;
z-index: 4000;
}
.quality-popover-quick {
width: auto;
}
}
/* Channels */
.channel-item {
margin-bottom: 1px;
border-bottom: #2a2d31;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.channel-item-draggable {
cursor: grab;
}
.channel-item.dragging {
opacity: 0.6;
}
.channel-item.drag-over .channel-row {
background: #2f3136;
}
.channel-row {
padding: 3px;
cursor: pointer;
border-radius: 4px;
color: #8e9297;
display: flex;
align-items: center;
font-weight: 500;
}
.channel-row.active-text {
background: #40444b;
color: #fff;
}
.channel-row:hover {
background: #35373c;
color: #dcddde;
}
.channel-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.channel-icon-live {
color: #3ba55c;
}
.channel-name {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex: 1;
}
.channel-name.active-voice {
color: #3ba55c;
}
.text-chat-btn {
cursor: pointer;
font-size: 1.1em;
opacity: 0.55;
padding: 2px 3px;
border-radius: 4px;
}
.text-chat-btn:hover {
opacity: 1;
background: #40444b;
}
.text-chat-btn.active-text {
opacity: 1;
color: #fff;
}
.voice-leave-btn {
cursor: pointer;
font-size: 1.1em;
opacity: 0.7;
padding: 2px 3px;
border-radius: 4px;
}
.voice-leave-btn:hover {
opacity: 1;
background: #40444b;
}
.channel-row.active-voice {
background: #3c4046;
color: #fff;
}
.channel-row.active-voice .channel-icon {
color: #3ba55c;
}
/* Voice User List (Indented under channel) */
.voice-user-list {
padding-left: 0;
margin-left: 1px;
margin-bottom: 3px;
}
.voice-user {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 3px;
padding: 2px;
}
.voice-user-draggable {
cursor: grab;
}
.voice-user.dragging {
opacity: 0.6;
}
.voice-user-row {
display: flex;
align-items: center;
gap: 8px;
}
.voice-user-icons {
margin-left: auto;
display: inline-flex;
gap: 4px;
opacity: 0.85;
}
.voice-user-icon {
font-size: 0.9em;
}
.voice-quality {
width: 8px;
height: 8px;
border-radius: 50%;
background: #6b7280;
margin-left: 3px;
flex: 0 0 auto;
}
.voice-quality.quality-good {
background: #3ba55c;
}
.voice-quality.quality-ok {
background: #f5c451;
}
.voice-quality.quality-warn {
background: #f28c2c;
}
.voice-quality.quality-bad {
background: #ed4245;
}
.voice-meter {
height: 2px;
background: #1a1b1e;
border-radius: 2px;
overflow: hidden;
margin-left: 3px;
}
.voice-meter-fill {
height: 100%;
width: 0;
background: #3ba55c;
transition: width 0.05s linear;
}
.voice-meter-fill.silent {
width: 0;
}
.voice-user-volume {
display: flex;
align-items: center;
gap: 6px;
width: calc(100% - 32px);
margin-left: 3px;
padding: 0 3px;
box-sizing: border-box;
overflow: visible;
}
.voice-user-volume input[type="range"] {
width: 100%;
margin: 0;
box-sizing: border-box;
min-width: 0;
}
.voice-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background-size: cover;
background-color: #333;
}
.speaking {
box-shadow: 0 0 0 2px #3ba55c;
}
.voice-name {
font-size: 0.9em;
color: #dcddde;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hide-voice-names .voice-name {
display: none;
}
.channel-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
background-size: cover;
background-color: #333;
flex: 0 0 auto;
}
/* Thread Styles */
.thread-item {
margin-left: 15px;
}
.thread-row {
display: flex;
align-items: center;
padding: 4px 8px;
border-radius: 4px;
color: #8e9297;
font-weight: 500;
cursor: pointer;
gap: 8px;
}
.thread-row:hover {
background: #35373c;
color: #dcddde;
}
.thread-row.active {
background: #40444b;
color: #fff;
}
.thread-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.thread-name {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex: 1;
}
/* Context Menus */
.context-menu {
position: fixed;
background: #1f2124;
border: 1px solid #202225;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
padding: 4px;
display: none;
z-index: 3000;
min-width: 180px;
font-family: "Segoe UI", sans-serif;
font-size: 14px;
}
.channel-context-layer {
position: fixed;
z-index: 3500;
display: none;
pointer-events: auto;
}
.channel-context-layer.context-menu {
background: #1f2124;
border: 1px solid #202225;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
padding: 4px;
min-width: 180px;
color: #b9bbbe;
font-family: "Segoe UI", sans-serif;
font-size: 14px;
}
.channel-context-layer .channel-ctx-menu {
background: transparent;
padding: 0;
min-width: 0;
}
.channel-context-layer .channel-ctx-item {
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
color: #b9bbbe;
display: flex;
align-items: center;
justify-content: space-between;
margin: 2px 0;
}
.channel-context-layer .channel-ctx-item:hover {
background: #35373c;
color: #ffffff;
}
.channel-context-layer .channel-ctx-colorDanger {
color: #d83c3e;
}
.channel-context-layer .channel-ctx-colorDanger:hover {
background: #d83c3e;
color: #ffffff;
}
.channel-context-layer .channel-ctx-colorBrand {
color: #5865f2;
}
.channel-context-layer .channel-ctx-disabled,
.channel-context-layer .channel-ctx-disabled:hover,
.channel-context-layer [aria-disabled="true"] {
color: #4f545c;
cursor: not-allowed;
background: transparent;
}
.channel-context-layer .channel-ctx-separator {
height: 1px;
background-color: rgba(255, 255, 255, 0.06);
margin: 4px 8px;
}
.channel-context-layer .channel-ctx-iconContainer {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
}
.channel-context-layer .channel-ctx-menu {
background: #1f2124;
border: 1px solid #202225;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
padding: 4px;
min-width: 188px;
color: #b9bbbe;
font-family: "Segoe UI", sans-serif;
font-size: 14px;
}
.channel-context-layer .channel-ctx-scroller {
max-height: 420px;
overflow-y: auto;
}
.channel-context-layer .channel-ctx-item {
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
color: inherit;
display: flex;
align-items: center;
justify-content: space-between;
margin: 2px 0;
}
.channel-context-layer .channel-ctx-item:hover {
background: #35373c;
color: #ffffff;
}
.channel-context-layer .channel-ctx-separator {
height: 1px;
background-color: rgba(255, 255, 255, 0.06);
margin: 4px 8px;
}
.channel-context-layer .channel-ctx-iconContainer {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.channel-context-layer .channel-ctx-colorBrand {
color: #5865f2;
}
.channel-context-layer .channel-ctx-colorDanger {
color: #d83c3e;
}
.channel-context-layer .channel-ctx-colorDanger:hover {
background-color: #d83c3e;
color: #ffffff;
}
.channel-context-layer .channel-ctx-disabled {
color: #4f545c;
cursor: not-allowed;
}
.channel-context-layer .channel-ctx-disabled:hover {
background-color: transparent;
}
.channel-context-layer .menu-checkbox {
width: 18px;
height: 18px;
background-color: transparent;
border: 2px solid #72767d;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.channel-context-layer [role="menuitemcheckbox"] .menu-checkbox svg {
display: none;
color: #ffffff;
}
.channel-context-layer [role="menuitemcheckbox"][aria-checked="true"] .menu-checkbox {
background-color: #3ba55c;
border-color: #3ba55c;
}
.channel-context-layer [role="menuitemcheckbox"]:hover .menu-checkbox {
border-color: #b9bbbe;
}
.channel-context-layer [role="menuitemcheckbox"][aria-checked="true"] .menu-checkbox svg {
display: block;
}
.context-menu.open {
display: block;
}
.menu-item.danger:hover {
background: #da373c;
color: #ffffff;
}
.menu-item.disabled:hover {
background-color: transparent;
}
.menu-label {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.menu-hint {
font-size: 0.8em;
color: #72767d;
}
.menu-subtext {
font-size: 0.75em;
color: #8e9297;
}
.menu-divider {
height: 1px;
background: #2c2f33;
margin: 4px;
}
.menu-caret {
opacity: 0.7;
}
.menu-item.color-danger {
color: #d83c3e;
}
.menu-checkbox svg {
display: none;
color: #ffffff;
}
.menu-checkbox.checked svg {
display: block;
}
.menu {
position: fixed;
z-index: 10000;
background-color: #18191c;
border-radius: 4px;
box-shadow: 0 8px 16px rgba(0,0,0,0.24);
font-family: 'gg sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 6px;
min-width: 188px;
}
.menu-group {
padding: 2px 0;
}
.menu-separator {
height: 1px;
background-color: #2f3136;
margin: 4px;
}
.menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 3px;
border-radius: 2px;
font-size: 14px;
color: #dcddde;
cursor: pointer;
}
.menu-item:hover {
background-color: #4f545c;
color: #fff;
}
.menu-item.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.menu-item.color-danger:hover {
background-color: #ed4245;
color: #fff;
}
.menu-item .menu-label {
flex-grow: 1;
}
.menu-item .menu-subtext {
font-size: 12px;
color: #72767d;
}
.menu-item .menu-icon-container {
width: 18px;
height: 18px;
margin-left: 8px;
}
.menu-item .menu-checkbox {
width: 18px;
height: 18px;
background-color: transparent;
border: 2px solid #72767d;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-item .menu-checkbox.checked svg {
display: block;
}
.menu-item .menu-checkbox svg {
display: none;
color: #fff;
}
.menu-item.toggleable:hover .menu-checkbox:not(.checked) {
border-color: #b9bbbe;
}
.menu-item.toggleable.checked .menu-checkbox {
background-color: #3ba55c;
border-color: #3ba55c;
}
.menu-item-slider {
padding-bottom: 10px;
}
.menu-slider-wrap {
position: relative;
padding-top: 12px;
}
.menu-slider-value {
position: absolute;
top: 0;
transform: translateX(-50%);
font-size: 0.75rem;
color: #b9bbbe;
}
.menu-slider {
-webkit-appearance: none;
appearance: none;
width: calc(100% - 16px);
height: 2px;
background: #434850;
outline: none;
opacity: 0.7;
transition: opacity .2s;
margin: 10px 8px 0 8px;
}
.menu-slider:hover {
opacity: 1;
}
.menu-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 20px;
background: #dcddde;
cursor: pointer;
border-radius: 3px;
}
.menu-slider::-moz-range-thumb {
width: 10px;
height: 20px;
background: #dcddde;
cursor: pointer;
border-radius: 3px;
}
.menu-item-submenu {
position: relative;
}
.menu-item-submenu .menu-caret {
margin-left: 8px;
}
.menu-submenu {
display: none;
position: absolute;
top: -6px;
left: 100%;
z-index: 1;
background-color: #18191c;
border-radius: 4px;
box-shadow: 0 8px 16px rgba(0,0,0,0.24);
padding: 6px;
min-width: 188px;
}
.menu-item-submenu:hover > .menu-submenu {
display: block;
}
.member-profile-popout {
width: 320px;
padding: 0;
overflow: hidden;
}
.member-profile-header {
height: 60px;
background: #36393f;
}
.member-profile-body {
padding: 10px;
}
.member-profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid #1f2124;
background-size: cover;
position: absolute;
top: 20px;
left: 12px;
}
.member-profile-name {
margin-top: 48px;
font-weight: 700;
font-size: 18px;
color: #fff;
}
.member-profile-status {
color: #b9bbbe;
font-size: 13px;
margin-top: 4px;
min-height: 18px;
}
.member-profile-divider {
height: 1px;
background: #2c2f33;
margin: 12px 0;
}
.member-profile-info-title {
font-size: 11px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
margin-bottom: 8px;
}
.member-profile-info-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 13px;
}
.member-profile-info-icon {
width: 16px;
height: 16px;
color: #b9bbbe;
}
/* Typing indicator */
.typing-indicator {
padding: 0 8px 4px 8px;
font-size: 0.85em;
color: var(--text-muted);
min-height: 1.2em;
}
.dm-typing-indicator {
padding: 0 8px 4px 8px;
font-size: 0.85em;
color: var(--text-muted);
min-height: 1.2em;
}
.typing-indicator-item {
display: flex;
align-items: center;
gap: 8px;
}
.dm-indicator {
font-size: 0.85em;
}
.btn-toggle-on {
background-color: #43b581 !important;
color: white !important;
border-color: #3ca374 !important;
}
.btn-toggle-off {
background-color: #f04747 !important;
color: white !important;
border-color: #d84040 !important;
}
.version-badge {
right: 0px;
bottom: 40px;
font-size: 0.65em;
color: #8e9297;
background: rgba(0, 0, 0, 0.35);
padding: 2px 3px;
border-radius: 6px;
z-index: 1;
pointer-events: none;
}
.version-update {
right: 6px;
bottom: 28px;
font-size: 0.9em;
background: #2b2d31;
color: #fff;
border: 1px solid #202225;
border-radius: 999px;
padding: 2px 3px;
z-index: 11;
display: none;
cursor: pointer;
}
.version-update:hover {
background: #35373c;
}
.mention-autocomplete {
position: absolute;
bottom: calc(100% + 4px);
left: 0;
width: 300px;
max-height: 220px;
background: #1f2124;
border: 1px solid #202225;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
padding: 4px;
overflow-y: auto;
z-index: 2000;
}
.mention-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
}
.mention-item:hover, .mention-item.selected {
background: #35373c;
}
.mention-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background-size: cover;
}
.mention-name {
color: #fff;
font-weight: 500;
}
.mention-subtext {
color: #b9bbbe;
font-size: 0.8em;
}
/* Mic Test Popover */
.mic-test-popover {
position: fixed;
width: 220px;
background: #1f2124;
border: 1px solid #202225;
border-radius: 8px;
padding: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
display: none;
z-index: 4000;
flex-direction: column;
gap: 8px;
}
.mic-test-popover.open {
display: flex;
}
.mic-test-title {
font-size: 0.9em;
font-weight: 700;
color: #fff;
text-align: center;
}
.mic-test-meter-container {
background: #333;
height: 12px;
border-radius: 6px;
overflow: hidden;
}
#mic-test-popover .mic-test-meter-row.voice-meter {
height: 8px;
margin-top: 6px;
margin-bottom: 6px;
}
#mic-test-popover .mic-test-meter-row.voice-meter .voice-meter-fill {
height: 100%;
}
#mic-test-meter-fill {
width: 0%;
height: 100%;
transition:
width 0.1s ease,
background-color 0.2s ease;
}
.mic-test-hint {
font-weight: bold;
text-align: center;
font-size: 0.9em;
}
.mic-test-actions {
display: flex;
}
.mic-test-actions .icon-btn {
width: 100%;
text-align: center;
}
/* Status colors for mic test */
#mic-test-meter-fill.low {
background-color: #747f8d;
}
#mic-test-meter-fill.good {
background-color: #43b581;
}
#mic-test-meter-fill.warn {
background-color: #faa61a;
}
#mic-test-meter-fill.bad {
background-color: #f04747;
}
.mic-test-hint.low {
color: #747f8d;
}
.mic-test-hint.good {
color: #43b581;
}
.mic-test-hint.warn {
color: #faa61a;
}
.mic-test-hint.bad {
color: #f04747;
}
#screen-consent-preview {
max-width: 80vw;
max-height: 70vh;
object-fit: contain;
}
/* Custom Input Modal */
.custom-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 5000;
display: flex;
justify-content: center;
align-items: center;
}
.custom-modal {
background: #2f3136;
padding: 10px;
border-radius: 8px;
width: 400px;
max-width: 90%;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
display: flex;
flex-direction: column;
gap: 15px;
}
.custom-modal-title {
font-size: 1.2em;
font-weight: 600;
color: #ffffff;
}
.custom-modal-input {
background: #202225;
border: 1px solid #1a1b1e;
color: #dcddde;
padding: 10px;
border-radius: 4px;
font-size: 1em;
width: 100%;
box-sizing: border-box;
}
.custom-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.custom-modal-btn {
border: none;
border-radius: 4px;
padding: 10px 10px;
font-size: 0.9em;
font-weight: 500;
cursor: pointer;
}
.custom-modal-btn.ok {
background-color: #4752c4;
color: #ffffff;
}
.custom-modal-btn.ok:hover {
background-color: #5865f2;
}
.custom-modal-btn.cancel {
background-color: transparent;
color: #dcddde;
}
.custom-modal-btn.cancel:hover {
text-decoration: underline;
}
/* Server Settings Modal */
.server-settings-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: 6000;
display: flex;
justify-content: center;
align-items: center;
}
.server-settings-modal {
background: #2f3136;
width: 900px;
max-width: 92vw;
max-height: 85vh;
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.server-settings-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px;
border-bottom: 1px solid #202225;
}
.server-settings-title {
font-size: 1.1em;
font-weight: 600;
color: #fff;
}
.server-settings-close {
background: transparent;
border: none;
color: #b9bbbe;
cursor: pointer;
font-size: 0.95em;
}
.server-settings-body {
display: flex;
flex: 1;
min-height: 0;
}
.server-settings-sidebar {
width: 200px;
background: #202225;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
}
.server-settings-nav {
border: none;
background: transparent;
color: #b9bbbe;
padding: 10px 10px;
border-radius: 6px;
cursor: pointer;
text-align: left;
font-weight: 600;
}
.server-settings-nav.active,
.server-settings-nav:hover {
background: #2f3136;
color: #fff;
}
.server-settings-content {
flex: 1;
padding: 10px 10px 10px;
overflow-y: auto;
color: #dcddde;
}
.server-settings-section {
margin-bottom: 20px;
}
.server-settings-section-title {
font-weight: 700;
margin-bottom: 8px;
}
.server-settings-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.server-settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.server-settings-metric {
font-size: 1.4em;
font-weight: 700;
color: #fff;
}
.server-settings-subtext {
font-size: 0.85em;
color: #b9bbbe;
}
.server-settings-actions {
margin-top: 12px;
}
.server-settings-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.server-settings-list-item {
display: flex;
background: #202225;
padding: 8px 10px;
border-radius: 6px;
}
.server-settings-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #36393f;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: #f0f0f0;
font-weight: 700;
font-size: 0.85em;
flex-shrink: 0;
}
.server-settings-avatar.has-avatar span {
display: none;
}
.server-settings-session-item {
gap: 10px;
align-items: flex-start;
}
.server-settings-session-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.server-settings-user-status {
align-self: center;
font-size: 0.75em;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
background: #2b2d31;
color: #b9bbbe;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.server-settings-user-status.is-online {
background: rgba(67, 181, 129, 0.15);
color: #43b581;
}
.server-settings-user-status.is-offline {
background: rgba(79, 84, 92, 0.35);
color: #b9bbbe;
}
.server-settings-session-name {
font-weight: 600;
color: #fff;
}
.server-settings-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.server-settings-badge {
padding: 2px 8px;
border-radius: 999px;
background: var(--badge-color, #2b2d31);
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 0.75em;
color: #fff;
}
.server-settings-badge.is-admin {
background: #f04747;
}
.server-settings-badge.is-bot {
background: #43b581;
}
.server-settings-log {
display: flex;
flex-direction: column;
gap: 10px;
}
.server-settings-log-row {
background: #202225;
padding: 10px;
border-radius: 6px;
}
.server-settings-log-message {
display: flex;
align-items: flex-start;
gap: 10px;
}
.server-settings-log-body {
flex: 1;
min-width: 0;
}
.server-settings-log-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.server-settings-log-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
.server-settings-messages-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.server-settings-message-nav {
display: flex;
gap: 8px;
}
.server-settings-log-meta {
font-size: 0.8em;
color: #b9bbbe;
margin-bottom: 6px;
}
.server-settings-role-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.server-settings-role-card {
background: #202225;
border: 1px solid #1a1b1e;
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
.emoji-settings-upload {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 10px;
}
.emoji-upload-file {
min-width: 200px;
}
.emoji-settings-meta {
margin-top: 8px;
color: #b9bbbe;
font-size: 0.85em;
}
.emoji-settings-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
margin-top: 12px;
}
.emoji-card {
background: #202225;
border: 1px solid #1a1b1e;
border-radius: 8px;
padding: 10px;
display: grid;
grid-template-columns: 40px 1fr;
gap: 10px;
align-items: center;
}
.emoji-card-image {
width: 36px;
height: 36px;
border-radius: 6px;
object-fit: contain;
background: #2b2d31;
}
.emoji-card-actions {
grid-column: 2 / -1;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.role-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.role-card-title {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.role-color-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #99aab5;
flex-shrink: 0;
}
.role-card-actions {
display: flex;
align-items: center;
gap: 8px;
}
.role-color-swatch {
width: 36px;
height: 28px;
border: 1px solid #1a1b1e;
border-radius: 6px;
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.role-color-popout {
position: fixed;
z-index: 9000;
display: none;
}
.role-color-dialog {
background: #2f3136;
border: 1px solid #202225;
border-radius: 8px;
padding: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
width: 220px;
}
.role-color-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.role-color-saturation {
position: relative;
height: 140px;
border-radius: 6px;
overflow: hidden;
}
.role-color-sat-layer {
position: absolute;
inset: 0;
background: #ff0000;
}
.role-color-sat-white {
position: absolute;
inset: 0;
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.role-color-sat-black {
position: absolute;
inset: 0;
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.role-color-sat-pointer {
position: absolute;
width: 0;
height: 0;
}
.role-color-pointer-dot {
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 2px rgba(0, 0, 0, 0.5);
transform: translate(-3px, -3px);
}
.role-color-hue {
position: relative;
height: 12px;
border-radius: 999px;
overflow: hidden;
}
.role-color-hue-track {
position: absolute;
inset: 0;
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.role-color-hue-pointer {
position: absolute;
top: 0;
height: 100%;
width: 0;
}
.role-color-hue-thumb {
width: 4px;
height: 10px;
border-radius: 2px;
background: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
transform: translate(-2px, 1px);
}
.role-color-input-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
background: #202225;
border: 1px solid #1a1b1e;
border-radius: 6px;
padding: 6px 8px;
}
.role-color-prefix {
color: #b9bbbe;
font-size: 0.9em;
}
.role-color-hex-input {
background: transparent;
border: none;
color: #dcddde;
font-size: 0.95em;
outline: none;
width: 70px;
text-transform: lowercase;
}
.server-settings-role-card.is-dragging {
opacity: 0.6;
border-color: #4752c4;
}
.server-settings-role-card.is-drag-over {
border-color: #5865f2;
box-shadow: 0 0 0 1px #5865f2;
}
.role-card-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.role-inline {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.role-permissions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  }
.role-permission-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  }
.role-permission {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
color: #dcddde;
}
.role-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
color: #b9bbbe;
font-size: 0.9em;
}
.server-settings-log-body {
font-size: 0.9em;
color: #dcddde;
word-break: break-word;
}
.server-settings-channel-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.server-settings-channel-card {
display: flex;
flex-direction: column;
gap: 12px;
background: #202225;
padding: 12px;
border-radius: 10px;
border: 1px solid #2a2c30;
}
.server-settings-channel-card.is-collapsed .server-settings-channel-fields {
display: none;
}
.server-settings-channel-card.is-dirty {
border-color: #3ba55d;
box-shadow: 0 0 0 1px rgba(59, 165, 93, 0.35);
}
.server-settings-channel-card.is-focus {
border-color: #5865f2;
box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.35);
}
.server-settings-channel-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.server-settings-channel-title {
font-weight: 600;
color: #e3e5e8;
}
.server-settings-channel-name {
margin-right: 6px;
}
.server-settings-channel-id {
font-size: 0.85em;
color: #b9bbbe;
}
.server-settings-channel-actions {
display: flex;
gap: 8px;
}
.server-settings-channel-actions .btn-green[disabled] {
opacity: 0.55;
cursor: not-allowed;
}
.server-settings-channel-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.server-settings-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.85em;
color: #b9bbbe;
}
.server-settings-field-inline {
flex-direction: row;
align-items: center;
}
.server-settings-input {
background: #111214;
border: 1px solid #2f3136;
border-radius: 6px;
color: #e3e5e8;
padding: 6px 8px;
font-size: 0.95em;
outline: none;
}
.server-settings-input:focus {
border-color: #3ba55d;
box-shadow: 0 0 0 2px rgba(59, 165, 93, 0.25);
}
.server-settings-audio-options {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.server-settings-audio-option {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9em;
color: #dcddde;
}
.quality-presets {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.quality-preset-btn {
padding: 6px 10px;
font-size: 0.85em;
}
.quality-preset-btn.active {
background: #3ba55d;
color: #fff;
}
.server-settings-form {
display: grid;
gap: 8px;
}
.server-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.server-settings-label {
font-size: 0.85em;
color: #b9bbbe;
flex: 1 1 220px;
}
.server-settings-control {
display: flex;
align-items: center;
}
.btn-grey,
.btn-red {
border: none;
border-radius: 4px;
padding: 6px 10px;
font-weight: 600;
cursor: pointer;
color: #fff;
}
.btn-grey {
background: #4f545c;
}
.btn-grey:hover {
background: #5d6269;
}
.icon-btn-large {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.icon-btn-large svg {
width: 22px;
height: 22px;
}
.btn-red {
background: #f04747;
}
.btn-red:hover {
background: #ff5c5c;
}
/* Temporary popup for notices */
#temp-popup-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
pointer-events: none;
}
.temp-popup-notice {
background-color: #f04747;
color: #fff;
padding: 10px 10px;
border-radius: 8px;
font-size: 1em;
font-weight: 600;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
pointer-events: auto;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
opacity: 1;
transform: translateY(0);
}
.temp-popup-notice.fading-out {
opacity: 0;
transform: translateY(-20px);
}
/* Date Divider */
.chat-date-divider {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 24px 16px 8px 16px;
height: 1px;
border-top: 1px solid var(--bg-dark);
pointer-events: none;
}
.chat-date-divider-content {
position: absolute;
border-radius: 8px;
color: var(--text-muted);
display: block;
font-size: 12px;
font-weight: 600;
line-height: 13px;
padding: 2px 8px;
background: var(--bg-chat);
pointer-events: auto;
}
#changelogBtn {
display: none;
}