Maximofn commited on
Commit
30f0af2
·
1 Parent(s): 6092ad0

Ajusta el estilo de los mensajes de usuario y el contenedor del chatbot, optimizando bordes y márgenes para mejorar la estética y la experiencia del usuario.

Browse files
Files changed (1) hide show
  1. style.css +4 -8
style.css CHANGED
@@ -101,7 +101,7 @@
101
  position: relative !important;
102
 
103
  /* Multi-color gradient border */
104
- border: 3px solid transparent !important;
105
  background-image:
106
  linear-gradient(var(--bg-light-secondary), var(--bg-light-secondary)),
107
  linear-gradient(
@@ -158,22 +158,19 @@
158
  /* Chat container */
159
  .chatbot, [data-testid="chatbot"] {
160
  border-radius: var(--card-radius) !important;
161
- border: 1px solid var(--border-light) !important;
162
  box-shadow: var(--card-shadow-light) !important;
163
  }
164
 
165
  /* User messages - Purple accent */
166
  .message.user,
167
  .user-message,
168
- [data-testid="user-message"],
169
- .user-row {
170
  background: linear-gradient(135deg, var(--primary-purple-light) 0%, var(--primary-purple) 100%) !important;
171
  color: white !important;
172
  border-radius: 18px 18px 4px 18px !important;
173
  padding: 0.875rem 1.125rem !important;
174
  margin: 0.5rem 0 !important;
175
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
176
- max-width: 80% !important;
177
  margin-left: auto !important;
178
  }
179
 
@@ -305,8 +302,7 @@ button.example:hover {
305
  /* Dark theme - User messages */
306
  .dark .message.user,
307
  .dark .user-message,
308
- .dark [data-testid="user-message"],
309
- .dark .user-row {
310
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
311
  color: white !important;
312
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
@@ -392,4 +388,4 @@ button.example:hover {
392
  .dark .chatbot::-webkit-scrollbar-thumb:hover,
393
  .dark [data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
394
  background: var(--primary-purple-light);
395
- }
 
101
  position: relative !important;
102
 
103
  /* Multi-color gradient border */
104
+ border: 1px solid transparent !important;
105
  background-image:
106
  linear-gradient(var(--bg-light-secondary), var(--bg-light-secondary)),
107
  linear-gradient(
 
158
  /* Chat container */
159
  .chatbot, [data-testid="chatbot"] {
160
  border-radius: var(--card-radius) !important;
 
161
  box-shadow: var(--card-shadow-light) !important;
162
  }
163
 
164
  /* User messages - Purple accent */
165
  .message.user,
166
  .user-message,
167
+ [data-testid="user-message"] {
 
168
  background: linear-gradient(135deg, var(--primary-purple-light) 0%, var(--primary-purple) 100%) !important;
169
  color: white !important;
170
  border-radius: 18px 18px 4px 18px !important;
171
  padding: 0.875rem 1.125rem !important;
172
  margin: 0.5rem 0 !important;
173
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
 
174
  margin-left: auto !important;
175
  }
176
 
 
302
  /* Dark theme - User messages */
303
  .dark .message.user,
304
  .dark .user-message,
305
+ .dark [data-testid="user-message"] {
 
306
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
307
  color: white !important;
308
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4) !important;
 
388
  .dark .chatbot::-webkit-scrollbar-thumb:hover,
389
  .dark [data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
390
  background: var(--primary-purple-light);
391
+ }