/*
 * Copyright (c) 1996-2026 by citadel.org (Art Cancro et al)
 * This program is open source software.  Use, duplication, or disclosure is subject to the GNU General Public License version 3.
 */

* {						/* This makes grids consume exactly 100% of their parent containers */
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

[contenteditable]:focus {
	outline: 0px solid transparent;
}
 
.ctdl-main-grid-container {			/* This grid implements the "holy grail layout" of the screen */
	display: grid;
	grid-template-rows: 5vh auto;
	grid-template-columns: 12vw auto;
	grid-template-areas:
		'ctdl-mg-banner ctdl-mg-banner'
		'ctdl-mg-menu ctdl-mg-main';
	gap: 1px;				/* This is the thickness of the lines between the boxes */
	background-color: DarkSlateGrey;	/* This is the color of the lines between the boxes */
	padding: 0;				/* This is the border around the edges of the screen (0 for no border) */
	width: 100vw;
	height: 100vh;
}

.ctdl-grid-banner-item {			/* Top banner, referenced by the grid container */
	grid-area: ctdl-mg-banner;
	background-color: #0f172a;
	color: #f8fafc;
	border-bottom: 1px solid #1e293b;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.ctdl-grid-sidebar-item {			/* Side bar, referenced by the grid container */
	grid-area: ctdl-mg-menu;
	background-color: WhiteSmoke;
}

.ctdl-grid-main-item {				/* Main content area of the screen, referenced by the grid container */
	grid-area: ctdl-mg-main;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: WhiteSmoke;
}

.ctdl-main-grid-container > div {
	text-align: left;
}

.ctdl-banner-buttons {				/* Flexbox container for everything we stick into the banner */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 0 1rem;
	box-sizing: border-box;
}

.ctdl-banner-left {				/* Items which should be grouped to the LEFT side of the banner */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
}

.ctdl-banner-center {				/* Items which should be grouped to the MIDDLE of the banner */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-banner-right {				/* Items which should be grouped to the RIGHT side of the banner */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-banner-buttons li {
	list-style: none;
	display: inline-flex;
	align-items: center;
	height: 100%;
}

.ctdl-banner-buttons button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.75rem;
	background-color: #1e293b;
	color: #f8fafc;
	border: 1px solid #334155;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	margin: 0;
}

.ctdl-banner-buttons button:hover {
	background-color: #334155;
	border-color: #475569;
	color: #ffffff;
}

.ctdl-banner-buttons button:active {
	transform: scale(0.96);
}

.ctdl-banner-buttons button#ctdl-goto-button,
.ctdl-banner-buttons button#ctdl-abandon-button,
.ctdl-banner-buttons button#ctdl-newmsg-button {
	background-color: #3182ce;
	border-color: #4299e1;
	color: #ffffff;
}

.ctdl-banner-buttons button#ctdl-goto-button:hover,
.ctdl-banner-buttons button#ctdl-abandon-button:hover,
.ctdl-banner-buttons button#ctdl-newmsg-button:hover {
	background-color: #2b6cb0;
	border-color: #3182ce;
}

.ctdl-banner-buttons button#ctdl-delete-button {
	background-color: #e53e3e;
	border-color: #fc8181;
	color: #ffffff;
}

.ctdl-banner-buttons button#ctdl-delete-button:hover {
	background-color: #c53030;
	border-color: #e53e3e;
}

.ctdl-banner-buttons button#ctdl_banner_title {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0;
	cursor: pointer;
}

.ctdl-banner-buttons button#ctdl_banner_title:hover {
	background: transparent;
	border: none;
	text-decoration: underline;
}

.ctdl-banner-buttons button#current_user_avatar {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	cursor: pointer;
}

.ctdl-banner-buttons button#current_user_avatar:hover {
	background: transparent;
	border: none;
}

.ctdl-banner-buttons button#current_user {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #f8fafc;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0;
	cursor: default;
}

.ctdl-banner-buttons button#current_user:hover {
	background: transparent;
	border: none;
}

.ctdl-banner-buttons button#ctdl_banner_title:active,
.ctdl-banner-buttons button#current_user_avatar:active,
.ctdl-banner-buttons button#current_user:active {
	transform: none;
}

.ctdl-banner-buttons a {			/* For example, the Login / Log Off button */
	color: #cbd5e1;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	transition: color 0.2s ease;
}

.ctdl-banner-buttons a:hover {
	color: #ffffff;
}

.ctdl-banner-buttons span {			/* For example, the name of the logged in user */
	color: #cbd5e1;
	font-weight: 600;
	font-size: 0.85rem;
}

.ctdl-logo-img {
	background-color: #ffffff;
	border-radius: 4px;
	padding: 2px 4px;
	height: calc(100% - 8px);
	max-height: calc(100% - 8px);
	object-fit: contain;
	display: block;
}

.ctdl-banner-buttons #ctdl-room-icon {
	color: #f8fafc;
}

html,body,h1,h2,h3,h4,h5 {
	font-family: sans-serif;
}

.ctdl-modal-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(5px);
	z-index: 1000;
}

.ctdl-modal {
	display: none;				/* set to "block" to make the modal appear */
	z-index: 1005;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(226, 232, 240, 0.8);
	border-radius: 16px;
	justify-content: center;
	align-items: center;
	padding: 0px;
	background-color: #FFFFFF;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

/*.ctdl-modal-header {
	background-color: WhiteSmoke;
	padding: 10px;
}

.ctdl-modal-main {
	padding: 10px;
}

.ctdl-modal-footer {
	background-color: WhiteSmoke;
	padding: 10px;
}*/

.ctdl-sidebar-button {
	width: 100%;
	padding: 10px;
	text-align: left;
	border: 1px solid WhiteSmoke;
	background-color: WhiteSmoke;
	color: Black;
	font-size: 0.9em;
	border-radius: 5px;
}

.ctdl-sidebar-button:hover {
	border-color: Blue;
}

.ctdl-sidebar-button-selected {
	font-weight: bold;
	background-color: Gainsboro;
}

/* Custom banner button styles handled in .ctdl-banner-buttons button */

.ctdl-forum-reading-pane {
	background-color: transparent;		/* Background behind the message boxes */
	max-width: 100ch;
	margin: 0 auto;
}

.ctdl-fmsg-wrapper,
.ctdl-formgrid-fieldset {
	background-color: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ctdl-fmsg-wrapper {				/* message wrapper for forum view */
	overflow: hidden;
	margin: 1.5rem 1vw;
	padding: 1.5rem;				/* inside the box */
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.ctdl-fmsg-wrapper .ctdl-avatar {
	float: none;
	padding-right: 0;
	flex-shrink: 0;
}

.ctdl-fmsg-wrapper .ctdl-fmsg-content {
	margin-left: 0;
	flex-grow: 1;
}

.ctdl-mmsg-wrapper {				/* message wrapper for mailbox view */
	overflow: hidden;
	background-color: White;
	padding: 5px;				/* inside the box */
}

.ctdl-msg-reply {
	margin-left: 5vw;
}

.ctdl-msg-header-card {
	padding: 0.5rem 0.75rem;
	background-color: #f8fafc;
	border-radius: 8px;
	border: 1px solid #edf2f7;
	margin-bottom: 1.25rem;
}

.ctdl-msg-header-card .ctdl-msg-header {
	background: none;
	border: none;
	padding: 0;
	margin-bottom: 0;
	border-radius: 0;
	box-shadow: none;
}

.ctdl-msg-header-card .ctdl-msg-to,
.ctdl-msg-header-card .ctdl-msg-cc,
.ctdl-msg-header-card .ctdl-msgsubject {
	margin-top: 0.5rem;
}

.ctdl-msg-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.75rem;
	background-color: #f8fafc;
	border-radius: 8px;
	border: 1px solid #edf2f7;
	margin-bottom: 1.25rem;
}

.ctdl-msg-header-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-msg-header-buttons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-msg-button {
	display: inline-flex;
	align-items: center;
	background-color: #edf2f7;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	margin-left: 0.2em;
}

.ctdl-msg-button:hover {
	background-color: #e2e8f0;
}

.ctdl-msg-button:active {
	transform: scale(0.98);
}

.ctdl-msg-button i {				/* This will get applied to Font Awesome icons stuck into the buttons */
	margin-right: 0.35rem;
}

.ctdl-msg-button a {
	color: #4a5568;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.75rem;
}

.ctdl-msg-button a:hover {
	color: #2d3748;
	cursor: pointer;
}

.ctdl-avatar {
	width: 32px;
}

.ctdl-avatar img {
	clip-path: circle(50%);
}

.ctdl-username {
	font-weight: bold;
	color: #000055;
	cursor: pointer;
}

.ctdl-username a {
	text-decoration: none;
	padding-right: 4px;
}

.ctdl-msgdate {
	padding-left: 4px;
}

.ctdl-msgsubject {
	font-weight: bold;
}

.ctdl-fmsg-content {				/* message text, when in forum view */
	margin-left: 32px;
}

.ctdl-mmsg-content {				/* message text, when in mailbox view */
	margin-left: 0;
}

.ctdl-mail-body-wrapper {
	/*max-width: 100ch;*/			/* Adjust here if you want big margins for mail */
	margin: 0 auto;
	height: 100%;
}

.ctdl_mail_folders,
.ctdl_chat_rooms {
	list-style: none;
	padding: 0.2rem 0;
	margin: 0;
}

.ctdl_mail_folders li,
.ctdl_chat_rooms li {
	color: #475569;
	padding: 0.35rem 0.6rem 0.35rem 1.2rem;
	cursor: pointer;
	border-radius: 5px;
	font-size: 0.88rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color 0.15s, color 0.15s;
	margin: 1px 0;
}

.ctdl_mail_folders li:hover,
.ctdl_chat_rooms li:hover {
	background-color: #e2e8f0;
	color: #0f172a;
}

.ctdl_mail_folders li.ctdl_folder_selected,
.ctdl_chat_rooms li.ctdl_chat_room_selected {
	background-color: #cbd5e1;
	color: #0f172a;
	font-weight: 600;
}

.ctdl_mail_folders li.ctdl-has-unread,
.ctdl_chat_rooms li.ctdl-has-unread {
	font-weight: 700 !important;
	color: #0f172a !important;
}

.ctdl-unread-dot {
	width: 8px;
	height: 8px;
	min-width: 8px;
	border-radius: 50%;
	background-color: #2563eb;
	box-shadow: 0 0 5px rgba(37, 99, 235, 0.7);
	display: inline-block;
	margin-left: 0.5rem;
}

.ctdl_mail_folder_droppable {
	background-color: LightGrey;
	font-weight: bold;
}

.ctdl_mail_folders li.ctdl-new-mailbox-item {
	margin-top: 0.25rem;
}

.ctdl_mail_folders li.ctdl-new-mailbox-editing,
.ctdl_mail_folders li.ctdl-new-mailbox-editing:hover {
	cursor: default;
	background-color: transparent;
	padding: 0.2rem 0.4rem 0.2rem 0.8rem;
}

.ctdl-new-mailbox-link {
	display: flex;
	align-items: center;
	width: 100%;
	color: #64748b;
}

.ctdl-new-mailbox-link:hover {
	color: #0f172a;
}

.ctdl-new-mailbox-form {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 4px;
}

.ctdl-new-mailbox-input {
	flex: 1;
	min-width: 0;
	padding: 0.25rem 0.4rem;
	font-size: 0.85rem;
	border: 1px solid #94a3b8;
	border-radius: 4px;
	outline: none;
	background-color: #ffffff;
	color: #0f172a;
	box-sizing: border-box;
}

.ctdl-new-mailbox-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 1px #2563eb;
}

.ctdl-new-mailbox-btn {
	background: none;
	border: none;
	padding: 0.25rem 0.35rem;
	cursor: pointer;
	font-size: 0.85rem;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ctdl-new-mailbox-btn-confirm {
	color: #16a34a;
}

.ctdl-new-mailbox-btn-confirm:hover {
	background-color: #dcfce7;
}

.ctdl-new-mailbox-btn-cancel {
	color: #dc2626;
}

.ctdl-new-mailbox-btn-cancel:hover {
	background-color: #fee2e2;
}

.ctdl-avatar {
	float: left;
	padding-right: 2px;
}

.ctdl-forum-nav {
	text-align: center;
	color: Black;
	background-color: Gainsboro;
	padding-top: 5px;
	padding-bottom: 5px;
}

.ctdl-forum-nav a {
	text-decoration: none;
}

.ctdl-msg-body {
}

.ctdl-forum-editor-body {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 1px black;
	padding-bottom: 1px black;
}

#ctdl-editor-body {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: none;
	font-family: sans-serif;
}

#ctdl-editor-body.raw-mode {
	font-family: monospace;
	white-space: pre-wrap;
	resize: none;
	overflow-y: auto;
}

blockquote {
	background-color: #f5f5f5 !important;
	color: Navy !important;
	border-left: 2px solid Navy;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin-left: 1em;
	padding-left: 1em;
}

blockquote blockquote {
	background-color: #ebebeb !important;
	color: Maroon !important;
	border-left: 2px solid Maroon;
}

blockquote blockquote blockquote {
	background-color: #e1e1e1 !important;
	color: Green !important;
	border-left: 2px solid Green;
}

blockquote blockquote blockquote blockquote {
	background-color: #d7d7d7 !important;
	color: Purple !important;
	border-left: 2px solid Purple;
}

blockquote blockquote blockquote blockquote blockquote {
	background-color: #cdcdcd !important;
	color: Teal !important;
	border-left: 2px solid Teal;
}

blockquote pre {
	margin-left: 1%;
	margin-right: 1%;
}

.ctdl-forum-urlmodal {
	width: 75%;
}

.ctdl-url-entry-box-legend {
	overflow: none;
	margin-left: 2em;
	margin-right: 2em;
}

/* use this class for any small item that needs to be centered on the screen in the main div */
.ctdl-middle {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	min-height: 100%;
	width: 100%;
	max-width: 100%;
	padding-top: 1.5rem;
	padding-bottom: 2rem;
	box-sizing: border-box;
	background-color: WhiteSmoke;
	overflow: visible;
	border: none;
}

.ctdl-middle form {
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.ctdl-roomlist-top {
	width: 100%;
	height: 100%;
	overflow: auto;
	border: none;
	padding: 1rem 0;
}

.ctdl-roomlist-floor {
	margin-bottom: 2rem;
}

.ctdl-roomlist-floor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 1vw 0.75rem 1vw;
	padding: 0 1vw;
}

.ctdl-roomlist-floor-label {
	font-size: 1.25rem;
	font-weight: 700;
	color: #2d3748;
	margin: 0;
}

.ctdl-roomlist-create-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #3182ce;
	background-color: #ebf8ff;
	border: 1px solid #bee3f8;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.ctdl-roomlist-create-button:hover {
	background-color: #3182ce;
	color: #ffffff;
	border-color: #3182ce;
	box-shadow: 0 4px 6px -1px rgba(49, 130, 206, 0.2);
}

.ctdl-roomlist-create-button:active {
	transform: translateY(1px);
}

.ctdl-roomlist-floor-rooms {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0 1vw;
}

.ctdl-roomlist-room {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1.25rem;
	background-color: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	margin-left: 1vw;
	margin-right: 1vw;
}

.ctdl-roomlist-room:hover {
	background-color: #f8fafc;
	border-color: #e2e8f0;
	transform: translateY(-1px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

.ctdl-roomlist-room:active {
	transform: translateY(0);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.ctdl-roomlist-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ctdl-roomlist-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 1.1rem;
	transition: all 0.2s ease;
}

.ctdl-roomlist-icon-container.ctdl-roomlist-icon-new {
	background-color: #ebf8ff;
	color: #3182ce;
}

.ctdl-roomlist-icon-container.ctdl-roomlist-icon-old {
	background-color: #f7fafc;
	color: #a0aec0;
}

.ctdl-roomlist-roomname {
	font-size: 1.05rem;
	font-weight: 500;
	color: #4a5568;
	transition: color 0.2s ease;
}

.ctdl-roomlist-room:hover .ctdl-roomlist-roomname {
	color: #2d3748;
}

.ctdl-roomlist-roomname-hasnewmsgs {
	font-weight: 700;
	color: #2b6cb0;
}

.ctdl-roomlist-mtime {
	font-size: 0.85rem;
	color: #a0aec0;
	font-weight: 500;
}

.ctdl-roomlist-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ctdl-roomlist-forget-btn {
	background: transparent;
	border: none;
	color: #a0aec0;
	font-size: 0.95rem;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
}

.ctdl-roomlist-forget-btn:hover {
	color: #e53e3e;
	background-color: #fff5f5;
	opacity: 1;
	transform: scale(1.1);
}

.ctdl-mailbox-grid-container {
	display: grid;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: WhiteSmoke;
	grid-template-rows: 15vw 1fr;		/* "1fr" means "all of the remaining space" */
}

.ctdl-mailbox-pane {				/* list of messages when in mailbox view */
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #DDDDDD;
	border-bottom: solid 3px SlateGrey;	/* We can probably turn this into a drag handle */
}

.ctdl-mailbox-table {
	width: 100%;
	background-color: WhiteSmoke;
	border-collapse: collapse;
}

.ctdl-mailbox-table td {
	padding: 5px;
}

.ctdl-mailbox-table tr {
	cursor: pointer;
	border-top: solid 1px LightGrey;
}

.ctdl-mailbox-table tr:hover {
	border-top: solid 1px Blue;
	border-bottom: solid 1px Blue;
	background-color: LightGrey;
}

.ctdl-mailbox-table th {
	position: sticky;
	top: 0;
	z-index: 6;
	background-color: SlateGrey;
	color: White;
	padding-top: 5px;
	padding-bottom: 5px;
	cursor: pointer;
	user-select: none;
}

.ctdl-mailbox-table th:hover {
	background-color: #64748b;
	color: White;
	cursor: pointer;
}

.ctdl-mail-selected {
	background-color: Blue;
	color: White;
}

.ctdl-mail-unread {
	font-weight: bold;
}

.ctdl-mail-subject {				/* Subject column in mailbox message list */
}

.ctdl-mail-sender {				/* Sender column in mailbox message list */
}

.ctdl-mail-date {				/* Date column in mailbox message list */
	white-space: nowrap;
}

.ctdl-mail-msgnum {				/* # column in mailbox message list */
	white-space: nowrap;
}

.ctdl-mailbox-reading-pane {			/* message reading pane when in mailbox view */
	overflow: auto;
	background-color: WhiteSmoke;
	padding: 5px;
	border: none;
	/*max-width: 100ch;
	margin: 0 auto;*/
}

/* This makes up an editor/composition window for several applications.
 * To customize it, just subclass it and define which grid-template-areas you want to include.
 */
.ctdl-compose {
	width: 100%;
	height: 100%;
	overflow: none;
	border: none;
	padding: 0;
	background-color: WhiteSmoke;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3px;
}

.ctdl-compose.ctdl-compose-mail {		/* composition window subclass for email */
	grid-template-rows: auto auto auto auto auto 1fr auto;
	grid-template-areas:
		'ctdl-compose-from-label ctdl-compose-from-line'
		'ctdl-compose-to-label ctdl-compose-to-line'
		'ctdl-compose-cc-label ctdl-compose-cc-field'
		'ctdl-compose-bcc-label ctdl-compose-bcc-field'
		'ctdl-compose-subject-label ctdl-compose-subject-field'
		'ctdl-compose-message-box ctdl-compose-message-box'
		'ctdl-compose-actionbar ctdl-compose-actionbar';
}

.ctdl-compose.ctdl-compose-wiki {		/* composition window subclass for wiki editor */
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'ctdl-compose-editor-buttons ctdl-compose-editor-buttons'
		'ctdl-compose-message-box ctdl-compose-message-box'
		'ctdl-compose-actionbar ctdl-compose-actionbar';
}

.ctdl-compose.ctdl-compose-blog {		/* composition window subclass for blog post */
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'ctdl-compose-subject-label ctdl-compose-subject-field'
		'ctdl-compose-message-box ctdl-compose-message-box'
		'ctdl-compose-actionbar ctdl-compose-actionbar';
}


.ctdl-compose-from-label {
	grid-area: ctdl-compose-from-label;
	padding: 0.5vw;
}

.ctdl-compose-from-line {
	grid-area: ctdl-compose-from-line;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 1px;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-compose-to-label {
	grid-area: ctdl-compose-to-label;
	padding: 0.5vw;
}

.ctdl-compose-to-line {
	grid-area: ctdl-compose-to-line;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 1px;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-compose-to-field {
	flex-grow: 1;

}

.ctdl-cc-bcc-buttons {
	margin-left: auto;
}

.ctdl-compose-cc-label {
	grid-area: ctdl-compose-cc-label;
	padding: 0.5vw;
	display: none;
}

.ctdl-compose-cc-field {
	grid-area: ctdl-compose-cc-field;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
	display: none;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 0;
}

.ctdl-compose-bcc-label {
	grid-area: ctdl-compose-bcc-label;
	padding: 0.5vw;
	display: none;
}

.ctdl-compose-bcc-field {
	grid-area: ctdl-compose-bcc-field;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 0;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
	display: none;
}

.ctdl-compose-subject-label {
	grid-area: ctdl-compose-subject-label;
	padding: 0.5vw;
}

.ctdl-compose-subject-field {
	grid-area: ctdl-compose-subject-field;
	padding-left: 0;
	padding-right: 0.5vw;
	padding-top: 0.5vw;
	padding-bottom: 0;
	border-bottom: 1px solid Grey;
	margin-right: 0.5vw;
}

.ctdl-compose-editor-buttons {
	grid-area: ctdl-compose-editor-buttons;
	overflow: hidden;
	padding: 0.5vw;
	border-bottom: 1px solid Grey;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
	background-color: Gainsboro;
}

.ctdl-compose-message-box {
	grid-area: ctdl-compose-message-box;
	overflow-x: wrap;
	overflow-y: auto;
	padding: 0.5vw;
	border-bottom: 1px solid Grey;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
}

.ctdl-compose-actionbar {
	grid-area: ctdl-compose-actionbar;
	overflow: none;
	padding: 0.5vw;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-upload {
	display: none;				/* set to 'block' to make it appear when needed */
	width: 95%;
	height: 95%;
	border: 2px dashed #ccc;
	border-radius: 20px;
	border-color: Black;
	justify-content: center;
	align-items: center;
	padding: 1em;
	background-color: WhiteSmoke;
}

.ctdl-upload.fixed {
	position: fixed;
	top: 2.5%;
	right: 2.5%;
}

.ctdl-upload.highlight {
	border-color: Blue;
}

.ctdl-compose-attachments-title {
	padding: 1em;
	background: Gainsboro;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: auto;
	align-content: start
}

.ctdl-upload-form {
	text-align: center;
	margin-bottom: 10px;
}

.ctdl-login-screen-grid-container {
	display: grid;
	grid-template-columns: auto auto;
}

.ctdl-login-screen-grid-item {
	padding: 20px;
	font-size: 1.25em;
	vertical-align: middle;
}

.ctdl-login-screen-grid-item input {
	height: 100%;
	border: none;
	font-size: 1.25em;
}

.ctdl-fatal-error {
	background-color: DarkRed;
	margin-left: 1em;
	margin-right: 1em;
	padding: 1em;
	font-size: 2em;
	color: White;
}

.ctdl-calendar-container {			/* Flexbox container for calendars; child elements are headings and content */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-calendar-toplabels {			/* days and numbers of the week, up top */
	width: 100%;				/* No height specified.  Take what we need. */
}

.ctdl-calendar-content {			/* days and numbers of the week, up top */
	flex-grow: 1;				/* make the content take up all vertical space not used by the headings */
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;			/* Scrolling this div will scroll all days in view + the ruler */
	transform: translateZ(0);		/* Creates a containing block for all descendants; see https://www.w3.org/TR/css-transforms-1/#containing-block-for-all-descendants */
}

.ctdl-calendar-week-labels {			/* Flexbox container for LABELS of day, 3-day, 5-day, week view */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ctdl-calendar-week {				/* Flexbox container for day, 3-day, 5-day, week view */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	width: 100%;
	height: 100%;				/* Height will be adjusted by javascript to zoom as needed */
	overflow: hidden;
}

.ctdl-calendar-ruler {				/* This appears on the left side and shows the hours of the day */
	display: flex;				/* It is both a flexbox parent and child */
	flex-direction: column;
	height: 100%;				/* Occupy the entire height of the main pane */
	border: 1px solid WhiteSmoke;
}

.ctdl-calendar-label {				/* Flexbox child for LABEL of one day of the week */
	width: 100%;				/* Fill the width of the main pane; don't compress them into narrow boxes */
	height: 100%;				/* Fill the height of the toplabels div so the tops line up */
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: bold;
}

.ctdl-calendar-day {				/* Flexbox child for CONTENT of one day of the week */
	background-color: White;
	border: 1px solid SlateGrey;
	height: 100%;				/* Occupy the entire height of the main pane */
	width: 100%;				/* Fill the width of the parent */
	overflow: hidden;
	transform: translateZ(0);		/* Creates a containing block for all descendants; see https://www.w3.org/TR/css-transforms-1/#containing-block-for-all-descendants */
}

.ctdl-calendar-ruler-hour {			/* Flexbox child of ctdl-calendar-ruler */
	flex-grow: 0;				/* Keep all hours the same size */
	height: 100%;				/* Occupy the entire height of the main pane */
	width: 100%;				/* Fill the width of the main pane; don't compress them into narrow boxes */
	text-align: right;
	border-top: 1px dotted SlateGrey;
	padding-left: 0.2ex;
	padding-right: 0.2ex;
}

.ctdl-calendar-item {				/* We can position relative to the parent because of the translateZ() transform */
	color: #1e293b;
	background-color: #e0edff;
	border: 1px solid #bfdbfe;
	border-left: 4px solid #2563eb;
	text-align: left;
	border-radius: 6px;
	overflow: hidden;
	padding: 4px 6px;
	font-size: 0.8rem;
	line-height: 1.25;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: width 0.2s ease, left 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease;
}

.ctdl-calendar-item.ctdl-calendar-item-allday {
	background-color: #2563eb;
	color: #ffffff;
	border: 1px solid #1d4ed8;
	border-left: 4px solid #1e40af;
	margin: 2px 0;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.75rem;
}

.ctdl-calendar-item.ctdl-calendar-item-allday:hover {
	background-color: #1d4ed8;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.ctdl-calendar-item.ctdl-calendar-item-in-day {
	width: 98%;
	top: 0;
	left: 1%;
	position: fixed;
	box-sizing: border-box;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ctdl-calendar-item.ctdl-calendar-item-in-day:hover {
	z-index: 25;
	background-color: #dbeafe;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.ctdl-calendar-item-time {
	font-size: 0.7rem;
	font-weight: 700;
	color: #1d4ed8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ctdl-calendar-item-title {
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

.ctdl-calendar-item.ctdl-calendar-item-allday .ctdl-calendar-item-title {
	color: #ffffff;
	white-space: nowrap;
}

.ctdl-calendar-item-location,
.ctdl-calendar-item-organizer {
	font-size: 0.7rem;
	color: #475569;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ctdl-calendar-item-location i,
.ctdl-calendar-item-organizer i {
	font-size: 0.68rem;
	color: #64748b;
	flex-shrink: 0;
}

.ctdl-calendar-hour-in-day {			/* This is the little rule line that goes across each hour of the day */
	border-top: 1px solid LightGrey;
	top: 0;
	text-align: center;
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.ctdl-calendar-half-hour-in-day {		/* This is the little rule line that goes across each half hour of the day */
	border-top: 1px dotted LightGrey;
	top: 0;
	text-align: center;
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.ctdl-multiple-fieldsets {			/* When you have multiple fieldsets on the same screen, enclose all in this */
	width: 75em;
	max-width: 100%;
	box-sizing: border-box;
}

.ctdl-tab-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	border-bottom: 2px solid #e2e8f0;
	margin-bottom: 1.25rem;
	padding: 0 0.5rem;
}

.ctdl-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 0.6rem 0.25rem 0.75rem 0.25rem;
	font-size: 0.95rem;
	font-weight: 500;
	font-family: inherit;
	color: #64748b;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	outline: none;
}

.ctdl-tab-btn:hover {
	color: #1e293b;
}

.ctdl-tab-btn.ctdl-tab-active {
	color: #059669;
	font-weight: 600;
	border-bottom-color: #059669;
}

.ctdl-tab-btn i {
	font-size: 1rem;
}

.ctdl-tab-panes {
	width: 100%;
}

.ctdl-tab-pane {
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	box-sizing: border-box;
}

.ctdl-formgrid-section-heading {
	font-size: 1.5em;
	margin: 1vw;
	margin-bottom: 1em;
}

.ctdl-formgrid-section-subheading {
	font-size: 1.25em;
	margin: 1vw;
	margin-bottom: 1em;
}

.ctdl-formgrid-fieldset {
	min-width: 50em;
	max-width: 99%;
	min-height: 5em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	font-size: 1rem;
	overflow: hidden;
}

.ctdl-formgrid-fieldset.ctdl-formgrid-fieldset-collapsed {
	min-height: 1em;
	max-height: 1em;
	overflow: hidden;
}

.ctdl-formgrid-fieldset.ctdl-formgrid-fieldset-stealth {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

.ctdl-formgrid-fieldset legend {
	background-color: #f8fafc;
	color: #2d3748;
	border-bottom: 1px solid #edf2f7;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0.5rem 1rem;
	font-weight: 700;
	box-sizing: border-box;
}

.ctdl-legendleft {
	padding-left: 1ex;
	padding-right: 1ex;
	float: left;
}

.ctdl-legendmiddle {
	padding-left: 1ex;
	padding-right: 1ex;
	font-weight: bold;
}

.ctdl-legendright {
	padding-left: 1ex;
	padding-right: 1ex;
	float: right;
}

.ctdl-formgrid {				/* Grid layout for forms -- shamelessly swiped from https://www.sitepoint.com/css-grid-web-form-layout */
	display: grid;
	grid-template-columns: 1fr 1em 2fr;
	grid-gap: 0.3em 0.6em;
	grid-auto-flow: dense;
	align-items: center;
	margin: 1em;
}

.ctdl-formgrid p {
	max-width: 40em;
	margin: 1em auto;
}

.ctdl-formgrid input, output, textarea, select, button {
	box-sizing: border-box;
	padding: 0.2em 0.4em;
	margin: 0.2em 0;
	outline: 0 none;
	border: 0 none;
	box-shadow: none;
}

.ctdl-formgrid button {				/* sort of styled after ctdl-msg-button */
	margin-left: 2px;
	border-radius: 5px;
	background-color: Blue;
	color: Black;
	padding: 0.2em 2em;
	background-color: WhiteSmoke;
	border-style: solid;
	border-width: thin;
	border-color: Black;
	cursor: pointer;
	font-size: 1em;
	max-width: 9em;
}

.ctdl-formgrid button:hover {
	background-color: #123456;
	color: WhiteSmoke;
	transition: .4s;
	border-color: #123456;
	cursor: default;
}

.ctdl-formgrid button:disabled {
	background-color: #e0e0e0;
	color: #a0a0a0;
	border-color: #c0c0c0;
	cursor: not-allowed;
}

.ctdl-formgrid button:disabled:hover {
	background-color: #e0e0e0;
	color: #a0a0a0;
	border-color: #c0c0c0;
	cursor: not-allowed;
}


.ctdl-formgrid label {
	box-sizing: border-box;
	user-select: none;
	cursor: pointer;
}

.ctdl-formgrid input:focus + label, textarea:focus + label, select:focus + label {
	color: #933;
}

.ctdl-formgrid input:checked + label {
	font-weight: bold;
}

.ctdl-formgrid input[type="datetime-local"] {
	width: 18em;				/* Make the date/time picker only as big as it needs to be */
}

.ctdl-formgrid input[type="date"] {
	width: 18em;				/* Make the date picker the same width as the date/time picker */
}

.ctdl-formgrid button, input[type="checkbox"], input[type="radio"] {
	width: auto;
	float: left;
	margin: 0.5em 0.5em 0 30%;
}

.ctdl-formgrid-hack1 {
	grid-column: 1 / 1;
	justify-self: end;
}

.ctdl-formgrid-hack2 {
	grid-column: 2 / 2;
}

.ctdl-formgrid-hack3 {
	grid-column: 3 / 3;
	justify-self: start;
}

.ctdl-formgrid .ctdl-msg-button {
	margin-left: 0;
}

.ctdl-formgrid button.ctdl-msg-button {
	grid-column: auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0.4rem 0.75rem;
	border: none;
	border-radius: 8px;
	background-color: #edf2f7;
	color: #4a5568;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.ctdl-formgrid button.ctdl-msg-button:hover {
	background-color: #e2e8f0;
	color: #2d3748;
	border-color: transparent;
}

.ctdl-formgrid input, output, textarea, select, button {
	grid-column: 2 / 4;
	width: auto;
	margin: 0;
	font-size: 1rem;
	border: 1px solid slategrey;
}

.ctdl-formgrid input[type="checkbox"], input[type="radio"] {
	grid-column: 1 / 3;
	justify-self: end;
	margin: 0;
}

.ctdl-formgrid label {
	float: left;
	width: 30%;
	text-align: right;
	padding: 0.25em 1em 0 0;
}

.ctdl-formgrid input[type="checkbox"] + label {
	width: auto;
	text-align: left;
}

.ctdl-formgrid input[type="radio"] + label {
	width: auto;
	text-align: left;
	padding: 0;
	margin: 0;
}

.ctdl-formgrid label, input[type="checkbox"] + label {
	width: auto;
	padding: 0;
	margin: 0;
}

.ctdl-formgrid textarea + label {
	align-self: start;
}

.ctdl-formgrid table {
	border: 1px solid SlateGrey;
	grid-column: 2 / 4;
	width: auto;
	margin: 0;
	font-size: 1rem;
	max-width: 100%;
	table-layout: fixed;
}

.ctdl-formgrid tr {
	max-width: 100%;
}

.ctdl-formgrid th {
	background-color: Gainsboro;
}

.ctdl-formgrid td {
	/*width: 100%;*/
	max-width: 100%;
	overflow: hidden;
}

.ctdl-formgrid td input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.ctdl-configscreen-title {
	font-size: 1.5rem;
	margin-bottom: 1ex;
}

.ctdl-configscreen-instructions {
	margin: 1em;
}

.ctdl-wiki-encap {
	margin: 0.5em;
	padding: 0.5em;
	background-color: White;
}

/* This sits directly inside the HGL "Main" section */
.ctdl-contacts_container {
	display: flex;
	flex-direction: row;		/* Horizontal split */
	width: 100%;
	height: 100%;			/* Lock to the height of the HGL pane */
	overflow: hidden;		/* Ensure no scrollbars at this level */
	margin: 0;
	padding: 0;
}

/* Master List Pane */
.ctdl-contacts_list {
	flex: 0 0 350px;		/* Fixed width for the list */
	height: 100%;			/* Fill vertical space */
	overflow-y: auto;		/* Scroll independently */
	border-right: 1px solid #333;	/* Visual separator */
	background-color: #f9f9f9;	/* Optional: subtle distinction */
}

/* Detail/Editor Pane */
.ctdl-contacts_viewer {
	flex: 1;			/* Fluid width for the detail view */
	height: 100%;			/* Fill vertical space */
	overflow-y: auto;		/* Scroll independently */
	padding: 20px;			/* Content breathing room */
}

/* Search boxes */
.ctdl-search-container {
	margin-bottom: 20px;
}

.ctdl-search-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 400px;
}

.ctdl-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #888;
}

.ctdl-search-input {
	width: 100%;
	padding: 8px 10px 8px 35px;
	border: 1px solid #ccc;
	border-radius: 20px;
	outline: none;
	box-sizing: border-box;
}

/* Access Denied / Error Card Styles */
.ctdl-error-card {
	background: white;
	padding: 2.5rem;
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	text-align: center;
	max-width: 400px;
	width: 90%;
	border-top: 5px solid #dc3545;
}

.ctdl-error-icon {
	color: #dc3545;
	font-size: 3.5rem;
	margin-bottom: 1.5rem;
}

.ctdl-error-title {
	margin: 0 0 0.75rem 0;
	color: #343a40;
	font-size: 1.5rem;
	font-weight: 600;
}

.ctdl-error-message {
	margin: 0;
	color: #6c757d;
	font-size: 1rem;
	line-height: 1.5;
}

/* Blog View Styles */
.ctdl-blog-container {
	display: flex;
	flex-direction: column;
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	gap: 2.5rem;
}

.ctdl-blog-header {
	text-align: center;
	padding-bottom: 2rem;
	border-bottom: 1px dashed #e1e8ed;
}

.ctdl-blog-title {
	font-size: 2.5rem;
	color: #1a202c;
	margin-bottom: 0.5rem;
	font-weight: 800;
}

.ctdl-blog-description {
	font-size: 1.1rem;
	color: #718096;
	max-width: 100%;
	margin: 0 auto;
	line-height: 1.6;
	white-space: pre-wrap;
	text-align: center;
}

.ctdl-blog-feed {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.ctdl-blog-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
	border: 1px solid #edf2f7;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ctdl-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.ctdl-blog-card-new {
	border-left: 4px solid #3182ce;
}

.ctdl-blog-new-badge {
	background-color: #3182ce;
	color: #ffffff;
	font-size: 0.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 9999px;
	margin-left: 0.5rem;
	display: inline-block;
	vertical-align: middle;
	font-weight: 600;
}

.ctdl-blog-new-comments-badge {
	background-color: #ebf8ff;
	color: #2b6cb0;
	font-size: 0.75rem;
	padding: 0.1rem 0.4rem;
	border-radius: 9999px;
	margin-left: 0.25rem;
	display: inline-block;
	vertical-align: middle;
	font-weight: 600;
}

.ctdl-blog-card-content {
	padding: 2rem;
}

.ctdl-blog-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.85rem;
	color: #a0aec0;
	margin-bottom: 1rem;
	font-weight: 500;
}

.ctdl-blog-meta-item {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ctdl-blog-post-title {
	font-size: 1.75rem;
	color: #2d3748;
	margin: 0 0 1rem 0;
	font-weight: 700;
	line-height: 1.3;
}

.ctdl-blog-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ctdl-blog-post-title a:hover {
	color: #3182ce;
}

.ctdl-blog-excerpt {
	color: #4a5568;
	font-size: 1.05rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.ctdl-blog-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #f7fafc;
	padding-top: 1.25rem;
}

.ctdl-blog-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ctdl-blog-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4a5568;
	font-weight: bold;
	font-size: 0.9rem;
}

.ctdl-blog-author-info {
	display: flex;
	flex-direction: column;
}

.ctdl-blog-author-name {
	font-weight: 600;
	color: #2d3748;
	font-size: 0.9rem;
}

.ctdl-blog-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #3182ce;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.15s ease;
}

.ctdl-blog-read-more:hover {
	color: #2b6cb0;
	transform: translateX(3px);
}

.ctdl-blog-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #edf2f7;
	color: #4a5568;
	border: none;
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	margin-bottom: 1.5rem;
}

.ctdl-blog-back-btn:hover {
	background: #e2e8f0;
	color: #2d3748;
}

.ctdl-blog-post-body {
	font-size: 1.15rem;
	line-height: 1.8;
	color: #2d3748;
	margin-bottom: 3rem;
}

.ctdl-blog-post-body p {
	margin-bottom: 1.5rem;
}

.ctdl-blog-comments-section {
	border-top: 2px solid #edf2f7;
	padding-top: 2.5rem;
	margin-top: 2rem;
}

.ctdl-blog-comments-title {
	font-size: 1.5rem;
	color: #2d3748;
	margin: 0 0 2rem 0;
	font-weight: 700;
}

.ctdl-blog-comments-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ctdl-blog-comment-card {
	background: #f8fafc;
	border: 1px solid #edf2f7;
	border-radius: 12px;
	padding: 1.5rem;
}

.ctdl-blog-comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.ctdl-blog-comment-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ctdl-blog-comment-author {
	font-weight: 600;
	color: #2d3748;
	font-size: 0.95rem;
}

.ctdl-blog-comment-date {
	font-size: 0.85rem;
	color: #a0aec0;
}

.ctdl-blog-comment-body {
	color: #4a5568;
	line-height: 1.6;
	font-size: 1rem;
}

.ctdl-blog-add-comment-card {
	background-color: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.ctdl-blog-add-comment-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2d3748;
	margin: 0 0 1rem 0;
}

.ctdl-blog-add-comment-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 0.95rem;
	color: #4a5568;
	background-color: #f8fafc;
	resize: vertical;
	transition: all 0.2s ease-in-out;
	font-family: sans-serif;
}

.ctdl-blog-add-comment-form textarea:focus {
	outline: none;
	border-color: #3182ce;
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.ctdl-blog-add-comment-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 1rem;
}

.ctdl-blog-post-comment-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.2rem;
	background-color: #3182ce;
	color: #ffffff;
	border: 1px solid #4299e1;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.ctdl-blog-post-comment-btn:hover {
	background-color: #2b6cb0;
	border-color: #3182ce;
}

.ctdl-blog-post-comment-btn:active {
	transform: scale(0.98);
}

.ctdl-blog-comment-delete-link,
.ctdl-blog-post-delete-link {
	color: #a0aec0;
	text-decoration: none;
	transition: color 0.2s ease;
	cursor: pointer;
	font-weight: 500;
}

.ctdl-blog-comment-delete-link {
	margin-left: 0.25rem;
}

.ctdl-blog-comment-delete-link:hover,
.ctdl-blog-post-delete-link:hover {
	color: #e53e3e;
	text-decoration: underline;
}


/* Generic Card Layout Styles */
.ctdl-card {
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
	box-sizing: border-box;
}

/* Sizing Modifiers */
.ctdl-card-sm {
	width: 380px;
	padding: 2.5rem 2rem;
}

.ctdl-card-md {
	width: 500px;
	padding: 2.5rem;
}

.ctdl-card-lg {
	width: 800px;
	padding: 3rem;
}

.ctdl-card-header {
	text-align: center;
}

.ctdl-card-header-icon {
	font-size: 3.5rem;
	color: #3182ce;
	margin-bottom: 0.75rem;
}

.ctdl-card-header h2 {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: #2d3748;
}

.ctdl-card-header p {
	margin: 0.25rem 0 0 0;
	font-size: 0.9rem;
	color: #718096;
}

.ctdl-card-error-message {
	padding: 0.75rem 1rem;
	background-color: #fff5f5;
	border: 1px solid #fed7d7;
	border-radius: 8px;
	color: #c53030;
	font-size: 0.85rem;
	text-align: center;
	font-weight: 500;
}

.ctdl-form-error-box {
	padding: 0.75rem 1rem;
	background-color: #fff5f5;
	border: 1px solid #feb2b2;
	border-left: 5px solid #e53e3e;
	border-radius: 8px;
	color: #9b2c2c;
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ctdl-card-body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ctdl-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ctdl-form-group label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #4a5568;
}

.ctdl-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.ctdl-input-wrapper i {
	position: absolute;
	left: 1rem;
	color: #a0aec0;
	font-size: 1rem;
}

.ctdl-input-wrapper input {
	width: 100%;
	padding: 0.75rem 1rem 0.75rem 2.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	outline: none;
	font-size: 0.95rem;
	color: #2d3748;
	transition: all 0.2s ease;
}

.ctdl-input-wrapper input:focus {
	border-color: #3182ce;
	box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.ctdl-form-options {
	display: flex;
	align-items: center;
}

.ctdl-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #4a5568;
	cursor: pointer;
	user-select: none;
}

.ctdl-checkbox-label input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	cursor: pointer;
}

.ctdl-card-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.ctdl-btn-primary {
	flex: 2;
	padding: 0.75rem;
	background-color: #3182ce;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.ctdl-btn-primary:hover {
	background-color: #2b6cb0;
}

.ctdl-btn-primary:active {
	transform: scale(0.98);
}

.ctdl-btn-secondary {
	flex: 1;
	padding: 0.75rem;
	background-color: #edf2f7;
	color: #4a5568;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.ctdl-btn-secondary:hover {
	background-color: #e2e8f0;
}

.ctdl-btn-secondary:active {
	transform: scale(0.98);
}

.ctdl-auth-tabs {
	display: flex;
	border-bottom: 2px solid #edf2f7;
	margin-bottom: 0.5rem;
}

.ctdl-auth-tab {
	flex: 1;
	padding: 0.6rem 1rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	font-weight: 600;
	font-size: 0.95rem;
	color: #718096;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ctdl-auth-tab:hover {
	color: #3182ce;
}

.ctdl-auth-tab.active {
	color: #3182ce;
	border-bottom-color: #3182ce;
}

.ctdl-card-footer {
	text-align: center;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: #718096;
}

.ctdl-card-footer a {
	color: #3182ce;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ctdl-card-footer a:hover {
	text-decoration: underline;
}


.ctdl-ical-invite-card {
	padding: 1rem;
	margin-bottom: 1.25rem;
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}

.ctdl-ical-invite-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.ctdl-ical-invite-icon {
	font-size: 1.5rem;
	color: #16a34a;
}

.ctdl-ical-invite-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #166534;
}

.ctdl-ical-invite-details {
	margin-bottom: 1rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.ctdl-ical-invite-detail-item {
	margin-bottom: 0.25rem;
}

.ctdl-ical-invite-detail-item strong {
	color: #374151;
}

.ctdl-ical-invite-conflicts {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 0.75rem 1rem;
	background-color: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 6px;
	color: #991b1b;
}

.ctdl-ical-conflict-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: #991b1b;
}

.ctdl-ical-conflict-icon {
	color: #dc2626;
	font-size: 1.1rem;
}

.ctdl-ical-conflict-list {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.ctdl-ical-conflict-list li {
	margin-bottom: 0.2rem;
}

.ctdl-ical-invite-rsvp-status {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 0.75rem 1rem;
	background-color: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 6px;
	color: #166534;
}

.ctdl-ical-rsvp-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: #166534;
}

.ctdl-ical-rsvp-icon {
	color: #16a34a;
	font-size: 1.1rem;
}

.ctdl-ical-invite-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.75rem;
}

.ctdl-ical-btn-accept {
	padding: 0.4rem 0.8rem;
	background-color: #16a34a;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
}

.ctdl-ical-btn-accept:hover {
	background-color: #15803d;
}

.ctdl-ical-btn-tentative {
	padding: 0.4rem 0.8rem;
	background-color: #ca8a04;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
}

.ctdl-ical-btn-tentative:hover {
	background-color: #a16207;
}

.ctdl-ical-btn-decline {
	padding: 0.4rem 0.8rem;
	background-color: #dc2626;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
}

.ctdl-ical-btn-decline:hover {
	background-color: #b91c1c;
}

.ctdl-show-msg-text {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.ctdl-show-msg-text a {
	color: #2563eb;
	text-decoration: underline;
	cursor: pointer;
}

.ctdl-show-msg-text a:hover {
	color: #1d4ed8;
}

/* SMTP Queue Cards */
.ctdl-queue-container {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 900px;
	margin: 1.5rem auto;
	padding: 0 1rem 2rem 1rem;
}

.ctdl-queue-card {
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ctdl-queue-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

.ctdl-queue-card-header {
	background-color: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	padding: 0.85rem 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ctdl-queue-card-title {
	font-weight: 700;
	font-size: 1rem;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-queue-card-time {
	font-size: 0.825rem;
	color: #64748b;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ctdl-queue-card-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ctdl-queue-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #f1f5f9;
}

.ctdl-queue-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.ctdl-queue-meta-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b;
}

.ctdl-queue-meta-value {
	font-size: 0.9rem;
	color: #334155;
	font-weight: 500;
	word-break: break-all;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-queue-recipients-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ctdl-queue-recipients-heading {
	font-size: 0.825rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #475569;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-queue-recipients-list {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ctdl-queue-recipient-row {
	display: flex;
	flex-direction: column;
	background: #f8fafc;
	border-radius: 8px;
	padding: 0.6rem 0.85rem;
	border: 1px solid #f1f5f9;
}

.ctdl-queue-recipient-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}

.ctdl-queue-recipient-addr {
	font-family: monospace;
	font-size: 0.9rem;
	color: #1e293b;
	font-weight: 600;
}

.ctdl-queue-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.ctdl-queue-badge-pending {
	background-color: #f1f5f9;
	color: #475569;
}

.ctdl-queue-badge-success {
	background-color: #dcfce7;
	color: #15803d;
}

.ctdl-queue-badge-retrying {
	background-color: #fef3c7;
	color: #b45309;
}

.ctdl-queue-badge-failed {
	background-color: #fee2e2;
	color: #b91c1c;
}

.ctdl-queue-recipient-msg {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: #64748b;
	font-family: monospace;
	background: #ffffff;
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
	border: 1px solid #e2e8f0;
}

.ctdl-queue-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: #64748b;
	font-size: 1rem;
	background: #ffffff;
	border-radius: 12px;
	border: 1px dashed #cbd5e1;
}

.ctdl-queue-delete-btn {
	background-color: #ef4444;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.35rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.ctdl-queue-delete-btn:hover {
	background-color: #dc2626;
	transform: translateY(-1px);
}

.ctdl-queue-delete-btn:active {
	background-color: #b91c1c;
	transform: translateY(0);
}


/* Room Floor Management Screen Styles */
.ctdl-floor-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	width: 100%;
}

.ctdl-floor-card {
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.25rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ctdl-floor-card:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	border-color: #cbd5e0;
}

.ctdl-floor-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.ctdl-floor-card-badge {
	background-color: #ebf8ff;
	color: #2b6cb0;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	text-transform: uppercase;
}

.ctdl-floor-card-refcount {
	font-size: 0.8rem;
	color: #718096;
}

.ctdl-floor-card-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2d3748;
	margin: 0.5rem 0;
	word-break: break-word;
}

.ctdl-floor-card-input {
	width: 100%;
	padding: 0.4rem 0.6rem;
	border: 1px solid #cbd5e0;
	border-radius: 4px;
	font-size: 0.95rem;
	box-sizing: border-box;
}

.ctdl-floor-card-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.ctdl-floor-card-error {
	color: #c53030;
	background-color: #fff5f5;
	border: 1px solid #fed7d7;
	border-radius: 4px;
	padding: 0.5rem;
	font-size: 0.85rem;
	margin-top: 0.5rem;
}

.ctdl-add-floor-box {
	background-color: #f7fafc;
	border: 1px dashed #cbd5e0;
	border-radius: 8px;
	padding: 1.25rem;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

.ctdl-add-floor-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}


/* Instant Messaging / Chat Dock in Bottom Right Quadrant */
.ctdl-chat-dock {
	position: fixed;
	bottom: 0;
	right: 1.5rem;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	gap: 0.75rem;
	z-index: 100;
	pointer-events: none;
	max-width: calc(100vw - 3rem);
}

.ctdl-chat-box {
	width: 330px;
	height: 420px;
	background-color: #ffffff;
	border: 1px solid #cbd5e1;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: auto;
	transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit;
}

.ctdl-chat-box.ctdl-chat-minimized {
	height: 42px;
}

.ctdl-chat-header {
	height: 42px;
	background-color: #0f172a;
	color: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.75rem;
	cursor: pointer;
	user-select: none;
	border-bottom: 1px solid #1e293b;
	flex-shrink: 0;
}

.ctdl-chat-header-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ctdl-chat-status-dot {
	color: #22c55e;
	font-size: 0.55rem;
}

.ctdl-chat-title {
	font-weight: 600;
	font-size: 0.88rem;
	color: #f8fafc;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ctdl-chat-controls {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.ctdl-chat-btn {
	background: transparent;
	border: none;
	color: #94a3b8;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.8rem;
	transition: background-color 0.15s, color 0.15s;
	padding: 0;
}

.ctdl-chat-btn:hover {
	background-color: #334155;
	color: #ffffff;
}

.ctdl-chat-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.75rem;
	background-color: #f8fafc;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ctdl-chat-system-notice {
	align-self: center;
	font-size: 0.75rem;
	color: #64748b;
	background-color: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 0.25rem 0.65rem;
	margin-bottom: 0.25rem;
	text-align: center;
}

.ctdl-chat-msg {
	display: flex;
	flex-direction: column;
	max-width: 80%;
}

.ctdl-chat-msg-incoming {
	align-self: flex-start;
}

.ctdl-chat-msg-outgoing {
	align-self: flex-end;
}

.ctdl-chat-bubble {
	padding: 0.5rem 0.75rem;
	font-size: 0.84rem;
	line-height: 1.35;
	word-break: break-word;
}

.ctdl-chat-msg-incoming .ctdl-chat-bubble {
	background-color: #e2e8f0;
	color: #1e293b;
	border-radius: 14px 14px 14px 2px;
}

.ctdl-chat-msg-outgoing .ctdl-chat-bubble {
	background-color: #2563eb;
	color: #ffffff;
	border-radius: 14px 14px 2px 14px;
}

.ctdl-chat-msg-time {
	font-size: 0.68rem;
	color: #94a3b8;
	margin-top: 0.15rem;
	padding: 0 0.25rem;
}

.ctdl-chat-msg-incoming .ctdl-chat-msg-time {
	text-align: left;
}

.ctdl-chat-msg-outgoing .ctdl-chat-msg-time {
	text-align: right;
}

.ctdl-chat-footer {
	padding: 0.5rem 0.65rem;
	background-color: #ffffff;
	border-top: 1px solid #e2e8f0;
	display: flex;
	gap: 0.4rem;
	align-items: center;
	flex-shrink: 0;
}

.ctdl-chat-input {
	flex: 1;
	border: 1px solid #cbd5e1;
	border-radius: 18px;
	padding: 0.4rem 0.75rem;
	font-size: 0.84rem;
	outline: none;
	background-color: #f8fafc;
	font-family: inherit;
	transition: border-color 0.15s, background-color 0.15s;
}

.ctdl-chat-input:focus {
	border-color: #2563eb;
	background-color: #ffffff;
}

.ctdl-chat-send-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #2563eb;
	color: #ffffff;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.8rem;
	transition: background-color 0.15s, transform 0.1s;
	flex-shrink: 0;
}

.ctdl-chat-send-btn:hover {
	background-color: #1d4ed8;
}

.ctdl-chat-send-btn:active {
	transform: scale(0.92);
}

@media (max-width: 600px) {
	.ctdl-chat-dock {
		right: 0;
		left: 0;
		max-width: 100vw;
	}
	.ctdl-chat-box {
		width: 100vw;
		border-radius: 0;
	}
}


/* ==========================================================================
   Real-Time Chat Room View (Slack / Teams / Discord style)
   ========================================================================== */

.ctdl-cr-container {
	display: flex;
	flex-direction: row;
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
}

.ctdl-cr-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background-color: #ffffff;
}

/* Chat Room Sub-Header */
.ctdl-cr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid #e2e8f0;
	background-color: #ffffff;
	flex-shrink: 0;
}

.ctdl-cr-header-left {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.ctdl-cr-header-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-cr-header-topic {
	font-size: 0.85rem;
	color: #64748b;
	border-left: 1px solid #cbd5e1;
	padding-left: 0.6rem;
	margin-left: 0.3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ctdl-cr-header-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.ctdl-cr-header-btn {
	background: transparent;
	border: 1px solid transparent;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	color: #475569;
	cursor: pointer;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background-color 0.15s, color 0.15s;
}

.ctdl-cr-header-btn:hover {
	background-color: #f1f5f9;
	color: #0f172a;
}

.ctdl-cr-header-btn.active {
	background-color: #e2e8f0;
	color: #0f172a;
}

/* Messages Stream */
.ctdl-cr-stream {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background-color: #ffffff;
}

/* Date separator */
.ctdl-cr-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 1rem 0 0.5rem 0;
	color: #94a3b8;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ctdl-cr-divider::before,
.ctdl-cr-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #e2e8f0;
}

.ctdl-cr-divider span {
	padding: 0 0.8rem;
}

/* Message Item */
.ctdl-cr-msg {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.4rem 0.6rem;
	border-radius: 8px;
	transition: background-color 0.1s;
	position: relative;
}

.ctdl-cr-msg:hover {
	background-color: #f8fafc;
}

.ctdl-cr-msg-avatar {
	flex-shrink: 0;
	cursor: pointer;
}

.ctdl-cr-msg-avatar img,
.ctdl-cr-msg-avatar .ctdl-avatar-fallback {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
}

.ctdl-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e2e8f0;
	color: #475569;
	font-weight: 600;
	font-size: 0.95rem;
}

.ctdl-cr-msg-body-wrapper {
	flex: 1;
	min-width: 0;
}

.ctdl-cr-msg-header {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.2rem;
}

.ctdl-cr-msg-author {
	font-weight: 600;
	color: #1e293b;
	cursor: pointer;
	font-size: 0.95rem;
}

.ctdl-cr-msg-author:hover {
	text-decoration: underline;
}

.ctdl-cr-msg-badge {
	font-size: 0.68rem;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	background-color: #e0e7ff;
	color: #3730a3;
	font-weight: 600;
	text-transform: uppercase;
}

.ctdl-cr-msg-time {
	font-size: 0.75rem;
	color: #94a3b8;
}

.ctdl-cr-msg-text {
	font-size: 0.92rem;
	line-height: 1.45;
	color: #334155;
	word-break: break-word;
	white-space: pre-wrap;
}

.ctdl-cr-msg-code {
	background-color: #0f172a;
	color: #f8fafc;
	padding: 0.6rem 0.8rem;
	border-radius: 6px;
	font-family: monospace;
	font-size: 0.85rem;
	margin-top: 0.4rem;
	overflow-x: auto;
}

/* System notice message */
.ctdl-cr-system-msg {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #64748b;
	font-size: 0.82rem;
	padding: 0.2rem 0.6rem;
	font-style: italic;
}

.ctdl-cr-system-msg i {
	color: #94a3b8;
}

/* Bottom Input Area */
.ctdl-cr-input-dock {
	padding: 0.75rem 1.25rem 1rem 1.25rem;
	background-color: #ffffff;
	border-top: 1px solid #e2e8f0;
	flex-shrink: 0;
}

.ctdl-cr-input-box {
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background-color: #f8fafc;
	transition: border-color 0.15s, box-shadow 0.15s;
	display: flex;
	flex-direction: column;
	padding: 0.4rem 0.6rem;
}

.ctdl-cr-input-box:focus-within {
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
	background-color: #ffffff;
}

.ctdl-cr-input-textarea {
	width: 100%;
	min-height: 42px;
	max-height: 150px;
	resize: none;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 0.92rem;
	line-height: 1.4;
	color: #0f172a;
	padding: 0.25rem 0.4rem;
}

.ctdl-cr-input-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.25rem;
	border-top: 1px solid #f1f5f9;
}

.ctdl-cr-input-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-cr-input-toolbtn {
	background: transparent;
	border: none;
	color: #64748b;
	cursor: pointer;
	padding: 0.35rem 0.5rem;
	border-radius: 4px;
	font-size: 0.95rem;
	transition: color 0.1s, background-color 0.1s;
}

.ctdl-cr-input-toolbtn:hover {
	color: #0f172a;
	background-color: #e2e8f0;
}

.ctdl-cr-send-btn {
	background-color: #2563eb;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background-color 0.15s;
}

.ctdl-cr-send-btn:hover {
	background-color: #1d4ed8;
}

.ctdl-cr-input-hint {
	font-size: 0.72rem;
	color: #94a3b8;
	margin-top: 0.35rem;
	text-align: right;
}

/* Chatters Sidebar */
.ctdl-cr-sidebar {
	width: 240px;
	border-left: 1px solid #e2e8f0;
	background-color: #f8fafc;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex-shrink: 0;
	transition: width 0.2s, margin 0.2s;
}

.ctdl-cr-sidebar.collapsed {
	display: none;
}

.ctdl-cr-sidebar-header {
	padding: 0.85rem 1rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ctdl-cr-sidebar-list {
	list-style: none;
	padding: 0.5rem 0.6rem;
	overflow-y: auto;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ctdl-cr-user-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.6rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.12s;
}

.ctdl-cr-user-item:hover {
	background-color: #e2e8f0;
}

.ctdl-cr-user-avatar-wrap {
	position: relative;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.ctdl-cr-user-avatar-wrap img,
.ctdl-cr-user-avatar-wrap .ctdl-avatar-fallback {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.ctdl-cr-status-dot {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #22c55e;
	border: 2px solid #ffffff;
}

.ctdl-cr-user-info {
	min-width: 0;
	flex: 1;
}

.ctdl-cr-user-name {
	font-size: 0.88rem;
	font-weight: 600;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ctdl-cr-user-sub {
	font-size: 0.72rem;
	color: #64748b;
}

.ctdl-cr-history-start {
	text-align: center;
	padding: 1.5rem 1rem 0.5rem 1rem;
	color: #94a3b8;
	font-size: 0.85rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.ctdl-cr-history-start i {
	font-size: 1.6rem;
	color: #cbd5e1;
}

.ctdl-cr-history-loader {
	text-align: center;
	padding: 0.75rem;
	color: #64748b;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.ctdl-cr-history-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	margin: 0.5rem auto;
	background-color: #f1f5f9;
	color: #2563eb;
	border: 1px solid #cbd5e1;
	border-radius: 20px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, transform 0.1s;
	width: fit-content;
}

.ctdl-cr-history-banner:hover {
	background-color: #e2e8f0;
	color: #1d4ed8;
	transform: translateY(-1px);
}