Rodrigo Rodriguez (Pragmatismo)
444b424739
Rewrites chat.css to use centralized CSS variables from app.css instead of maintaining its own theme definitions. Moves all theme variables (colors, spacing, shadows, transitions) to app.css as the single source of truth. Improves chat UI consistency, adds better connection status indicators, and enhances responsive design.
529 lines
10 KiB
CSS
529 lines
10 KiB
CSS
/* Chat Module - Uses theme variables from app.css */
|
|
|
|
.chat-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: relative;
|
|
background: var(--primary-bg);
|
|
}
|
|
|
|
/* Messages Container */
|
|
#messages {
|
|
position: fixed;
|
|
top: var(--header-height);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 90px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 40px 20px;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Message Container */
|
|
.message-container {
|
|
margin-bottom: 24px;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
animation: fadeInUp 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* User Message */
|
|
.user-message {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.user-message-content {
|
|
background: var(--user-message-bg);
|
|
color: var(--user-message-fg);
|
|
border-radius: 18px;
|
|
padding: 12px 18px;
|
|
max-width: 80%;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
box-shadow: var(--shadow-sm);
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Assistant Message */
|
|
.assistant-message {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.assistant-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: url("https://pragmatismo.com.br/icons/general-bots.svg")
|
|
center/contain no-repeat;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.assistant-message-content {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
background: var(--bot-message-bg);
|
|
color: var(--bot-message-fg);
|
|
border-radius: 18px;
|
|
padding: 12px 18px;
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: var(--shadow-sm);
|
|
max-width: 80%;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Markdown Content */
|
|
.markdown-content p {
|
|
margin-bottom: 12px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.markdown-content ul,
|
|
.markdown-content ol {
|
|
margin-bottom: 12px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.markdown-content li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.markdown-content code {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: "Courier New", monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.markdown-content pre {
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
overflow-x: auto;
|
|
margin-bottom: 12px;
|
|
background: rgba(0, 0, 0, 0.03);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-content h1,
|
|
.markdown-content h2,
|
|
.markdown-content h3 {
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.markdown-content h1 {
|
|
font-size: 20px;
|
|
}
|
|
.markdown-content h2 {
|
|
font-size: 18px;
|
|
}
|
|
.markdown-content h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.markdown-content a {
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
transition: opacity var(--transition-fast);
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
opacity: 0.7;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Thinking Indicator */
|
|
.thinking-indicator {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.thinking-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--text-tertiary);
|
|
border-radius: 50%;
|
|
animation: bounce 1.4s infinite ease-in-out;
|
|
}
|
|
|
|
.thinking-dot:nth-child(1) {
|
|
animation-delay: -0.32s;
|
|
}
|
|
.thinking-dot:nth-child(2) {
|
|
animation-delay: -0.16s;
|
|
}
|
|
.thinking-dot:nth-child(3) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0.8);
|
|
opacity: 0.3;
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--header-bg);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 16px;
|
|
z-index: 100;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Suggestions */
|
|
.suggestions-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
justify-content: center;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.suggestion-button {
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-full);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.suggestion-button:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-color);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Input Container */
|
|
.input-container {
|
|
display: flex;
|
|
gap: 8px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
}
|
|
|
|
#messageInput {
|
|
flex: 1;
|
|
border-radius: var(--radius-xl);
|
|
padding: 12px 20px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: all var(--transition-fast);
|
|
background: var(--input-bg);
|
|
border: 2px solid var(--input-border);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
#messageInput:focus {
|
|
border-color: var(--accent-color);
|
|
box-shadow: 0 0 0 3px var(--accent-light);
|
|
}
|
|
|
|
#messageInput::placeholder {
|
|
color: var(--input-placeholder);
|
|
}
|
|
|
|
#sendBtn,
|
|
#voiceBtn {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
border: none;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#sendBtn {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
#sendBtn:hover {
|
|
background: var(--accent-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
#sendBtn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
#voiceBtn {
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
#voiceBtn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
#voiceBtn.recording {
|
|
background: var(--error-color);
|
|
color: white;
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
/* Scroll to Bottom Button */
|
|
.scroll-to-bottom {
|
|
position: fixed;
|
|
bottom: 110px;
|
|
right: 24px;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all var(--transition-fast);
|
|
z-index: 90;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.scroll-to-bottom.visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.scroll-to-bottom:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
|
|
/* Connection Status */
|
|
.connection-status {
|
|
position: fixed;
|
|
top: calc(var(--header-height) + 16px);
|
|
right: 24px;
|
|
padding: 6px 12px;
|
|
border-radius: var(--radius-full);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
box-shadow: var(--shadow-md);
|
|
z-index: 1000;
|
|
transition: all var(--transition-fast);
|
|
}
|
|
|
|
.connection-status::before {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.connection-status.connected {
|
|
background: rgba(16, 185, 129, 0.15);
|
|
border: 1px solid var(--success-color);
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.connection-status.connected::before {
|
|
background: var(--success-color);
|
|
}
|
|
|
|
.connection-status.connecting {
|
|
background: rgba(245, 158, 11, 0.15);
|
|
border: 1px solid var(--warning-color);
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.connection-status.connecting::before {
|
|
background: var(--warning-color);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.connection-status.disconnected {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
border: 1px solid var(--error-color);
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.connection-status.disconnected::before {
|
|
background: var(--error-color);
|
|
}
|
|
|
|
/* Flash Overlay */
|
|
.flash-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--accent-color);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
transition: opacity 0.1s;
|
|
}
|
|
|
|
/* Warning Message */
|
|
.warning-message {
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
margin-bottom: 18px;
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border: 1px solid var(--warning-color);
|
|
color: var(--warning-color);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Continue Button */
|
|
.continue-button {
|
|
display: inline-block;
|
|
border-radius: var(--radius-lg);
|
|
padding: 8px 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
transition: all var(--transition-fast);
|
|
font-size: 13px;
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.continue-button:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent-color);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Scrollbar */
|
|
#messages::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
#messages::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
#messages::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-thumb);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
#messages::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-thumb-hover);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
#messages {
|
|
padding: 20px 16px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.input-container {
|
|
gap: 6px;
|
|
}
|
|
|
|
#messageInput {
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#sendBtn,
|
|
#voiceBtn {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.scroll-to-bottom {
|
|
bottom: 100px;
|
|
right: 16px;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.connection-status {
|
|
top: calc(var(--header-height) + 8px);
|
|
right: 16px;
|
|
font-size: 10px;
|
|
padding: 4px 10px;
|
|
}
|
|
}
|