.tcb-shell {
	--tcb-bg: #06080d;
	--tcb-panel: #101826;
	--tcb-panel-2: #0b111b;
	--tcb-line: #172033;
	--tcb-red: #9f1d26;
	--tcb-text: #eef4ff;
	--tcb-muted: #91a0b8;
	--tcb-green: #75ff9f;
	background: var(--tcb-bg);
	border: 2px solid #293247;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
	color: var(--tcb-text);
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.35;
	width: 100%;
	max-width: var(--tcb-max-width, 1320px);
	min-height: 600px;
	margin: 8px auto;
	overflow: hidden;
}

.tcb-shell[data-theme="light"] {
	--tcb-bg: #e9edf5;
	--tcb-panel: #ffffff;
	--tcb-panel-2: #dfe6f1;
	--tcb-line: #c9d4e5;
	--tcb-text: #111827;
	--tcb-muted: #3f4b5f;
}

.tcb-topline,
.tcb-topic,
.tcb-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
}

.tcb-topline {
	background: linear-gradient(#172238, #0d1422);
	border-bottom: 1px solid #31405b;
	text-transform: uppercase;
}

.tcb-brand {
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0;
}

.tcb-domain,
.tcb-session,
.tcb-time,
.tcb-user small {
	color: var(--tcb-muted);
}

.tcb-topic {
	background: var(--tcb-red, #9f1d26);
	border-bottom: 1px solid #e26a6a;
	color: #fff;
	font-weight: 700;
	min-height: 34px;
}

.tcb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	min-height: calc(var(--tcb-chat-height, 720px) - 116px);
}

.tcb-main {
	display: grid;
	grid-template-rows: 1fr auto;
	min-width: 0;
}

.tcb-messages {
	background: repeating-linear-gradient(0deg, var(--tcb-panel-2), var(--tcb-panel-2) 23px, rgba(255,255,255,.025) 24px);
	height: calc(var(--tcb-chat-height, 720px) - 295px);
	overflow-y: auto;
	padding: 6px 8px;
	scrollbar-color: #57647d #090d15;
}

.tcb-line {
	border-bottom: 1px dotted rgba(255, 255, 255, .09);
	min-height: 24px;
	padding: 3px 0;
	word-break: break-word;
}

.tcb-time {
	display: inline-block;
	min-width: 42px;
	font-size: 11px;
}

.tcb-name {
	color: var(--tcb-green);
	font-weight: 700;
}

.tcb-name-male { color: #66d9ff !important; }
.tcb-name-female { color: #ff8fcf !important; }
.tcb-name-other { color: #ffffff !important; }

.tcb-system,
.tcb-action {
	color: #ffd166;
	font-style: italic;
}

.tcb-youtube {
	background: #2b1114;
	border: 1px solid #d73a49;
	color: #fff;
	display: inline-block;
	margin: 2px 0;
	padding: 2px 6px;
}

.tcb-smiley-img {
	max-height: 20px;
	vertical-align: middle;
}

.tcb-inputbar {
	background: var(--tcb-panel);
	border-top: 1px solid #31405b;
	display: grid;
	grid-template-columns: 1fr 76px;
	gap: 8px;
	padding: 7px;
}

.tcb-private {
	background: var(--tcb-panel-2);
	border-top: 3px solid #f8f9fa;
	min-height: 164px;
}

.tcb-private[hidden] {
	display: none;
}

.tcb-private-tabs {
	background: #02040a;
	border-bottom: 1px solid #31405b;
	display: flex;
	gap: 4px;
	min-height: 28px;
	padding: 4px 8px 0;
}

.tcb-private-tab {
	background: #111827;
	border: 1px solid #f8f9fa;
	border-bottom: 0;
	color: #fff;
	font: inherit;
	min-height: 24px;
	padding: 2px 8px;
}

.tcb-private-tab.is-active {
	background: #20264a;
}

.tcb-private-tab.is-unread::after {
	content: " *";
	color: #ffd166;
}

.tcb-private-close-tab {
	margin-left: 6px;
}

.tcb-private-messages {
	height: 96px;
	overflow-y: auto;
	padding: 4px 8px;
}

.tcb-private-line {
	border-bottom: 1px dotted rgba(255,255,255,.08);
	min-height: 20px;
	padding: 2px 0;
}

.tcb-private-inputbar {
	background: var(--tcb-panel);
	border-top: 1px solid #31405b;
	display: grid;
	grid-template-columns: 1fr 76px 92px;
	gap: 6px;
	padding: 6px 8px;
}

.tcb-inputbar input,
.tcb-inputbar button,
.tcb-private-inputbar input,
.tcb-private-inputbar button,
.tcb-actions button,
.tcb-tabs button,
.tcb-list-button,
.tcb-user,
.tcb-icon-btn,
.tcb-smiley-palette button,
.tcb-login-button,
.tcb-auth-form button,
.tcb-auth-section input[type="submit"] {
	background: #111827;
	border: 1px solid #5f6d86;
	border-radius: 6px;
	color: #fff;
	font: inherit;
	min-height: 32px;
	padding: 5px 8px;
	text-decoration: none;
}

.tcb-inputbar input {
	background: #05070b;
	caret-color: #fff;
	color: #fff;
	outline: none;
}

.tcb-private-inputbar input {
	background: #05070b;
	caret-color: #fff;
	color: #fff;
	outline: none;
}

.tcb-inputbar input::placeholder,
.tcb-private-inputbar input::placeholder {
	color: #b8c0cc;
}

.tcb-inputbar input::selection,
.tcb-private-inputbar input::selection {
	background: #d8e6ff;
	color: #05070b;
}

.tcb-sidebar {
	background: var(--tcb-panel);
	border-left: 1px solid #31405b;
	min-width: 0;
}

.tcb-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.tcb-tabs button {
	border-left: 0;
	border-right: 1px solid #344258;
	border-top: 0;
}

.tcb-tabs .is-active,
.tcb-list-button.is-active {
	background: var(--tcb-red, #9f1d26);
}

.tcb-tab {
	display: none;
	max-height: calc(var(--tcb-chat-height, 720px) - 222px);
	overflow-y: auto;
	padding: 6px;
}

.tcb-tab.is-active {
	display: block;
}

.tcb-list-button,
.tcb-user {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	text-align: left;
	width: 100%;
}

.tcb-rank {
	margin-right: 6px;
}

.tcb-name-wrap,
.tcb-role-icon,
.tcb-gender-icon {
	align-items: center;
	display: inline-flex;
	vertical-align: middle;
}

.tcb-role-icon {
	margin-right: 3px;
	max-height: 16px;
	max-width: 16px;
}

.tcb-gender-icon {
	border: 1px solid #5f6d86;
	color: #ffd166;
	font-size: 10px;
	justify-content: center;
	line-height: 1;
	margin-right: 3px;
	min-width: 13px;
}

.tcb-alias-box {
	display: grid;
	gap: 6px;
	margin-top: 10px;
}

.tcb-actions {
	background: #080c14;
	border-top: 1px solid #31405b;
	flex-wrap: wrap;
	justify-content: center;
}

.tcb-actions button {
	min-width: 92px;
	text-transform: uppercase;
}

.tcb-actions button,
.tcb-login-button,
.tcb-auth-form button,
.tcb-auth-section input[type="submit"],
.tcb-modal-actions .tcb-login-button {
	background: var(--tcb-red, #9f1d26);
	color: #fff;
}

.tcb-actions button:hover,
.tcb-actions button:focus,
.tcb-login-button:hover,
.tcb-login-button:focus,
.tcb-auth-form button:hover,
.tcb-auth-form button:focus,
.tcb-auth-section input[type="submit"]:hover,
.tcb-auth-section input[type="submit"]:focus,
.tcb-modal-actions .tcb-login-button:hover,
.tcb-modal-actions .tcb-login-button:focus {
	background: #7f1720;
	color: #fff;
}

.tcb-actions button:disabled,
.tcb-actions button.is-disabled {
	cursor: pointer;
	opacity: .85;
}

.tcb-smiley-palette {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
	margin-bottom: 12px;
}

.tcb-toggle {
	display: block;
	color: var(--tcb-muted);
}

.tcb-login-note {
	--tcb-red: #9f1d26;
	background: #101826;
	border: 2px solid #293247;
	color: #eef4ff;
	margin: 20px auto;
	max-width: 520px;
	padding: 18px;
}

.tcb-shell.is-fullwidth {
	max-width: none;
	width: 100%;
}

.tcb-auth-block {
	display: grid;
	gap: 0;
}

.tcb-auth-section {
	display: none;
	border-top: 1px solid #31405b;
	padding-top: 10px;
}

.tcb-auth-section.is-active {
	display: block;
}

.tcb-auth-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 10px;
}

.tcb-auth-tabs button {
	background: #111827;
	border: 1px solid #5f6d86;
	border-radius: 6px;
	color: #fff;
	font: inherit;
	min-height: 32px;
	padding: 5px 8px;
}

.tcb-auth-tabs button.is-active,
.tcb-auth-tab.is-active,
.tcb-auth-tab[aria-selected="true"] {
	background: var(--tcb-red, #9f1d26);
	color: #fff;
}

.tcb-auth-tabs button.is-active:hover,
.tcb-auth-tabs button.is-active:focus,
.tcb-auth-tab[aria-selected="true"]:hover,
.tcb-auth-tab[aria-selected="true"]:focus {
	background: #7f1720;
	color: #fff;
}

.tcb-auth-section h3 {
	color: #fff;
	font-size: 14px;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.tcb-auth-form label,
.tcb-auth-section .login-username,
.tcb-auth-section .login-password {
	display: block;
	margin: 0 0 8px;
}

.tcb-auth-form span,
.tcb-auth-section label {
	color: var(--tcb-muted);
	display: block;
	margin-bottom: 3px;
}

.tcb-auth-form input,
.tcb-auth-form select,
.tcb-auth-section input[type="text"],
.tcb-auth-section input[type="password"],
.tcb-alias-box input,
.tcb-alias-box select,
.tcb-alias-box button {
	background: #05070b;
	border: 1px solid #5f6d86;
	border-radius: 6px;
	color: var(--tcb-text);
	font: inherit;
	min-height: 32px;
	padding: 5px 8px;
	width: 100%;
}

.tcb-form-notice {
	color: #ffd166;
	margin: 0 0 8px;
}

.tcb-auth-link {
	background: transparent;
	border: 0;
	color: #ffd166;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

.tcb-auth-link:hover,
.tcb-auth-link:focus {
	background: transparent;
	color: #fff;
}

.tcb-register-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 10px;
}

.tcb-register-form .tcb-form-notice,
.tcb-register-form button {
	grid-column: 1 / -1;
}

.tcb-login-note,
.tcb-auth-block,
.tcb-modal-panel,
.tcb-user-menu {
	background: #05092a;
	border: 2px solid #b8c4d6;
	color: #fff;
}

.tcb-auth-block {
	max-width: 520px;
	margin: 0 auto;
	padding: 8px;
}

.tcb-auth-section {
	border: 1px solid #b8c4d6;
	border-top: 0;
	padding: 8px;
}

.tcb-auth-section h3,
.tcb-modal-title {
	background: var(--tcb-red, #9f1d26);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	margin: -8px -8px 8px;
	padding: 5px 8px;
}

.tcb-form-notice.is-error {
	color: #ff8f8f;
}

.tcb-modal[hidden],
.tcb-user-menu[hidden] {
	display: none;
}

.tcb-modal {
	align-items: center;
	background: rgba(0, 0, 0, .55);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 9999;
}

.tcb-modal-panel {
	max-width: 420px;
	padding: 8px;
	width: calc(100vw - 32px);
}

.tcb-modal-actions {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 1fr;
}

.tcb-user-menu {
	display: grid;
	gap: 5px;
	margin-top: 8px;
	padding: 6px;
}

.tcb-user-menu strong {
	background: var(--tcb-red, #9f1d26);
	display: block;
	margin: -6px -6px 3px;
	padding: 4px 6px;
}

.tcb-user-menu button {
	background: #111827;
	border: 1px solid #b8c4d6;
	border-radius: 6px;
	color: #fff;
	font: inherit;
	min-height: 28px;
}

.tcb-user-menu button.is-danger {
	color: #ffd166;
}

.tcb-premium-panel {
	border: 1px solid #b8c4d6;
	display: grid;
	gap: 5px;
	padding: 6px;
}

.tcb-premium-panel[hidden] {
	display: none;
}

.tcb-premium-panel strong {
	color: #fff;
}

.tcb-premium-panel small,
.tcb-premium-panel span {
	color: var(--tcb-muted);
	display: block;
}

.tcb-premium-package {
	border-top: 1px dotted #5f6d86;
	display: grid;
	gap: 4px;
	padding-top: 6px;
}

.tcb-premium-package button {
	background: #111827;
	border: 1px solid #b8c4d6;
	border-radius: 6px;
	color: #fff;
	font: inherit;
	min-height: 28px;
}

.tcb-shell[data-theme="light"] .tcb-messages {
	background: #f8fafc;
	scrollbar-color: #7c8799 #d7deea;
}

.tcb-shell[data-theme="light"] .tcb-line,
.tcb-shell[data-theme="light"] .tcb-private-line {
	border-bottom-color: rgba(17, 24, 39, .16);
	color: #111827;
}

.tcb-shell[data-theme="light"] .tcb-time,
.tcb-shell[data-theme="light"] .tcb-user small,
.tcb-shell[data-theme="light"] .tcb-toggle,
.tcb-shell[data-theme="light"] .tcb-premium-panel small,
.tcb-shell[data-theme="light"] .tcb-premium-panel span {
	color: #334155;
}

.tcb-shell[data-theme="light"] .tcb-name {
	color: #047857;
}

.tcb-shell[data-theme="light"] .tcb-name-male { color: #0369a1 !important; }
.tcb-shell[data-theme="light"] .tcb-name-female { color: #be185d !important; }
.tcb-shell[data-theme="light"] .tcb-name-other { color: #111827 !important; }

.tcb-shell[data-theme="light"] .tcb-system,
.tcb-shell[data-theme="light"] .tcb-action,
.tcb-shell[data-theme="light"] .tcb-form-notice {
	color: #8a4b00;
}

.tcb-shell[data-theme="light"] .tcb-inputbar input,
.tcb-shell[data-theme="light"] .tcb-private-inputbar input,
.tcb-shell[data-theme="light"] .tcb-auth-form input,
.tcb-shell[data-theme="light"] .tcb-auth-form select,
.tcb-shell[data-theme="light"] .tcb-auth-section input[type="text"],
.tcb-shell[data-theme="light"] .tcb-auth-section input[type="password"],
.tcb-shell[data-theme="light"] .tcb-alias-box input,
.tcb-shell[data-theme="light"] .tcb-alias-box select {
	background: #ffffff;
	color: #111827;
}

.tcb-shell[data-theme="light"] input::placeholder {
	color: #64748b;
}

.tcb-shell[data-theme="light"] .tcb-list-button,
.tcb-shell[data-theme="light"] .tcb-user,
.tcb-shell[data-theme="light"] .tcb-tabs button,
.tcb-shell[data-theme="light"] .tcb-smiley-palette button,
.tcb-shell[data-theme="light"] .tcb-premium-package button {
	background: #edf2f7;
	color: #111827;
}

.tcb-shell[data-theme="light"] .tcb-tabs .is-active,
.tcb-shell[data-theme="light"] .tcb-list-button.is-active,
.tcb-login-note[data-theme="light"] .tcb-auth-tab.is-active,
.tcb-login-note[data-theme="light"] .tcb-auth-tab[aria-selected="true"] {
	background: var(--tcb-red, #9f1d26);
	color: #ffffff;
}

.tcb-shell[data-theme="light"] .tcb-private,
.tcb-shell[data-theme="light"] .tcb-private-tabs,
.tcb-shell[data-theme="light"] .tcb-private-messages {
	background: #f8fafc;
	color: #111827;
}

.tcb-shell[data-theme="light"] .tcb-private-tab {
	background: #e2e8f0;
	color: #111827;
}

.tcb-shell[data-theme="light"] .tcb-private-tab.is-active {
	background: #cbd5e1;
	color: #111827;
}

.tcb-shell[data-theme="light"] .tcb-modal-panel,
.tcb-shell[data-theme="light"] .tcb-user-menu,
.tcb-shell[data-theme="light"] .tcb-premium-panel {
	background: #ffffff;
	color: #111827;
}

.tcb-shell[data-theme="light"] .tcb-premium-panel strong {
	color: #111827;
}

.tcb-login-note[data-theme="light"],
.tcb-login-note[data-theme="light"] .tcb-auth-block,
.tcb-login-note[data-theme="light"] .tcb-auth-section {
	background: #ffffff;
	color: #111827;
}

.tcb-login-note[data-theme="light"] .tcb-auth-form span,
.tcb-login-note[data-theme="light"] .tcb-auth-section label {
	color: #334155;
}

.tcb-login-note[data-theme="light"] .tcb-auth-form input,
.tcb-login-note[data-theme="light"] .tcb-auth-form select,
.tcb-login-note[data-theme="light"] .tcb-auth-section input[type="text"],
.tcb-login-note[data-theme="light"] .tcb-auth-section input[type="password"] {
	background: #ffffff;
	color: #111827;
}

.tcb-shell[data-theme="light"] .tcb-user-menu button {
	background: #edf2f7;
	color: #111827;
}

.tcb-shell[data-theme="light"] .tcb-color-white { color: #1f2937 !important; }
.tcb-shell[data-theme="light"] .tcb-color-yellow { color: #8a4b00 !important; }
.tcb-shell[data-theme="light"] .tcb-color-gold-yellow { color: #946200 !important; }
.tcb-shell[data-theme="light"] .tcb-color-light-pink { color: #be185d !important; }
.tcb-shell[data-theme="light"] .tcb-color-light-blue,
.tcb-shell[data-theme="light"] .tcb-color-babyblue,
.tcb-shell[data-theme="light"] .tcb-color-babyblue-2 { color: #0369a1 !important; }
.tcb-shell[data-theme="light"] .tcb-color-bright-green,
.tcb-shell[data-theme="light"] .tcb-color-green-yellow { color: #3f7d00 !important; }
.tcb-shell[data-theme="light"] .tcb-text.tcb-color-red-white-blue {
	background: none;
	color: #1d4ed8 !important;
	text-shadow: -1px 0 #b91c1c, 0 0 1px #ffffff;
}

.tcb-shell .tcb-inputbar input,
.tcb-shell .tcb-private-inputbar input,
.tcb-shell .tcb-message-input,
.tcb-shell .tcb-private-message-input,
.tcb-shell .tcb-inputbar textarea,
.tcb-shell .tcb-private-inputbar textarea {
	color: #ffffff !important;
}

.tcb-color-red { color: #ff1b1b !important; }
.tcb-color-green { color: #00ff00 !important; }
.tcb-color-yellow { color: #ffff00 !important; }
.tcb-color-orange { color: #ff9900 !important; }
.tcb-color-bright-green { color: #7fff00 !important; }
.tcb-color-light-blue { color: #00ffff !important; }
.tcb-color-white { color: #ffffff !important; }
.tcb-color-purple { color: #d38cff !important; }
.tcb-color-hot-pink { color: #ff00cc !important; }
.tcb-color-light-pink { color: #ff8fcf !important; }
.tcb-color-rose { color: #ff72d7 !important; }
.tcb-color-gold-yellow { color: #ffd700 !important; }
.tcb-color-orange-2 { color: #ff7a00 !important; }
.tcb-color-rose-2 { color: #ff5ab3 !important; }
.tcb-color-green-yellow { color: #adff2f !important; }
.tcb-color-babyblue { color: #9ddcff !important; }
.tcb-color-babyblue-2 { color: #66d9ff !important; }
.tcb-color-red-white-blue {
	color: #66d9ff !important;
	text-shadow: -1px 0 #ff1b1b, 0 0 1px #ffffff;
}

.tcb-text.tcb-color-red-white-blue {
	background: linear-gradient(90deg, #ff1b1b 0 32%, #ffffff 33% 66%, #66d9ff 67% 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	text-shadow: none;
}

@media (max-width: 760px) {
	.tcb-shell {
		margin: 0;
		min-height: 100vh;
	}

	.tcb-layout {
		display: block;
		position: relative;
	}

	.tcb-messages {
		height: calc(100vh - 210px);
		min-height: 360px;
	}

	.tcb-sidebar {
		border: 1px solid #31405b;
		box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
		display: none;
		position: absolute;
		right: 8px;
		top: 8px;
		width: min(310px, calc(100vw - 16px));
		z-index: 5;
	}

	.tcb-sidebar.is-open {
		display: block;
	}

	.tcb-inputbar {
		grid-template-columns: 1fr 64px;
	}

	.tcb-private-inputbar {
		grid-template-columns: 1fr;
	}

	.tcb-actions button {
		flex: 1 1 30%;
		min-width: 0;
	}

	.tcb-register-form,
	.tcb-auth-tabs {
		grid-template-columns: 1fr;
	}
}