Initial commit for YouTube Live Chat Overlay project.

style.css

@@ -0,0 +1,45 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    background-color: transparent; /* Important for overlays */
+    overflow: hidden; /* Hide scrollbars */
+}
+
+#chat-container {
+    display: flex;
+    flex-direction: column-reverse; /* New messages appear at the bottom */
+    height: 100vh; /* Take full viewport height */
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-y: hidden; /* Hide scrollbar, messages will push older ones up */
+}
+
+.chat-message {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 5px;
+    color: #fff; /* Default text color */
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Outline for readability */
+}
+
+.chat-author {
+    font-weight: bold;
+    margin-right: 5px;
+}
+
+.chat-text {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    flex-grow: 1;
+}
+
+/* Rich-like colors for emojis and special text */
+.emoji {
+    color: magenta;
+}
+
+.blue-text {
+    color: blue;
+}