6 files changed, 161 insertions, 5 deletions
diff --git a/webAO/styles/chatbox/acww.css b/webAO/styles/chatbox/acww.css
index dd899b9..b0114b6 100644
--- a/webAO/styles/chatbox/acww.css
+++ b/webAO/styles/chatbox/acww.css
@@ -175,6 +175,7 @@
 	font-weight: bold;
 	padding-left: 1.5em;
 	padding-top: 0.5em;
+	font-size: 0.5em;
 }
 
 #client_clock_month {
@@ -192,6 +193,7 @@
 	background-size: 100% 40%;
 	border: 0.1em solid #00b63c;
 	border-radius: 100%;
+	font-size: 0.6em;
 }
 
 #client_clock_time {
@@ -219,4 +221,5 @@
 	border-radius: 50%;
 	border-top: none;
 	padding-top: 0.5em;
+	font-size: 0.5em;
 }
 \ No newline at end of file
diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js
index bc73109..9e52d43 100644
--- a/webAO/styles/chatbox/chatboxes.js
+++ b/webAO/styles/chatbox/chatboxes.js
@@ -19,6 +19,7 @@ export default [
   'halla',
   'homestuck',
   'key',
+  'sonic',
   'yakuza',
   'yttd',
   'whentheycry',
diff --git a/webAO/styles/chatbox/key.css b/webAO/styles/chatbox/key.css
index 77f2e99..4debe72 100644
--- a/webAO/styles/chatbox/key.css
+++ b/webAO/styles/chatbox/key.css
@@ -167,6 +167,7 @@
 	text-shadow: -1px -1px 0 #d7e5d9, 1px -1px 0 #d7e5d9, -1px 1px 0 #d7e5d9, 1px 1px 0 #d7e5d9;
 	font-size: small;
 	line-height: 1;
+	font-size: 0.4em;
 }
 
 #client_clock_date {
@@ -178,7 +179,7 @@
 	margin: 0;
 	color: #ffe;
 	text-shadow: -1px -1px 0 #78320b, 1px -1px 0 #78320b, -1px 1px 0 #78320b, 1px 1px 0 #78320b;
-	font-size: 3em;
+	font-size: 1.5em;
 	background: rgba(255,255,255,0.7);
 	border-radius: 100%;
 	line-height: 1.8;
@@ -200,6 +201,7 @@
 	border: #ffc89f 3px ridge;
 	border-radius: 100%;
 	line-height: 2;
+	font-size: 0.4em;
 }
 
 #client_clock_time {
diff --git a/webAO/styles/chatbox/sonic.css b/webAO/styles/chatbox/sonic.css
new file mode 100644
index 0000000..2da4aaf
--- /dev/null
+++ b/webAO/styles/chatbox/sonic.css
@@ -0,0 +1,128 @@
+.text_white {
+    color: #2e2315;
+}
+
+.text_blue {
+    color: #6bc6f7;
+}
+
+.text_green {
+    color: #00f700;
+}
+
+.text_red {
+    color: #f00;
+}
+
+.text_orange {
+    color: #ee7600;
+}
+
+.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: 30%;
+	width: 100%;
+	filter: none;
+}
+
+#client_name {
+	display: block;
+	position: absolute;
+	left: 6%;
+	top: 0;
+	height: 16%;
+	min-width: 5em;	
+	font-size: 1em;
+	background: #5c4200;
+	margin: 0;
+    z-index: 1;
+	border-radius: 0.25em;	
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+#client_inner_name {
+	text-justify: distribute;
+	line-height: 100%;
+    margin: 0;
+    color: white;
+}
+
+#client_chat {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 98%;
+	width: calc(100% - 0.27em);
+	height: 98%;
+	margin: auto;
+	border: solid #a99460 0.15em;
+	border-radius: 0.25em;
+    background-color: #e3dab6;
+    font-size: 1em;
+    font-weight: 600;
+    text-shadow: 0 1px #FFF;
+	word-break: keep-all;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_inner_chat {
+	padding: 8% 6%;
+	margin: 1px;
+	line-height: 100%;
+}
+
+#client_chatwaiting {
+	display: block;
+	position: absolute;
+	right: 2%;
+	bottom: 15%;
+    color: #5c4200;
+	transform: rotate(90deg);
+	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/trilogy.css b/webAO/styles/chatbox/trilogy.css
index 80a7467..db68133 100644
--- a/webAO/styles/chatbox/trilogy.css
+++ b/webAO/styles/chatbox/trilogy.css
@@ -47,7 +47,7 @@
     top: 0;
     left: 5%;
 	padding: 0 3em;
-    height: 20%;
+    height: 23%;
     min-width: 10%;
 	border-image-source: url('trilogy.svg');
 	border-image-slice: 3 fill;
diff --git a/webAO/styles/chatbox/trilogy.svg b/webAO/styles/chatbox/trilogy.svg
index f3b3131..1657eca 100644
--- a/webAO/styles/chatbox/trilogy.svg
+++ b/webAO/styles/chatbox/trilogy.svg
@@ -1,4 +1,26 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
-<path transform="matrix(.99608 0 0 .99608 .090012 .090008)" d="m89.763 63.531-26.128 26.189-36.993 0.043265-26.189-26.128-0.043265-36.993 26.128-26.189 36.993-0.043265 26.189 26.128z" fill="#2989bc" stroke="#fff" stroke-width=".5"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   viewBox="0 0 90 90"
+   id="svg4"
+   sodipodi:docname="trilogy.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25" />
+  <path
+     d="M 90,65 65,90 H 25 L 0,65 V 25 L 25,0 h 40 l 25,25 z"
+     fill="#2989bc"
+     stroke="#ffffff"
+     stroke-width="0.500821"
+     id="path2"
+     sodipodi:nodetypes="ccccccccc" />
 </svg>