Carpeta css

2026-08-04 19:45:02 -03:00
parent cf5d30a756
commit ebc7efa4d7
4 changed files with 1796 additions and 0 deletions
@@ -0,0 +1,120 @@
+.chatbot-body {
+
+    height: 58vh;
+
+    overflow-y: auto;
+
+    padding: 1.5rem;
+
+    background:
+        linear-gradient(
+            to bottom,
+            #f8f9fa,
+            #ffffff
+        );
+
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 1rem;
+}
+
+/* MENSAJES */
+
+.mensaje-user,
+.mensaje-bot {
+
+    display: flex;
+
+    width: 100%;
+}
+
+.mensaje-user {
+
+    justify-content: flex-end;
+}
+
+.mensaje-bot {
+
+    justify-content: flex-start;
+}
+
+/* BURBUJAS */
+
+.mensaje-contenido {
+
+    max-width: 80%;
+
+    padding: 0.85rem 1rem;
+
+    border-radius: 16px;
+
+    font-size: 0.95rem;
+
+    line-height: 1.5;
+
+    word-break: break-word;
+
+    box-shadow:
+        0 2px 10px rgba(0,0,0,0.06);
+}
+
+/* USER */
+
+.mensaje-user .mensaje-contenido {
+
+    background: #198754;
+
+    color: white;
+
+    border-bottom-right-radius: 4px;
+}
+
+/* BOT */
+
+.mensaje-bot .mensaje-contenido {
+
+    background: #f1f3f5;
+
+    color: #212529;
+
+    border-bottom-left-radius: 4px;
+}
+
+/* FOOTER */
+
+.chatbot-footer {
+
+    background: white;
+}
+
+/* INPUT */
+
+.chatbot-footer .form-control {
+
+    border-radius: 12px 0 0 12px;
+
+    padding: 0.8rem 1rem;
+}
+
+.chatbot-footer .btn {
+
+    border-radius: 0 12px 12px 0;
+
+    width: 60px;
+}
+
+/* SCROLL */
+
+.chatbot-body::-webkit-scrollbar {
+
+    width: 8px;
+}
+
+.chatbot-body::-webkit-scrollbar-thumb {
+
+    background: rgba(0,0,0,0.15);
+
+    border-radius: 20px;
+}