add chats

static/css/components/chat.css

@@ -0,0 +1,83 @@
+:root {
+    --icon-choose: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iIzU1NDIzZSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --icon-choose: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iI2Q3Y2RiZiIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=');
+    }
+}
+
+th-chat {
+    display: flex;
+    flex-direction: column;
+}
+
+th-chat-said {
+    display: block;
+
+    border: 1px solid var(--border-1);
+    padding: 12px 16px;
+    margin: 8px 0;
+    border-radius: 8px;
+
+    max-width: 60%;
+}
+
+th-chat-asked {
+    display: flex;
+    flex-direction: row-reverse;
+
+    &>button {
+        /* Reset <button> */
+        border: none;
+        background: none;
+        color: var(--text-color);
+        padding: 0.5em 0;
+        margin-right: 2rem;
+
+        --recursive-wght: 500;
+        text-decoration: underline;
+        text-align: right;
+        opacity: 80%;
+
+        cursor: pointer;
+        transition: opacity var(--transition-duration);
+
+        &.asked {
+            display: none;
+            opacity: 50%;
+        }
+
+        &[disabled] {
+            --recursive-wght: 600;
+            cursor: default;
+            opacity: 100%;
+            text-decoration: none;
+        }
+
+        &:hover {
+            opacity: 100%;
+        }
+
+        &::before {
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin-right: 0.5em;
+            background-image: var(--icon-choose);
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            opacity: 0%;
+            vertical-align: middle;
+            translate: -1em 0;
+            transition: opacity var(--transition-duration), translate var(--transition-duration);
+        }
+
+        &:hover::before, &[disabled]::before {
+            opacity: 50%;
+            translate: 0 0;
+        }
+    }
+}