html{height: calc(var(--vh) * 100);}
		*{margin:0;padding:0}
		h2 {
			display: inline;
		}

		body {
			overflow: hidden;
			font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			display: flex;
			flex-direction: column;
			background-color: #36393f;
			/* Closer to Discord's background color */
			height:calc((var(--vh) * 100))
		}

		#chatMessages {
			flex: 2;
			overflow-y: auto;
			background: #2f3136;
			color-scheme: dark;
		}

		#onlineUsersContainer {
			overflow-y: auto;
			background: #2a2c31;
			padding: 10px;
			width: 300px;
		}

		#onlineUsersContainer h3 {
			margin-top: 0;
			text-align: center;
			color: #fff;
			font-size: 16px;
		}

		/* Send chat area */
.sendChatDiv {
    position: relative;
    display: flex;
    margin: 8px;
    height: 38px;
    flex-shrink: 0;
}

/* Add left margin ONLY to the buttons to create a gap */
.sendChatDiv > button {
    margin-left: 5px;
}

		.sendChatDiv input[type="text"] {
			flex: 1;
			padding: 8px;
			font-size: 14px;
			border-radius: 4px;
			border: 1px solid #ccc;
		}

		/* Attachment preview styling */
		#attachmentPreview {
			display: none;
			margin-top: 8px;
			background: #2f3136;
			border: 1px solid #444;
			/* Give the container bottom padding to avoid overlap with the progress bar */
			padding: 6px 10px 20px 10px;
			border-radius: 4px;
			font-size: 14px;
			max-width: 300px;
			position: relative;
			/* So we can absolutely position the progress bar */
			color: #ccc;
		}

		#attachmentPreview span.remove-attachment {
			position: absolute;
			top: 5px;
			right: 8px;
			cursor: pointer;
			font-weight: bold;
			color: #ff4f4f;
		}

		#attachmentPreview span.remove-attachment:hover {
			text-decoration: underline;
		}

		#attachmentFileName {
			margin-right: 8px;
		}

		/* Progress bar */
		#uploadProgressBar {
			display: none;
			position: absolute;
			left: 10px;
			right: 10px;
			bottom: 6px;
			width: auto;
			/* We'll let left/right define the width */
		}

		/* Messages styled like Discord */
		.message-container {
			width: 100%;
			padding: 4px 8px;
			margin-bottom: 2px;
			position: relative;
			transition: background-color 0.2s;
		}

		.message-group {
			margin-bottom: 8px;
			position: relative;
			padding-left: 60px;
			/* to make space for the avatar */
		}
		.irc-view .message-group{
			margin:0px;
			padding-left:0px;
		}

		/* The user's avatar, shown once per group, aligned at the top */
		.message-group .message-avatar {
			position: absolute;
			left: 10px;
			top: 0;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			object-fit: cover;
			cursor: pointer;
		}

		/* The message-group header: username & timestamp only for the *first* line */
		.group-header {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		/* Each message line is individually hoverable */
		.message-line {
			position: relative;
			padding: 2px 8px;
			transition: background-color 0.15s;
		}

		/* Hover effect for each line */
		.message-line:hover {
			background-color: #32353b;
		}

		/* The text of each line */
		.message-text {
			white-space: pre-wrap;
			word-wrap: break-word;
			color: white;
		}

		/* For timestamps, smaller text, often greyed out */
		.timestamp {
			color: #72767d;
			font-weight: normal;
			font-size: 11px;
		}

		/* On-hover actions (reply, react, delete) pinned to the right for each line */
		.message-actions {
			position: absolute;
			right: 8px;
			top: 2px;
			display: none;
		}

		.message-line:hover .message-actions {
			display: flex;
			gap: 8px;
		}

		.message-action-btn {
			cursor: pointer;
			opacity: 0.6;
			transition: opacity 0.2s;
		}

		.message-action-btn:hover {
			opacity: 1;
		}

		.message-action-btn i {
			font-size: 14px;
			color: #b9bbbe;
		}

		.message-action-btn.delete-btn i {
			color: #ff5555;
		}

		.blocked-message-group {
			padding: 4px 8px;
		}

		/* Avatars */
		.message-avatar {
			margin-right: 10px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			object-fit: cover;
			cursor: pointer;
		}

		/* Content area */
		.message-content {
			background: none;
			/* no background by default */
			border: none;
			border-radius: 0;
			padding: 0;
			display: inline-block;
			color: #dcddde;
			/* typical Discord text color */
			font-size: 14px;
			max-width: 85%;
			/* limit text width */
		}

		.message-header {
			font-size: 12px;
			font-weight: bold;
			margin-bottom: 2px;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.message-header .timestamp {
			color: #72767d;
			font-weight: normal;
			font-size: 11px;
		}

		.message-text {
			white-space: pre-wrap;
			word-wrap: break-word;
		}

		/* On hover actions (reply, react, delete) */
		.message-actions {
			position: absolute;
			right: 8px;
			top: 2px;
			display: none;
		}

		.message-container:hover .message-actions {
			display: flex;
			gap: 8px;
		}

		.message-action-btn {
			cursor: pointer;
			opacity: 0.6;
			transition: opacity 0.2s;
		}

		.message-action-btn:hover {
			opacity: 1;
		}

		.message-action-btn i {
			font-size: 14px;
			color: #b9bbbe;
		}

		.message-action-btn.delete-btn i {
			color: #ff5555;
		}

		/* Attachment link/preview */
		.attachment-link {
			display: inline-block;
			word-wrap: break-word;
			margin-top: 4px;
		}

		/* Online user list */
		#onlineUsersList li {
			list-style-type: none;
			margin-bottom: 6px;
			color: #dcddde;
		}

		/* Main header */
		header {
			background-color: #202225;
			padding: 0px 20px 0px 20px;
			display: flex;
			justify-content: space-between;
			align-items: end;
			height:40px;
		}

		.header-left img {
			height: 24px;
		}

		.header-left h2 {
			color: white;
			margin-left: 10px;
			font-size: 18px;
		}

		.header-right a {
			color: white;
			text-decoration: none;
			font-size: 14px;
		}

		.header-right {
			padding-right:30px;
			height:100%;
			display:flex;
		}

		/* Profile menu area */
		.profile-container {
			position: absolute;
			top: 5px;
			right: 10px;
		}

		.profile-button {
			background: none;
			border: none;
			cursor: pointer;
			padding: 0;
			box-shadow:none;
			position:relative;
		}

		.profile-pic {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			object-fit: cover;
		}

		.profile-menu {
			position: absolute;
			right: 0;
			top: 45px;
			background: #2C2C2C;
			border: 1px solid #444;
			border-radius: 5px;
			min-width: 200px;
			z-index: 1000;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
		}

		.profile-menu-item {
			padding: 10px 15px;
			color: #FFF;
			cursor: pointer;
			border-bottom: 1px solid #444;
		}

		.profile-menu-item:last-child {
			border-bottom: none;
		}

		.profile-menu-item:hover {
			background-color: #1DB954;
		}

		.profile-info {
			display: flex;
			align-items: center;
		}

		.profile-pic-small {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			object-fit: cover;
			margin-right: 10px;
		}

		/* Modal overlay for settings */
		.modal-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;
		}

		.hidden {
			display: none !important;
		}

		.settings-modal {
			background-color: #2f2f2f;
			width: 400px;
			max-width:90%;
			height: 420px;
			max-height: min(420px, 90vh);
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			position: relative;
			overflow: hidden;
			box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
		}

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #2f2f2f;
			padding: 16px;
			border-bottom: 1px solid #444;
		}

		.modal-header h2 {
			margin: 0;
			color: #fff;
			font-size: 18px;
		}

		.close-button {
			background: none;
			border: none;
			color: #fff;
			font-size: 18px;
			cursor: pointer;
			box-shadow:none;
			padding:0;
		}

		.modal-body {
			display: flex;
			flex: 1;
		}

		.sidebar {
			width: 180px;
			background-color: #1f1f1f;
			border-right: 1px solid #3a3a3a;
			padding: 8px 0;
			display: flex;
			flex-direction: column;
		}

		.tab-button {
			background: none;
			border: none;
			text-align: left;
			color: #ccc;
			padding: 12px 16px;
			cursor: pointer;
			font-size: 14px;
			width: 100%;
			border-radius:0;
			box-shadow:none;
		}

		.tab-button i {
			margin-right: 8px;
		}

		.tab-button:hover {
			background-color: #333;
			color: #fff;
			transform:none;
		}

		.tab-button.active {
			background-color: #444;
			color: #fff;
			font-weight: bold;
			border-left: 4px solid #1fcc67;
			transform:none;
		}

		.tab-content {
			flex: 1;
			padding: 16px;
			color: #ccc;
		}

		.tab-content h3 {
			margin-top: 0;
			margin-bottom: 16px;
			color: #fff;
			font-size: 16px;
		}

		/* Profile popup modal */
		.profile-popup-modal {
			background: #36393f;
			padding: 20px;
			border-radius: 8px;
			border: 2px solid gray;
			text-align: center;
			position: absolute;
			max-width: 300px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
			transform: scale(0.8);
			transform-origin: center center;
			transition: transform 0.15s ease-out, opacity 0.15s ease-out;
			opacity: 0;
		}

		.profile-popup-modal.active {
			transform: scale(1);
			opacity: 1;
		}

		.popup-header {
			position: absolute;
			top: 5px;
			right: 10px;
		}

		/* Blocked info elements */
		.blocked-summary {
			position: relative;
			text-align: center;
			color: #ccc;
		}

		.blocked-summary hr {
			margin: 10px 0;
		}

		.blocked-info {
			background: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 0 8px;
			font-size: 12px;
			border: 1px solid #ccc;
			border-radius: 4px;
			color: #333;
		}

		.blocked-message {
			margin-left: 20px;
		}

		.username {
			color: white;
			cursor: pointer;
			font-weight:bold;
		}

		/* Reply preview container (above the text box) */
#replyPreviewContainer {
	background-color: #2f3136; /* Match input area background */
	/* Connect it to the elements below by sharing the border */
	border: 1px solid #ccc;
	border-bottom: none;
	/* Provide the new top corners for the combined input area */
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	/* Adjust layout */
	padding: 6px 12px;
	margin-top: 8px;
	align-items: center;
	gap: 8px;
	color: #b9bbbe; /* Set a base text color */
	font-size: 14px;
	margin:8px 141px 0px 8px;
}

		/* The small "arrow" shape can be done with a pseudo-element, but here's a basic placeholder. */


		#replyPreviewContainer img {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			object-fit: cover;
		}

		#replyPreviewContainer .reply-text-block {
			display: flex;
			flex-direction: column;
		}

		#replyPreviewContainer .reply-preview-username {
			font-weight: bold;
			color: #fff;
			margin-bottom: 2px;
		}

		#replyPreviewContainer .reply-preview-message {
			color: #b9bbbe;
			font-size: 14px;
			max-width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		#cancelReplyBtn {
			background: none;
			border: none;
			color: #72767d;
			cursor: pointer;
			font-size: 14px;
			padding:2px;
		}

		#cancelReplyBtn:hover {
			color: #fff;
		}

		.message-line.reply-source-highlight {
	transition: background-color 0.4s ease-out;
	background-color: rgba(88, 101, 242, 0.1);
	border-left: 4px solid #5865f2;
}

#replyPreviewContent {
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Ensure the username within the preview is bold */
#replyPreviewContent b {
	font-weight: bold;
	color: #fff; /* Make the username stand out slightly */
}

/* 4. When the body has the .reply-active class, flatten the top of the input area */
.reply-active .sendChatDiv #currentUserDisplay,
.reply-active .sendChatDiv #chatInput,
.reply-active .sendChatDiv #xssToggleContainer {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.reply-active .sendChatDiv{
	margin-top:0px;
}

		/* In the chat, each reply references an older message: */
		.reply-line .reply-avatar {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			object-fit: cover;
			margin-right: 4px;
			vertical-align: middle;
		}

		.reply-line .reply-jump {
			cursor: pointer;
			text-decoration: underline;
			margin: 0 4px;
			color: #9aa1b7;
		}

		.reply-line .reply-jump:hover {
			color: #fff;
		}

		/* Highlight the message we jump to */
		.message-line.highlighted {
			background-color: #4f545c !important;
			transition: background-color 0.6s;
		}

		.reply-snippet {
			font-size: 11pt;
			color: gray;
		}

		.reply-jump {
			font-size: 11pt;
		}

		/* Small-caps style headings for user status */
		.status-title {
			color: #72767d;
			font-size: 10px;
			text-transform: uppercase;
			margin: 18px 0 18px;
			/* top, right/left, bottom */
		}

		/* Each list item row for a user */
		.user-row {
			display: flex;
			align-items: center;
			margin-bottom: 8px;
		}

		/* Container for the avatar, 
   so we can position the status circle absolutely within it */
		.avatar-container {
			position: relative;
			width: 32px;
			height: 32px;
			margin-right: 8px;
		}

		/* The user’s avatar (or default if guest) */
		.user-avatar {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			object-fit: cover;
		}

		/* The small colored circle at the bottom-right of the avatar */
		.status-indicator {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 10px;
			height: 10px;
			border: 2px solid #2f3136;
			/* so it looks “cut out” of the background */
			border-radius: 50%;
		}

		/* The username text */
		.user-name {
			color: #dcddde;
			font-size: 14px;
			cursor: pointer;
			/* for your profile popup on click */
		}

		#popupUsername {
			color: white;
		}

		.reconnect-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			z-index: 999;
			/* on top of chat content */
		}

		/* The spinner */
		.loader {
			border: 8px solid #f3f3f3;
			/* Light grey */
			border-top: 8px solid #5865f2;
			/* Discord-like purple */
			border-radius: 50%;
			width: 60px;
			height: 60px;
			animation: spin 1s linear infinite;
			margin-bottom: 12px;
			/* gap before text */
		}

		/* Simple rotation animation */
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.reconnecting-text {
			color: #fff;
			font-size: 16px;
		}
		/* Typing indicator styles */
/* Typing indicator container */
.typing-indicator {
  font-size: 14px;
  color: #dcddde;
  margin: 0px 20px 7px;
  display: flex;
  gap: 5px;
  flex-shrink:0;
}

/* Animated dots */
.typing-indicator .typing-dots div span {
  display: inline-block;
  animation: blink 1.4s infinite both;
}
.typing-indicator .typing-dots div:nth-child(2) span {
  animation-delay: 0.2s;
}
.typing-indicator .typing-dots div:nth-child(3) span {
  animation-delay: 0.4s;
}
@keyframes blink {
  40% { background-color:#FFFFFF;width:10px;height:10px; }
  0%, 80%, 100% { background-color:#4b5058;width:8px;height:8px; }
}
.typing-dot {
border-radius:50%;
margin-right:4px;
}

.new-marker-container {
  display: flex;
  align-items: center;
  margin: 10px 20px;
}
.new-marker-container hr {
  flex-grow: 1;
  border: none;
  border-top: 1px solid red;
  margin: 0 10px;
}
.new-marker-container span {
  color: red;
  font-weight: bold;
  white-space: nowrap;
}
/* Mention suggestions dropdown */
/* Mention suggestions dropdown (always visible when @ is active) */
.mention-suggestions {
  position: absolute;
  bottom: 65px; /* adjust as needed above the text area */
  left: 80px;
  background: #2f3136;
  border: 1px solid #444;
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
  z-index: 1000;
  color:white;
  width:300px;
}
.mention-suggestion-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  cursor: pointer;
}
.mention-suggestion-item:hover {
  background-color: #4752c4;
}
.mention-suggestion-item img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}
/* In-text mention styling */
.mention {
color:#CFD8FE;
background-color:rgba(89, 105, 244, 0.25);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
transition: background-color 0.2s ease;
}

.mention:hover {
	background-color: #5865f2;
	color:white;
	text-decoration: underline;
}

.internal-message-link {
color:#CFD8FE !important;
font-weight: normal !important;
text-decoration: none;
background-color:rgba(89, 105, 244, 0.25);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
transition: background-color 0.2s ease;
}

.internal-message-link:hover {
	background-color: #5865f2;
	color:white;
}

.internal-link-placeholder {
    color: #8e9297; /* A neutral gray color */
    font-style: italic;
}

/* Highlight message group if current user is mentioned */
.mention-highlight {
  background-color: #4b4728;
  border-left: 4px solid #ffeb3b;
}
/* Updated styles for the chat input to connect seamlessly */
#chatInput {
	color: white;
	background-color: #2f3136;
	flex: 1;
	padding: 8px;
	font-size: 14px;
	border: 1px solid #ccc;
	min-height: 20px;

	/* --- Melding Styles --- */
	border-left: none; /* Remove left border to connect */
}

/* ===============================
   Image Modal Overlay & Image
   =============================== */
   .image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.image-modal-img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

/* ===============================
   Lazy Image Container & Loaded Image
   =============================== */
.lazy-image-container {
  background-color: #333;
  overflow: hidden;
  position: relative;
}

.lazy-loaded-image {
  display: block;
  max-width: 400px;
  max-height:400px;
  height: auto;
}

/* ===============================
   Mobile Online Users Overlay
   =============================== */

/* Hide elements with .mobile-hidden */
.mobile-hidden {
  display: none !important;
}

/* Style for the people icon toggle button */
.online-users-toggle-btn {
 display:none;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow:none;
  padding:4px 4px;
}

/* On mobile: hide online users container by default and animate overlay */
@media (max-width: 768px) {
  #onlineUsersContainer {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background-color: #2f3136;
    /* start off‐screen to the right */
    transform: translateX(100%);
    /* animate only transform */
    transition: transform 0.3s ease-out;
    will-change: transform;
    z-index: 9999;
  }
  /* when active, slide it in */
  #onlineUsersContainer.overlay-active {
    transform: translateX(0);
  }
    .online-users-toggle-btn {
    display: block;           /* override any .mobile-hidden */
    position: relative;       /* keep it in the header flow */
    z-index: 10000;           /* above everything else */
  }
}

.channel-btn {
    border: none;
    background-color: #344798;
    font-size: 14px;
    margin-left: -20px; /* overlap buttons */
    cursor: pointer;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 150px;
    height: 20px;
    color: white;
    position: relative; /* needed for z-index */
    z-index: 0; /* default z-index */
	border:1px solid black;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius:0px;
	box-shadow:none;
	padding:0;
	flex:0 0 auto;
}

/* Special first button (optional, not shifted) */
.channel-btn:first-child {
    margin-left: 0;
}

.channel-btn.active {
    color: black;
    background-color: white;
    z-index: 10; /* Bring active button to front */
}

.channel-btn.unread {
    background-color: #5e7ffc;
}
.date-divider {
  text-align: center;
  margin: 16px 0;
  color: #72767d;
  font-size: 12px;
}
.date-divider hr {
  border: 0;
  border-top: 1px solid #444;
  margin: 4px 0;
}
.date-divider .date-text {
  display: inline-block;
  padding: 0 8px;
}
.attachment-wrapper {
  width: 400px;
  background-color: #2a2c31;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  margin-top: 8px;
  box-sizing: border-box;
  font-family: sans-serif;
}

.attachment-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-right: 10px;
}

.attachment-filename {
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.attachment-size {
  font-size: 12px;
  color: #b0b0b0;
}

.attachment-link {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-link i {
  font-size: 24px;
}

/* bigger font for pure-emoji messages */
.message-text.emoji-large {
  font-size: 1.5em;
  line-height: 1.2;
}

.message-text a {
    color: #5865f2;
    font-weight: bold;
}

button {
  background-color: #5865f2;
  border: none;
  color: white;
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.15s ease;
  box-shadow: 0 4px 10px rgba(88, 101, 242, 0.4);
  touch-action: manipulation;
}

button:hover {
  background-color: #4752c4;
  transform: scale(1.05);
}

button:active {
  background-color: #3c45a5;
  transform: scale(0.97);
}

/* Profile-popup roles */
.profile-roles {
  margin-top: 8px;
}
.profile-roles .role-badge {
  display: inline-flex;
  align-items: center;
  background-color: #2f3136;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 6px;
  border: 1px solid var(--role-color);
  color: #fff;
  font-size: 12px;
}
.profile-roles .role-badge .role-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--role-color);
  margin-right: 4px;
}

.channel-btn .channel-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  vertical-align: text-bottom;
  margin-right: 4px;
}
.channel-manage-btn {
  background: none;
  border: none;
  color: #b9bbbe;
  font-size: 16px;
  cursor: pointer;
  margin-left: 8px;
  vertical-align: middle;
  box-shadow:none;
  padding:0;
}
.channel-manage-btn:hover {
  color: #fff;
}
.channel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  text-align: left;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: none;
  color: hotpink;
  border: 1px solid hotpink;
  margin: 4px 0;
  box-shadow:none;
  cursor:default;
}

.channel-toggle.channel-off {
	color: lightskyblue;
	border: 1px solid lightskyblue;
}

.channel-toggle:active,.channel-toggle:hover {
	background:none;
}

/* keep the modal-body flex setup from before */
#manageChannelsModal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  overflow-y: auto;
}
.toggle-content {
  display: flex;
  align-items: center;
}
/* DM avatar */
.toggle-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

/* Channel/username label */
.toggle-label {
  flex: 1;
}

/* Checkmark on the right */
.toggle-check {
  margin-left: 8px;
  color: white;
}

.channel-list{
	max-height: 300px;
	overflow:auto;
	padding:0 16px;
	padding-top:6px;
}

.header-left{
	display:flex; align-items:center;
}

#channelButtons{
	margin-left:20px;
	height:40px;
	align-items: end;
	overflow-x:auto;
	display:flex;
	gap:8px;
	overflow-y:hidden;
	padding:0px 4px 0px 4px;
	max-width: calc(100vw - 200px);}
#emojiPickerContainer{position:absolute; z-index:999;}
.mention-suggestion-item.selected {
  background-color: #4752c4;
}
#onlineUsersContainer .status-title.special-role:first-of-type {
  margin-top: 0;
}
.mediaattachment {
	display:block;
	margin-top:4px;
	max-height:400px;
	max-width: 400px;
}
#boimodal{width:360px; height:unset; text-align:center; padding:20px;}
#loginSignupBtn,#guestBtn{margin:10px;}
#guestNameInput{padding:8px; width:70%;}
#guestFlow{margin-top:20px;}
#entryIco{max-width:75px;align-self:center;margin-bottom: 10px;}
.white{color:white;}

.sendChatDiv .blocked-dm-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 10;
}
.sendChatDiv .blocked-dm-overlay.hidden {
  display: none !important;
}

.sendChatDiv .blocked-dm-overlay button {
  margin-left: 8px;
  background: none;
  border: 1px solid #fff;
  color: #fff;
  padding: 4px 8px;
  cursor: pointer;
  box-shadow:none;
}
.sendChatDiv .blocked-dm-overlay button:hover {
  background: #fff;
  color: #000;
}
.inbox-badge {
    position: absolute;
    bottom: -2px; /* Adjust for precise positioning */
    right: -4px;  /* Adjust for precise positioning */
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.2; /* Adjust for better vertical centering of text */
    min-width: 16px;
    height: 16px; /* Make height and min-width same for circle */
    display: flex; /* For centering text in the badge */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid #36393f; /* Match background to make it look "cut out" */
}

/* Styles for the Inbox Popover */
.inbox-popover {
    position: absolute; /* Positioned by JavaScript */
    background-color: #2C2C2C; /* Dark background, similar to profile menu */
    border: 1px solid #444;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    width: 380px; /* Adjust width as desired */
    max-height: 450px; /* Limit height, content will scroll */
    display: flex; /* Use flex to manage internal layout */
    flex-direction: column;
}

.inbox-popover-caret {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 9px solid transparent; 
    border-right: 9px solid transparent;
    border-bottom: 9px solid #2C2C2C;
    top: -8px; 
}


.inbox-popover-header {
    padding: 10px 15px;
    border-bottom: 1px solid #444;
    flex-shrink: 0; /* Prevent shrinking */
}

.inbox-popover-header h2 {
    margin: 0;
    color: #FFF;
    font-size: 16px;
}

.inbox-popover-content {
    padding: 0;
    overflow-y: auto;
    flex-grow: 1; /* Allow content to take available space and scroll */
}

/* Adjust message group styling within popover if needed */
#inboxMessagesContainer.inbox-popover-content .message-group {
    padding-left: 15px; /* Give a bit of space */
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #383838; /* Lighter separator for messages */
}
#inboxMessagesContainer.inbox-popover-content .message-group:last-child {
    border-bottom: none;
}
/* Avatar and message line alignment within popover */
#inboxMessagesContainer.inbox-popover-content .message-avatar {
    left: 15px; /* Aligns with group padding */
    top: 8px; /* Align with group padding-top */
}
#inboxMessagesContainer.inbox-popover-content .message-line {
    margin-left: 45px; /* Space for 30px avatar + 15px margin */
}


.inbox-popover-footer {
    padding: 10px 15px;
    border-top: 1px solid #444;
    text-align: right;
    flex-shrink: 0; /* Prevent shrinking */
}

.chat {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows this area to take up remaining vertical space */
    overflow: hidden; /* Important to prevent its children from expanding the body */
}

#chatArea {
    display: flex; /* Keeps #chatMessages and #onlineUsersContainer side-by-side */
    flex-grow: 1; /* Allows #chatArea to take available space and shrink when previews appear */
    overflow: hidden; /* Ensures that if content overflows, scrollbars appear within its children */
}
/* Reactor Tooltip: same animation as .profile-popup-modal */
.reactor-tooltip {
  position: absolute;
  background: #2f3136;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  z-index: 10000;
  color: #fff;
  transform: scale(0.8);
  transform-origin: center center;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
  opacity: 0;
}
.reactor-tooltip.active {
  transform: scale(1);
  opacity: 1;
}
.reactor-item {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.reactor-item:last-child {
  margin-bottom: 0;
}
.reactor-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}
/* ===== IRC Mode Specific Layout ===== */
.message-line.irc-mode {
    align-items: baseline; /* Align items on the same line by their baseline */
    padding: 6px 8px;
    position: relative;
}

/* Timestamp, Username, Message Text in IRC mode */
.message-line.irc-mode .timestamp {
    margin-right: 8px;
    flex-shrink: 0;
    order: 1; /* First item */
}

.message-line.irc-mode .username {
    margin-right: 5px;
    font-weight: bold;
    flex-shrink: 0;
    order: 2; /* Second item */
}

.message-line.irc-mode .irc-message-actual-text {
    flex-grow: 1; /* Takes remaining space on the line */
    min-width: 0; /* Important for flex-grow */
    order: 3; /* Third item */
    /* white-space: pre-wrap; and word-wrap: break-word; are inherited from .message-text */
}

/* Attachments in IRC mode (generic wrapper, image container, video/audio element) */
.message-line.irc-mode .attachment-wrapper,
.message-line.irc-mode .lazy-image-container,
.message-line.irc-mode .mediaattachment {
    order: 4;             /* Fourth group, appears after text */
    flex-basis: 100%;     /* Force this item to take the full width of a new flex line */
    margin-top: 5px;
    margin-bottom: 3px;
}

/* Ensure the actual image/video content within their containers is block and respects max-width */
.message-line.irc-mode .lazy-image-container .lazy-loaded-image, /* The actual <img> tag */
.message-line.irc-mode .mediaattachment { /* The actual <video> or <audio> tag */
    display: block; /* Make them block to ensure they don't inline with anything else */
    margin-left: 0;   /* Ensure left alignment */
    margin-right: auto; /* Keeps it left if max-width is less than container */
}


/* Reactions in IRC mode */
.message-line.irc-mode .reaction-row {
    order: 5;             /* Fifth group, appears after attachments */
    flex-basis: 100%;     /* Force this item to take the full width of a new flex line */
    width: 100%;          /* Explicitly set width to 100% of the new line */
    margin-top: 4px;      /* Space above reactions */
    /* Reactions inside will be left-aligned by default */
}

/* Message Actions (reply, delete etc.) in IRC mode */
.message-line.irc-mode .message-actions {
    /* Uses global .message-actions styles for position:absolute, display:none by default */
    /* The parent .message-line.irc-mode is position:relative, so actions are relative to it */
    background-color: #36393f; /* Or your chat background to blend */
    border-radius: 4px;
    padding: 3px 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    z-index: 10; /* Ensure it's above other content on the line */
    /* No change needed here, positioning seems fine from description */
}

.message-group.ephemeral {
	background-color: rgba(88, 101, 242, 0.1);
	border-left: 4px solid #5865f2;
}

.ephemeral-notice {
	font-size: 12px;
	color: #b9bbbe; /* A lighter gray */
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ephemeral-notice i {
	font-size: 14px;
}

.ephemeral-notice a {
	color: #00a8fc; /* A distinct link color */
	text-decoration: none;
	cursor: pointer;
}

.ephemeral-notice a:hover {
	text-decoration: underline;
}

.message-group.ephemeral .message-line:hover {
	background-color: transparent;
}

.message-group.ephemeral .message-line:hover .message-actions {
	display: none;
}
.message-line.irc-blocked-hidden, .message-group.irc-blocked-hidden {
    display: none;
}

.boitypingdot{width:10px;display:inline-block;margin-right:3px;}
#boistopmakingthechatinputgoup{height:26px;flex-shrink:0;}

#currentUserDisplay {
	display: flex;
	align-items: center;
	padding: 0 12px;
	white-space: nowrap;
	flex-shrink: 0;

	/* --- Melding Styles --- */
	background-color: #2f3136;      /* Match input background */
	border: 1px solid #ccc;          /* Match input border */
	
	/* Adjust corner radii to be sharp on the right side */
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.c-mode-active, .c-mode-active #chatMessages{
	background-color: rgb(33, 37, 41);
}
.c-mode-active .chat, .c-mode-active #chatInput, .c-mode-active #currentUserDisplay {
	border: rgb(87, 87, 87) 1px solid;
}
.c-mode-active #chatInput {
	background-color:unset;
}
.c-mode-active .sendChatDiv {
	margin:0;
}
.c-mode-active #xssToggleContainer {
	border: rgb(87, 87, 87) 1px solid;
}
.c-mode-active button{
	box-shadow:unset;
}
.c-mode-active #replyPreviewContainer {
	margin:0px;
	margin-right:90px;
	border-color: rgb(87, 87, 87);
}
#xssToggleContainer {
	/* This is only shown for the admin via JS */
	display: flex;
	align-items: center;

	/* --- Melding Styles --- */
	border: 1px solid #ccc;
	padding: 0 8px; /* Add some internal spacing */
	background-color: #2f3136;      /* Match input background */

	/* Make left corners sharp and right corners rounded */
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;

	border-left:none;
}

/* Style the content inside the melded container */
#xssToggleContainer label {
	margin-left: 4px;
	color: #dcddde;
}

#xssToggleCheckbox {
	margin-left:2px;
	color-scheme: dark;
}

.message-text[contenteditable="true"] {
    background-color: #3a3e44; /* A slightly lighter background */
    padding: 8px; /* Add some padding */
    border-radius: 4px; /* Optional: rounded corners */
    outline: none; /* Remove the default focus outline */
}

/* Container for the "save/cancel" helper text */
.edit-actions-text {
    font-size: 12px;
    color: #b9bbbe; /* Light grey text */
    margin-top: 6px;
}

/* Styling for the clickable links within the helper text */
.edit-actions-text a {
    color: #00a8fc; /* A distinct blue for links */
    text-decoration: none;
    cursor: pointer;
}

.edit-actions-text a:hover {
    text-decoration: underline;
}

.message-line:hover, .message-line.editing-active {
	background-color: #32353b;
}

/* Add this new rule to hide the on-hover actions when editing */
.message-line.editing-active .message-actions {
    display: none !important;
}

.mention-suggestion-header {
    color: #b9bbbe;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 8px 4px 8px; /* top, right/left, bottom */
    letter-spacing: 0.5px;
}

.reply-line-loading {
    color: #8e9297; /* A dim, non-distracting color */
    font-style: italic;
    padding: 4px 8px; /* Give it some space */
}

.reply-line-error, .internal-link-error {
	color: #8e9297;
	font-style: italic;
}
.context-view-banner {
    position: absolute;
    /* Position it above the chat input area (approx 38px height + 16px margin) */
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    
    background-color: #2a2c31;
    color: white;
    padding: 10px 15px;
    border-radius: 10px; /* Gives it a "pill" shape */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
	border: 1px solid #ccc
}

/* This rule is required for the show/hide functionality */
.context-view-banner.hidden {
    display: none !important;
}

.context-view-banner button {
    margin-left: 10px;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
	box-shadow:none;
}
#chat-messages-wrapper {
    flex: 2; /* This property moves from #chatMessages to here */
    position: relative; /* This is the anchor for the absolute-positioned banner */
    display: flex; /* Allows #chatMessages to fill it vertically */
    overflow: hidden; /* Prevents children from breaking out */
}

.warningOverlayIcon {font-size: 48px; color: #faa61a; margin-bottom: 20px;}