From 20b19c474c9e6e80ddd23caad109feebd8a60410 Mon Sep 17 00:00:00 2001
From: stonedDiscord <Tukz@gmx.de>
Date: Wed, 7 Dec 2022 20:46:45 +0100
Subject: remove chat from chatbox names

---
 public/client.html                  |  12 ++--
 webAO/styles/chatbox/999.css        | 128 +++++++++++++++++++++++++++++++++
 webAO/styles/chatbox/chat999.css    | 128 ---------------------------------
 webAO/styles/chatbox/chatboxes.js   |  12 ++--
 webAO/styles/chatbox/chatdd.css     | 111 -----------------------------
 webAO/styles/chatbox/chatdr2.css    | 127 ---------------------------------
 webAO/styles/chatbox/chatfuture.css | 137 ------------------------------------
 webAO/styles/chatbox/chatp3.css     | 117 ------------------------------
 webAO/styles/chatbox/chatplvsaa.css | 113 -----------------------------
 webAO/styles/chatbox/dd.css         | 111 +++++++++++++++++++++++++++++
 webAO/styles/chatbox/dr2.css        | 127 +++++++++++++++++++++++++++++++++
 webAO/styles/chatbox/future.css     | 137 ++++++++++++++++++++++++++++++++++++
 webAO/styles/chatbox/p3.css         | 117 ++++++++++++++++++++++++++++++
 webAO/styles/chatbox/plvsaa.css     | 113 +++++++++++++++++++++++++++++
 14 files changed, 745 insertions(+), 745 deletions(-)
 create mode 100644 webAO/styles/chatbox/999.css
 delete mode 100644 webAO/styles/chatbox/chat999.css
 delete mode 100644 webAO/styles/chatbox/chatdd.css
 delete mode 100644 webAO/styles/chatbox/chatdr2.css
 delete mode 100644 webAO/styles/chatbox/chatfuture.css
 delete mode 100644 webAO/styles/chatbox/chatp3.css
 delete mode 100644 webAO/styles/chatbox/chatplvsaa.css
 create mode 100644 webAO/styles/chatbox/dd.css
 create mode 100644 webAO/styles/chatbox/dr2.css
 create mode 100644 webAO/styles/chatbox/future.css
 create mode 100644 webAO/styles/chatbox/p3.css
 create mode 100644 webAO/styles/chatbox/plvsaa.css

diff --git a/public/client.html b/public/client.html
index 9f9510a..3f45793 100644
--- a/public/client.html
+++ b/public/client.html
@@ -488,16 +488,16 @@
 			<select id="client_chatboxselect" name="client_chatboxselect" onchange="setChatbox(this.value)">
 				<option value="dynamic" selected>Use characters</option>
 				<option value="aa">AA</option>
-				<option value="chatdd">DD / SoJ</option>
+				<option value="dd">DD / SoJ</option>
 				<option value="dgs">DGS</option>
-				<option value="chatplvsaa">PL vs AA</option>
+				<option value="plvsaa">PL vs AA</option>
 				<option value="trilogy">Trilogy</option>
-				<option value="chatfuture">Future theme</option>
+				<option value="future">Future theme</option>
 				<option value="legacy">old webAO</option>
-				<option value="chat999">999</option>
+				<option value="999">999</option>
 				<option value="acww">Animal Crossing</option>
 				<option value="dr1">DR 1</option>
-				<option value="chatdr2">DR 2</option>
+				<option value="dr2">DR 2</option>
 				<option value="drv3">DR 3</option>
 				<option value="drae">DR: AE</option>
 				<option value="ddlc">DDLC</option>
@@ -505,7 +505,7 @@
 				<option value="key">Key</option>
 				<option value="n64zelda">N64 Zelda</option>
 				<option value="papermario">Paper Mario</option>
-				<option value="chatp3">Persona 3</option>
+				<option value="p3">Persona 3</option>
 				<option value="p4">Persona 4</option>
 				<option value="p5">Persona 5</option>
 				<option value="halla">VA-11 HALL-A</option>
diff --git a/webAO/styles/chatbox/999.css b/webAO/styles/chatbox/999.css
new file mode 100644
index 0000000..de20d28
--- /dev/null
+++ b/webAO/styles/chatbox/999.css
@@ -0,0 +1,128 @@
+.text_white {
+	color: #fff;
+}
+
+.text_blue {
+	color: #6bc6f7;
+}
+
+.text_green {
+	color: #00f700;
+}
+
+.text_red {
+	color: #f00;
+}
+
+.text_orange {
+	color: #f77339;
+}
+
+.text_yellow {
+	color: #ff0;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+.text_grey {
+	color: #bbb;
+}
+
+#client_chatcontainer {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 42%;
+	width: 100%;
+	text-shadow: -1px -1px 0 #525252, 1px -1px 0 #525252, -1px 1px 0 #525252, 1px 1px 0 #525252;
+}
+
+#client_name {
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 0;
+	height: 27%;
+	min-width: 3.25em;	
+	background: rgba(0, 0, 0, 0.5);
+	padding: 0 2%;
+	border-color: #fff;
+	border-style: ridge;
+	border-width: 0.2em;
+	border-radius: 0.1em;	
+	z-index: 1;
+}
+
+#client_inner_name {
+	text-justify: distribute;
+	letter-spacing: 0.075em;
+	margin: 0;
+	line-height: 2;
+}
+
+#client_chat {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 98%;
+	width: calc(100% - 0.27em);
+	height: 60%;
+	margin: auto;
+	border-color: #fff;
+	border-style: ridge;
+	border-width: 0.15em;
+	border-radius: 0.1em;
+	background-color: rgba(0, 0, 0, 0.5);
+	font-size: 2em;
+	word-break: keep-all;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_inner_chat {
+	padding: 1% 3.13%;
+	margin: 1px;
+	line-height: 97%;
+	letter-spacing: 0.05em;
+	word-spacing: 0.3em;
+}
+
+#client_chatwaiting {
+	display: none;
+	transform: rotate(90deg);
+	line-height: 0.5;
+	color: #28599a;
+	animation: idling 0.4s linear infinite;
+}
+
+@keyframes idling {
+	0% {
+		right: 0;
+	}
+
+	50% {
+		right: 2%;
+	}
+
+	100% {
+		right: 0;
+	}
+}
+
+#client_trackstatus {
+	display: none;
+}
+
+#client_clock {
+	display: none;
+}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/chat999.css b/webAO/styles/chatbox/chat999.css
deleted file mode 100644
index de20d28..0000000
--- a/webAO/styles/chatbox/chat999.css
+++ /dev/null
@@ -1,128 +0,0 @@
-.text_white {
-	color: #fff;
-}
-
-.text_blue {
-	color: #6bc6f7;
-}
-
-.text_green {
-	color: #00f700;
-}
-
-.text_red {
-	color: #f00;
-}
-
-.text_orange {
-	color: #f77339;
-}
-
-.text_yellow {
-	color: #ff0;
-}
-
-.text_pink {
-	color: #ffc0cb;
-}
-
-.text_cyan {
-	color: #0ff;
-}
-
-.text_grey {
-	color: #bbb;
-}
-
-#client_chatcontainer {
-	display: block;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 42%;
-	width: 100%;
-	text-shadow: -1px -1px 0 #525252, 1px -1px 0 #525252, -1px 1px 0 #525252, 1px 1px 0 #525252;
-}
-
-#client_name {
-	display: block;
-	position: absolute;
-	right: 0;
-	top: 0;
-	height: 27%;
-	min-width: 3.25em;	
-	background: rgba(0, 0, 0, 0.5);
-	padding: 0 2%;
-	border-color: #fff;
-	border-style: ridge;
-	border-width: 0.2em;
-	border-radius: 0.1em;	
-	z-index: 1;
-}
-
-#client_inner_name {
-	text-justify: distribute;
-	letter-spacing: 0.075em;
-	margin: 0;
-	line-height: 2;
-}
-
-#client_chat {
-	display: block;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 98%;
-	width: calc(100% - 0.27em);
-	height: 60%;
-	margin: auto;
-	border-color: #fff;
-	border-style: ridge;
-	border-width: 0.15em;
-	border-radius: 0.1em;
-	background-color: rgba(0, 0, 0, 0.5);
-	font-size: 2em;
-	word-break: keep-all;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-	scroll-behavior: smooth;
-}
-
-#client_inner_chat {
-	padding: 1% 3.13%;
-	margin: 1px;
-	line-height: 97%;
-	letter-spacing: 0.05em;
-	word-spacing: 0.3em;
-}
-
-#client_chatwaiting {
-	display: none;
-	transform: rotate(90deg);
-	line-height: 0.5;
-	color: #28599a;
-	animation: idling 0.4s linear infinite;
-}
-
-@keyframes idling {
-	0% {
-		right: 0;
-	}
-
-	50% {
-		right: 2%;
-	}
-
-	100% {
-		right: 0;
-	}
-}
-
-#client_trackstatus {
-	display: none;
-}
-
-#client_clock {
-	display: none;
-}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js
index 0e0367f..bc73109 100644
--- a/webAO/styles/chatbox/chatboxes.js
+++ b/webAO/styles/chatbox/chatboxes.js
@@ -1,21 +1,21 @@
 export default [
   'aa',
   'acww',
-  'chatdd',
+  'dd',
   'dgs',
-  'chatplvsaa',
+  'plvsaa',
   'trilogy',
-  'chatfuture',
+  'future',
   'legacy',
   'ddlc',
   'dr1',
-  'chatdr2',
+  'dr2',
   'drv3',
   'drae',
-  'chatp3',
+  'p3',
   'p4',
   'p5',
-  'chat999',
+  '999',
   'halla',
   'homestuck',
   'key',
diff --git a/webAO/styles/chatbox/chatdd.css b/webAO/styles/chatbox/chatdd.css
deleted file mode 100644
index d1561a4..0000000
--- a/webAO/styles/chatbox/chatdd.css
+++ /dev/null
@@ -1,111 +0,0 @@
-.text_white {
-	color: #fff;
-}
-
-.text_blue {
-	color: #18cbef;
-}
-
-.text_green {
-	color: #84fb08;
-}
-
-.text_red {
-	color: #e1522a;
-}
-
-.text_orange {
-	color: #f76918;
-}
-
-.text_yellow {
-	color: #fef9ad;
-}
-
-.text_pink {
-	color: #ffc0cb;
-}
-
-.text_cyan {
-	color: #0ff;
-}
-
-.text_grey {
-	color: #bbb;
-}
-
-#client_chatcontainer {
-	position: absolute;
-	bottom: 0;
-	height: 27%;
-    width: 100%;
-    font-family: sans-serif;
-	background-image: url("dd.svg");
-	background-size: cover;
- 	background-repeat: no-repeat;
-}
-
-#client_name {
-	display: block;
-	top: 0;
-	padding: 0 10px;
-	height: 22%;
-	position: absolute;
-}
-
-#client_inner_name {
-	margin: 0;
-	padding: 5% 0;
-}
-
-#client_chat {
-	font-size: 1em;
-	display: block;
-	width: 100%;
-	margin: auto;
-	height: 75%;
-	bottom: 0;
-	position: absolute;
-	word-break: keep-all;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-	scroll-behavior: smooth;
-}
-
-#client_inner_chat {
-	padding: 1% 3%;
-	margin: 0;
-}
-
-#client_chatwaiting {
-	display: block;
-	right: 1em;
-	bottom: 0.6em;
-	width: 1em;
-	position: absolute;
-	animation: idling 1s linear infinite;
-}
-
-@keyframes idling {
-	0% {
-		right: 0;
-	}
-
-	50% {
-		right: 2%;
-	}
-
-	100% {
-		right: 0;
-	}
-}
-
-#client_trackstatus {
-	display: none;
-}
-
-#client_clock {
-	display: none;
-}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/chatdr2.css b/webAO/styles/chatbox/chatdr2.css
deleted file mode 100644
index 59b11dc..0000000
--- a/webAO/styles/chatbox/chatdr2.css
+++ /dev/null
@@ -1,127 +0,0 @@
-.text_white {
-	color: #fff;
-}
-
-.text_blue {
-	color: #6be4fb;
-}
-
-.text_green {
-	color: #63ff3d;
-}
-
-.text_red {
-	color: #f00;
-}
-
-.text_orange {
-	color: #fc0;
-}
-
-.text_yellow {
-	color: #ffe700;
-}
-
-.text_pink {
-	color: #ffc0cb;
-}
-
-.text_cyan {
-	color: #6be4fb;
-}
-
-.text_grey {
-	color: #bbb;
-}
-
-#client_chatcontainer {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	bottom: 0;
-	left: 0;
-    font-family: sans-serif;
-}
-
-#client_name {
-    display: block;
-	position: absolute;
-	height: 100%;
-	width: 7%;
-	text-align: left;
-    color: #3d3c3f;
-    font-weight: bold;
-    background-image: linear-gradient(to top,#fe9500,#fee303,transparent);
-	border-right: 0.3em solid #dfd8b8;
-	box-shadow: 0.3em 0px 0 #ff9700;
-	left: 0;
-    bottom: 0;
-}
-
-#client_inner_name {
-	padding: 0;
-	margin: 0;
-	transform: rotate(180deg);
-    writing-mode: vertical-rl;    
-    bottom: 25%;
-    right: 0;
-    position: absolute;
-}
-
-#client_chat {
-	font-size: 1em;
-	display: block;
-	width: 91%;
-	margin: auto;
-	height: 25%;
-    border-top: 0.1em solid white;    
-	bottom: 0;
-    right: 0;
-    background-image: linear-gradient(to right, rgba(0,0,0,0.4), black);
-	position: absolute;
-	word-break: keep-all;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-    scroll-behavior: smooth;
-    z-index: 3;
-}
-
-#client_inner_chat {
-    position: absolute;
-	padding: 2% 4%;
-	margin: 0;
-    line-height: 97%;
-    z-index: 4;
-}
-
-#client_chatwaiting {
-	display: none;
-}
-
-#client_trackstatus {
-	display: block;
-	position: absolute;
-	width: 30%;
-	height: 35%;
-	top: 0;
-	left: 0;
-	background-image: url("music_dr2.svg");
-	background-size: contain;
-    background-repeat: no-repeat;
-}
-
-#client_trackstatustext {
-	position: absolute;
-	top: 6%;
-	left: 25%;
-	width: 50%;
-	color: #f84f00;
-    font-family: monospace;
-	font-size: 1.2em;
-	white-space: nowrap;
-}
-
-#client_trackstatus {
-	display: fuck;
-}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/chatfuture.css b/webAO/styles/chatbox/chatfuture.css
deleted file mode 100644
index cd638f4..0000000
--- a/webAO/styles/chatbox/chatfuture.css
+++ /dev/null
@@ -1,137 +0,0 @@
-.text_white {
-	color: #fff;
-}
-
-.text_blue {
-	color: #6bc6f7;
-}
-
-.text_green {
-	color: #00f700;
-}
-
-.text_red {
-	color: #f00;
-}
-
-.text_orange {
-	color: #f77339;
-}
-
-.text_yellow {
-	color: #ff0;
-}
-
-.text_pink {
-	color: #ffc0cb;
-}
-
-.text_cyan {
-	color: #0ff;
-}
-
-.text_grey {
-	color: #bbb;
-}
-
-@font-face {
-	font-family:'Igiari Cyrillic';
-		src: url('../igiari/igiari-cyrillic.ttf');
-	font-weight:normal;
-	font-style:normal;
-}
-
-#client_chatcontainer {
-	display: block;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 40%;
-	width: 100%;
-	filter: none;
-	font-family: "Igiari Cyrillic", "MS PGothic", "MS UI Gothic", "MS Sans Serif", "Hiragino Maru Gothic Pro", "Mitra Mono", "Mukti Narrow", "Meera", "Khmer OS", "FreeSans", "Gargi", sans-serif;
-}
-
-#client_name {
-	display: block;
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 15%;
-	min-width: 3.25em;	
-	background: linear-gradient(to bottom, #1e6169, #0f2f32);
-	padding: 0 2%;
-	border-color: #217aff;
-	border-style: ridge groove groove ridge;
-	border-width: 0.2em;
-	border-radius: 0.2em;	
-	z-index: 1;
-}
-
-#client_inner_name {
-	text-justify: distribute;
-	letter-spacing: 0.075em;
-	margin: 0;
-	font-weight: bold;
-}
-
-#client_chat {
-	display: block;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 98%;
-	width: calc(100% - 0.27em);
-	height: 78%;
-	margin: auto;
-	border-color: #59f0fc;
-	border-style: ridge groove groove ridge;
-	border-width: 0.15em;
-	border-radius: 0.3em;
-	background: linear-gradient(to bottom, rgba(0,0,0,0.7),rgba(0,0,137,0.7));
-	font-size: 2em;
-	word-break: keep-all;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-	scroll-behavior: smooth;
-}
-
-#client_inner_chat {
-	padding: 1% 3.13%;
-	margin: 1px;
-	line-height: 97%;
-	letter-spacing: 0.05em;
-	word-spacing: 0.3em;
-}
-
-#client_chatwaiting {
-	display: block;
-	position: absolute;
-	right: 2%;
-	bottom: 15%;
-	line-height: 0.5;
-	animation: idling 0.4s linear infinite;
-}
-
-@keyframes idling {
-	0% {
-		right: 0;
-	}
-
-	50% {
-		right: 2%;
-	}
-
-	100% {
-		right: 0;
-	}
-}
-
-#client_trackstatus {
-	display: none;
-}
-
-#client_clock {
-	display: none;
-}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/chatp3.css b/webAO/styles/chatbox/chatp3.css
deleted file mode 100644
index 8c6a39d..0000000
--- a/webAO/styles/chatbox/chatp3.css
+++ /dev/null
@@ -1,117 +0,0 @@
-.text_white {
-	color: #50545c;
-}
-
-.text_blue {
-	color: #6bc6f7;
-}
-
-.text_green {
-	color: #00f700;
-}
-
-.text_red {
-	color: #f00;
-}
-
-.text_orange {
-	color: #5c1d1b;
-}
-
-.text_yellow {
-	color: #ff0;
-}
-
-.text_pink {
-	color: #ffc0cb;
-}
-
-.text_cyan {
-	color: #0ff;
-}
-
-.text_grey {
-	color: #bbb;
-}
-
-#client_chatcontainer {
-	display: block;
-	position: absolute;
-	bottom: 0;
-	left: 1%;
-	height: 30%;
-	width: 97%;
-	width: calc(98% - 0.3em);
-	border-color: #d9e2f9;
-	border-style: solid;
-	border-width: 0.15em;
-	border-radius: 75% / 25%;
-	background-color: #aaaeb4;
-	font-family: sans-serif;
-}
-
-#client_name {
-	display: block;
-	position: absolute;
-	left: 3%;
-	top: 9%;
-	height: 15%;
-	color: #5c1d1b;
-	z-index: 1;
-}
-
-#client_inner_name {
-	text-justify: distribute;
-	margin: 0;
-	font-weight: bold;
-}
-
-#client_chat {
-	display: block;
-	position: absolute;
-	bottom: 6%;
-	left: 2%;
-	width: 96%;
-	height: 68%;
-	margin: 0;
-	font-size: 1.5em;
-	word-break: keep-all;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-	scroll-behavior: smooth;
-}
-
-#client_inner_chat {
-	padding-left: 3%;
-	padding-right: 8%;
-	margin: 0;
-	line-height: 97%;
-}
-
-#client_chatwaiting {
-    display: block;
-    transform: rotate(90deg);
-	position: absolute;
-	right: 2%;
-	bottom: 0.5em;
-	line-height: 0.5;
-	color: #6a6c72;
-	animation: appear_down 0.5s linear;
-}
-
-@keyframes appear_down {
-	0% {
-        bottom: 5em;
-        opacity: 0;
-	}
-
-	100% {
-        bottom: 0.5em;
-        opacity: 1;
-	}
-}
-
-#client_trackstatus {
-	display: none;
-}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/chatplvsaa.css b/webAO/styles/chatbox/chatplvsaa.css
deleted file mode 100644
index a656e9b..0000000
--- a/webAO/styles/chatbox/chatplvsaa.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.text_white {
-	color: #120f09;
-}
-
-.text_blue {
-	color: #93bbe6;
-}
-
-.text_green {
-	color: #6ab057;
-}
-
-.text_red {
-	color: #e1522a;
-}
-
-.text_orange {
-	color: #cf714c;
-}
-
-.text_yellow {
-	color: #fef9ad;
-}
-
-.text_pink {
-	color: #ffc0cb;
-}
-
-.text_cyan {
-	color: #0ff;
-}
-
-.text_grey {
-	color: #bbb;
-}
-
-@font-face {
-	font-family: 'Cabin Condensed';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: local('Cabin Condensed'), local('CabinCondensed-Regular'), url(https://fonts.gstatic.com/s/cabincondensed/v13/nwpMtK6mNhBK2err_hqkYhHRqmwqZ-LY.woff2) format('woff2');
-}
-
-#client_chatcontainer {
-	font-family: 'Cabin Condensed', sans-serif;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 35%;
-	width: 100%;
-}
-
-#client_name {
-    display: block;
-    left: 2%;
-    top: 0;
-    height: 20%;
-    min-width: 15%;
-	padding: 0px 6px;	
-	image-rendering: crisp-edges;
-	border-image-source: url("plvspw_name.png");
-    border-image-slice: 6 fill;
-	border-image-width: 0.4em;
-	position: absolute;
-	font-weight: bold;
-	-webkit-text-stroke: 0.02em #000;
-	z-index: 1;
-}
-
-#client_inner_name {
-	margin: 1px;
-	padding: 0 0.4em;
-}
-
-#client_chat {
-	font-size: 1em;
-	display: block;
-    width: 99%;
-    width: calc(100% - 0.4em);
-	margin: auto;
-    height: 80%;
-	image-rendering: crisp-edges;
-    border-image-source: url("plvspw.png");
-    border-image-slice: 10 fill;
-	border-image-width: 0.4em;
-	bottom: 0;
-	left: 0.2em;
-	position: absolute;
-	word-break: keep-all;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-	scroll-behavior: smooth;
-}
-
-#client_inner_chat {
-	margin: 0.1em;
-	padding: 0.3em 0.6em;
-}
-
-#client_chatwaiting {
-	display: none;
-}
-
-#client_trackstatus {
-	display: none;
-}
-
-#client_clock {
-	display: none;
-}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/dd.css b/webAO/styles/chatbox/dd.css
new file mode 100644
index 0000000..d1561a4
--- /dev/null
+++ b/webAO/styles/chatbox/dd.css
@@ -0,0 +1,111 @@
+.text_white {
+	color: #fff;
+}
+
+.text_blue {
+	color: #18cbef;
+}
+
+.text_green {
+	color: #84fb08;
+}
+
+.text_red {
+	color: #e1522a;
+}
+
+.text_orange {
+	color: #f76918;
+}
+
+.text_yellow {
+	color: #fef9ad;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+.text_grey {
+	color: #bbb;
+}
+
+#client_chatcontainer {
+	position: absolute;
+	bottom: 0;
+	height: 27%;
+    width: 100%;
+    font-family: sans-serif;
+	background-image: url("dd.svg");
+	background-size: cover;
+ 	background-repeat: no-repeat;
+}
+
+#client_name {
+	display: block;
+	top: 0;
+	padding: 0 10px;
+	height: 22%;
+	position: absolute;
+}
+
+#client_inner_name {
+	margin: 0;
+	padding: 5% 0;
+}
+
+#client_chat {
+	font-size: 1em;
+	display: block;
+	width: 100%;
+	margin: auto;
+	height: 75%;
+	bottom: 0;
+	position: absolute;
+	word-break: keep-all;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_inner_chat {
+	padding: 1% 3%;
+	margin: 0;
+}
+
+#client_chatwaiting {
+	display: block;
+	right: 1em;
+	bottom: 0.6em;
+	width: 1em;
+	position: absolute;
+	animation: idling 1s linear infinite;
+}
+
+@keyframes idling {
+	0% {
+		right: 0;
+	}
+
+	50% {
+		right: 2%;
+	}
+
+	100% {
+		right: 0;
+	}
+}
+
+#client_trackstatus {
+	display: none;
+}
+
+#client_clock {
+	display: none;
+}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/dr2.css b/webAO/styles/chatbox/dr2.css
new file mode 100644
index 0000000..59b11dc
--- /dev/null
+++ b/webAO/styles/chatbox/dr2.css
@@ -0,0 +1,127 @@
+.text_white {
+	color: #fff;
+}
+
+.text_blue {
+	color: #6be4fb;
+}
+
+.text_green {
+	color: #63ff3d;
+}
+
+.text_red {
+	color: #f00;
+}
+
+.text_orange {
+	color: #fc0;
+}
+
+.text_yellow {
+	color: #ffe700;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #6be4fb;
+}
+
+.text_grey {
+	color: #bbb;
+}
+
+#client_chatcontainer {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	bottom: 0;
+	left: 0;
+    font-family: sans-serif;
+}
+
+#client_name {
+    display: block;
+	position: absolute;
+	height: 100%;
+	width: 7%;
+	text-align: left;
+    color: #3d3c3f;
+    font-weight: bold;
+    background-image: linear-gradient(to top,#fe9500,#fee303,transparent);
+	border-right: 0.3em solid #dfd8b8;
+	box-shadow: 0.3em 0px 0 #ff9700;
+	left: 0;
+    bottom: 0;
+}
+
+#client_inner_name {
+	padding: 0;
+	margin: 0;
+	transform: rotate(180deg);
+    writing-mode: vertical-rl;    
+    bottom: 25%;
+    right: 0;
+    position: absolute;
+}
+
+#client_chat {
+	font-size: 1em;
+	display: block;
+	width: 91%;
+	margin: auto;
+	height: 25%;
+    border-top: 0.1em solid white;    
+	bottom: 0;
+    right: 0;
+    background-image: linear-gradient(to right, rgba(0,0,0,0.4), black);
+	position: absolute;
+	word-break: keep-all;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+    scroll-behavior: smooth;
+    z-index: 3;
+}
+
+#client_inner_chat {
+    position: absolute;
+	padding: 2% 4%;
+	margin: 0;
+    line-height: 97%;
+    z-index: 4;
+}
+
+#client_chatwaiting {
+	display: none;
+}
+
+#client_trackstatus {
+	display: block;
+	position: absolute;
+	width: 30%;
+	height: 35%;
+	top: 0;
+	left: 0;
+	background-image: url("music_dr2.svg");
+	background-size: contain;
+    background-repeat: no-repeat;
+}
+
+#client_trackstatustext {
+	position: absolute;
+	top: 6%;
+	left: 25%;
+	width: 50%;
+	color: #f84f00;
+    font-family: monospace;
+	font-size: 1.2em;
+	white-space: nowrap;
+}
+
+#client_trackstatus {
+	display: fuck;
+}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/future.css b/webAO/styles/chatbox/future.css
new file mode 100644
index 0000000..cd638f4
--- /dev/null
+++ b/webAO/styles/chatbox/future.css
@@ -0,0 +1,137 @@
+.text_white {
+	color: #fff;
+}
+
+.text_blue {
+	color: #6bc6f7;
+}
+
+.text_green {
+	color: #00f700;
+}
+
+.text_red {
+	color: #f00;
+}
+
+.text_orange {
+	color: #f77339;
+}
+
+.text_yellow {
+	color: #ff0;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+.text_grey {
+	color: #bbb;
+}
+
+@font-face {
+	font-family:'Igiari Cyrillic';
+		src: url('../igiari/igiari-cyrillic.ttf');
+	font-weight:normal;
+	font-style:normal;
+}
+
+#client_chatcontainer {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 40%;
+	width: 100%;
+	filter: none;
+	font-family: "Igiari Cyrillic", "MS PGothic", "MS UI Gothic", "MS Sans Serif", "Hiragino Maru Gothic Pro", "Mitra Mono", "Mukti Narrow", "Meera", "Khmer OS", "FreeSans", "Gargi", sans-serif;
+}
+
+#client_name {
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 15%;
+	min-width: 3.25em;	
+	background: linear-gradient(to bottom, #1e6169, #0f2f32);
+	padding: 0 2%;
+	border-color: #217aff;
+	border-style: ridge groove groove ridge;
+	border-width: 0.2em;
+	border-radius: 0.2em;	
+	z-index: 1;
+}
+
+#client_inner_name {
+	text-justify: distribute;
+	letter-spacing: 0.075em;
+	margin: 0;
+	font-weight: bold;
+}
+
+#client_chat {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 98%;
+	width: calc(100% - 0.27em);
+	height: 78%;
+	margin: auto;
+	border-color: #59f0fc;
+	border-style: ridge groove groove ridge;
+	border-width: 0.15em;
+	border-radius: 0.3em;
+	background: linear-gradient(to bottom, rgba(0,0,0,0.7),rgba(0,0,137,0.7));
+	font-size: 2em;
+	word-break: keep-all;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_inner_chat {
+	padding: 1% 3.13%;
+	margin: 1px;
+	line-height: 97%;
+	letter-spacing: 0.05em;
+	word-spacing: 0.3em;
+}
+
+#client_chatwaiting {
+	display: block;
+	position: absolute;
+	right: 2%;
+	bottom: 15%;
+	line-height: 0.5;
+	animation: idling 0.4s linear infinite;
+}
+
+@keyframes idling {
+	0% {
+		right: 0;
+	}
+
+	50% {
+		right: 2%;
+	}
+
+	100% {
+		right: 0;
+	}
+}
+
+#client_trackstatus {
+	display: none;
+}
+
+#client_clock {
+	display: none;
+}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/p3.css b/webAO/styles/chatbox/p3.css
new file mode 100644
index 0000000..8c6a39d
--- /dev/null
+++ b/webAO/styles/chatbox/p3.css
@@ -0,0 +1,117 @@
+.text_white {
+	color: #50545c;
+}
+
+.text_blue {
+	color: #6bc6f7;
+}
+
+.text_green {
+	color: #00f700;
+}
+
+.text_red {
+	color: #f00;
+}
+
+.text_orange {
+	color: #5c1d1b;
+}
+
+.text_yellow {
+	color: #ff0;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+.text_grey {
+	color: #bbb;
+}
+
+#client_chatcontainer {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 1%;
+	height: 30%;
+	width: 97%;
+	width: calc(98% - 0.3em);
+	border-color: #d9e2f9;
+	border-style: solid;
+	border-width: 0.15em;
+	border-radius: 75% / 25%;
+	background-color: #aaaeb4;
+	font-family: sans-serif;
+}
+
+#client_name {
+	display: block;
+	position: absolute;
+	left: 3%;
+	top: 9%;
+	height: 15%;
+	color: #5c1d1b;
+	z-index: 1;
+}
+
+#client_inner_name {
+	text-justify: distribute;
+	margin: 0;
+	font-weight: bold;
+}
+
+#client_chat {
+	display: block;
+	position: absolute;
+	bottom: 6%;
+	left: 2%;
+	width: 96%;
+	height: 68%;
+	margin: 0;
+	font-size: 1.5em;
+	word-break: keep-all;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_inner_chat {
+	padding-left: 3%;
+	padding-right: 8%;
+	margin: 0;
+	line-height: 97%;
+}
+
+#client_chatwaiting {
+    display: block;
+    transform: rotate(90deg);
+	position: absolute;
+	right: 2%;
+	bottom: 0.5em;
+	line-height: 0.5;
+	color: #6a6c72;
+	animation: appear_down 0.5s linear;
+}
+
+@keyframes appear_down {
+	0% {
+        bottom: 5em;
+        opacity: 0;
+	}
+
+	100% {
+        bottom: 0.5em;
+        opacity: 1;
+	}
+}
+
+#client_trackstatus {
+	display: none;
+}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/plvsaa.css b/webAO/styles/chatbox/plvsaa.css
new file mode 100644
index 0000000..a656e9b
--- /dev/null
+++ b/webAO/styles/chatbox/plvsaa.css
@@ -0,0 +1,113 @@
+.text_white {
+	color: #120f09;
+}
+
+.text_blue {
+	color: #93bbe6;
+}
+
+.text_green {
+	color: #6ab057;
+}
+
+.text_red {
+	color: #e1522a;
+}
+
+.text_orange {
+	color: #cf714c;
+}
+
+.text_yellow {
+	color: #fef9ad;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+.text_grey {
+	color: #bbb;
+}
+
+@font-face {
+	font-family: 'Cabin Condensed';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: local('Cabin Condensed'), local('CabinCondensed-Regular'), url(https://fonts.gstatic.com/s/cabincondensed/v13/nwpMtK6mNhBK2err_hqkYhHRqmwqZ-LY.woff2) format('woff2');
+}
+
+#client_chatcontainer {
+	font-family: 'Cabin Condensed', sans-serif;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 35%;
+	width: 100%;
+}
+
+#client_name {
+    display: block;
+    left: 2%;
+    top: 0;
+    height: 20%;
+    min-width: 15%;
+	padding: 0px 6px;	
+	image-rendering: crisp-edges;
+	border-image-source: url("plvspw_name.png");
+    border-image-slice: 6 fill;
+	border-image-width: 0.4em;
+	position: absolute;
+	font-weight: bold;
+	-webkit-text-stroke: 0.02em #000;
+	z-index: 1;
+}
+
+#client_inner_name {
+	margin: 1px;
+	padding: 0 0.4em;
+}
+
+#client_chat {
+	font-size: 1em;
+	display: block;
+    width: 99%;
+    width: calc(100% - 0.4em);
+	margin: auto;
+    height: 80%;
+	image-rendering: crisp-edges;
+    border-image-source: url("plvspw.png");
+    border-image-slice: 10 fill;
+	border-image-width: 0.4em;
+	bottom: 0;
+	left: 0.2em;
+	position: absolute;
+	word-break: keep-all;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_inner_chat {
+	margin: 0.1em;
+	padding: 0.3em 0.6em;
+}
+
+#client_chatwaiting {
+	display: none;
+}
+
+#client_trackstatus {
+	display: none;
+}
+
+#client_clock {
+	display: none;
+}
\ No newline at end of file
-- 
cgit