chat.css•3.76 kB
/* chat.css - Chat interface and message styles */
/* Message Containers */
.message {
position: relative;
padding-top: 2rem;
margin-bottom: var(--spacing-sm);
background: rgba(255, 255, 255, 0.9);
border-radius: var(--border-radius);
padding: 1.25rem;
border: 1px solid rgba(200, 200, 200, 0.2);
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
transition: box-shadow 0.2s ease, transform 0.5s ease;
}
.message:hover {
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.5), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
transform: translateY(-0.125rem);
}
.message-name {
position: absolute;
top: 0.5rem;
left: 1rem;
font-size: 0.75rem;
font-weight: 700;
opacity: 1;
}
.user-message .message-name {
color: #000000;
opacity: 1;
font-weight: 700;
}
.bot-message .message-name {
color: var(--bot-name-color);
font-weight: 700;
}
.message-name::after,
.loading-indicator .message-name::after {
content: ":";
}
.message-content {
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
font-weight: 500;
}
.user-message {
background: linear-gradient(100deg, rgba(255, 181, 71, 0.6), rgba(61, 90, 128, 0.6) );
border-left: 3px solid var(--secondary-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.bot-message {
background: linear-gradient(100deg, rgba(61, 90, 128, 0.6), rgba(255, 181, 71, 0.6));
border-left: 3px solid var(--primary-color);
backdrop-filter: blur(8px);
}
/* Main message text color for user and bot replies */
.user-message .message-content {
color: #000000dc;
}
.bot-message .message-content {
color: #000000dc;
}
/* Message Action Buttons */
.copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: var(--copy-btn-bg);
border: none;
border-radius: var(--border-radius-sm);
padding: 0.25rem 0.5rem;
cursor: pointer;
opacity: 0;
transition: opacity var(--transition-fast);
font-size: 0.75rem;
}
.message:hover .copy-btn {
opacity: 1;
}
.copy-btn.copied {
background: var(--success-bg-color);
color: white;
}
.voice-btn {
position: absolute;
top: 0.5rem;
right: 4.6875rem;
background: var(--primary-color);
border: none;
border-radius: var(--border-radius-sm);
padding: 0.125rem 0.5rem;
opacity: 0;
transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
font-size: 0.875rem;
}
.message:hover .voice-btn {
opacity: 1;
}
.voice-btn:hover {
background: var(--primary-hover-color);
transform: scale(1.1);
}
/* Speaking State */
.bot-message.speaking {
position: relative;
background: rgba(61, 90, 128, 0.03);
transition: background var(--transition-medium);
}
.bot-message.speaking .voice-btn {
opacity: 1;
background: var(--accent-color);
animation: pulse 1.5s ease-in-out infinite;
}
.bot-message.speaking .voice-btn:hover {
background: var(--accent-hover-color);
}
.bot-message.speaking .message-content {
position: relative;
padding-left: 1.5625rem;
}
.bot-message.speaking .message-content::before {
content: '🔊';
position: absolute;
left: 0;
top: 0;
font-size: 1rem;
animation: sound-wave 1.5s ease-in-out infinite;
}
/* Voice Settings */
#voice-settings {
background: rgba(61, 90, 128, 0.05);
padding: 0.9375rem;
border-radius: var(--border-radius);
margin-top: 0.9375rem;
}
/* Streaming Cursor */
.streaming-cursor {
color: var(--primary-color, #3D5A80);
animation: blink 1s infinite;
font-weight: bold;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Streaming Message State */
.message.streaming {
border-left: 3px solid var(--primary-color, #3D5A80);
}