Ability to Chat on TikTok Enabled

css/app.css

@@ -576,19 +576,29 @@ body {
 }
 
 #chat-input #chat-input-send {
+    right: 60px;
+}
+
+#chat-input #chat-input-settings {
     right: 20px;
 }
 
 #chat-input .settings {
-    display: inline-block;
+    display: none;
     background: #0c0c0c;
-    padding: 10px;
+    padding: 10px 20px;
     border-radius: 10px;
     
     position: absolute;
-    top: -55px;
+    top: -75px;
     right: 0px;
     z-index: 11;
+
+    box-shadow: 0 0 10px rgba(255,255,255,0.05)
+}
+
+#chat-input .settings.active {
+    display: inline-block;
 }
 
 #chat-input .settings::after {
@@ -625,6 +635,16 @@ body {
     height: 27px;
 }
 
+#chat-input .settings .hint {
+    color: #FFF;
+    font-size: 12px;
+} 
+
+#chat-input .settings .hint a {
+    color: #ffcc00;
+    font-weight: bold;
+}
+
 /* Hide default HTML checkbox */
 #chat-input .settings .switch input[type=checkbox] {
     opacity: 1;
@@ -668,7 +688,9 @@ body {
 #chat-input #youtube input[type=checkbox]:checked + .slider {
     background-color: #FF0000;
 }
-
+#chat-input #tiktok input[type=checkbox]:checked + .slider {
+    background-color: #ff0050;
+}
 #chat-input #kick input[type=checkbox]:checked + .slider {
     background-color: #48d415;
 }
@@ -716,7 +738,6 @@ body {
 
 #chat-autocomplete-list div.autocomplete-item {
     cursor: pointer;
-    transition: all ease-in-out 300ms;
 }
 
 #chat-autocomplete-list div:not(.autocomplete-item) {
@@ -821,4 +842,4 @@ body {
         width: 18px;
         filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
     }
-}
+}

css/settings.css

@@ -11,7 +11,6 @@ body {
     background-color: #121212;
     color: #FFF;
     text-align: center;
-    padding: 30px;
     font-size: 16px;
 }
 
@@ -22,12 +21,69 @@ hr {
     margin: 20px 0;
 }
 
+h2 {
+    font-size: 20px;
+    padding: 15px 30px;
+    border-bottom: 1px solid #222;
+    margin: 15px 0 0 0;
+    text-align: left;
+    position: relative;
+}
+
+h2 i {
+    margin-right: 5px;
+}
+
+h2 svg {
+    width: 26px;
+    vertical-align: bottom;
+    fill: #FFF;
+}
+
+h2 img {
+    width: 26px;
+    vertical-align: bottom;
+}
+
+h2 button {
+    display: none;
+    
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+
+    border: none;
+    background: black;
+    text-align: center;
+    color: #FFF;
+    cursor: pointer;
+
+    font-size: 16px;
+    padding: 10px;
+    border-radius: 100px;
+}
+
+h2 button i {
+    margin: 0;
+    transition: transform 0.3s ease;
+}
+
+
+.accordion-container {
+    /*max-height: 0;
+    overflow: hidden;*/
+    transition: max-height 0.4s ease;
+}
+
+
 
 #chat-divided {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     gap: 30px;
+    padding: 30px;
 }
 
 #chat-settings { width: 640px; }
@@ -56,16 +112,6 @@ hr {
 }
 
 .url-bar input[type=text] {
-    /*font-family: "Inter", sans-serif;
-    border: none;
-    background: #171717;
-    color: #FFF;
-    padding: 15px 30px;
-    border-radius: 10px;
-    width: 100%;
-    text-align: center;
-    outline: none;
-    font-size: 14px;*/
     display: none;
 }
 
@@ -90,33 +136,20 @@ hr {
 }
 
 .tab-content {
-    padding: 20px 30px;
-    border-radius: 20px;
+    border-radius: 0 0 20px 20px;
     background: #171717;
-    margin: 20px auto;
+    margin: 0 auto;
     text-align: left;
+    margin: 0 0 30px 0;
 }
 
-.tab-content h2 {
-    margin-bottom: 15px;
-    font-size: 20px;
-    padding: 15px 0px;
-    border-bottom: 1px solid #222;
+.tab-content .wrapper {
+    padding: 20px 30px;
 }
 
-.tab-content h2 i {
-    margin-right: 5px;
-}
-
-.tab-content h2 svg {
-    width: 26px;
-    vertical-align: bottom;
-    fill: #FFF;
-}
-
-.tab-content h2 img {
-    width: 26px;
-    vertical-align: bottom;
+/* When visible */
+.tab-content.open {
+    display: block;
 }
 
 .tab-content .setting {