:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--bg-color: #f8f9fa;
--text-color: #212529;
--card-bg: #ffffff;
--border-color: #dee2e6;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
.container {
width: 100%;
max-width: 800px;
display: flex;
flex-direction: column;
}
header {
text-align: center;
margin-bottom: 20px;
}
header h1 {
color: var(--primary-color);
margin-bottom: 5px;
}
.chat-window {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
flex-grow: 1;
margin-bottom: 20px;
overflow-y: auto;
height: 60vh;
}
.message {
margin-bottom: 15px;
padding: 10px;
border-radius: 8px;
}
.user-message {
background-color: #e7f0ff;
text-align: right;
}
.mcp-response {
background-color: #f1f1f1;
}
.mcp-response pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
font-size: 14px;
}
.input-area {
display: flex;
}
#question-input {
flex-grow: 1;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 8px 0 0 8px;
font-size: 16px;
}
#ask-button {
padding: 12px 20px;
border: none;
background-color: var(--primary-color);
color: white;
border-radius: 0 8px 8px 0;
cursor: pointer;
font-size: 16px;
}
#ask-button:disabled {
background-color: var(--secondary-color);
cursor: not-allowed;
}
.loader {
display: none;
text-align: center;
padding: 15px;
}
.dot-flashing {
position: relative;
width: 10px; height: 10px;
border-radius: 5px;
background-color: var(--primary-color);
color: var(--primary-color);
animation: dotFlashing 1s infinite linear alternate;
animation-delay: .5s;
display: inline-block;
}
.dot-flashing::before, .dot-flashing::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
width: 10px; height: 10px;
border-radius: 5px;
background-color: var(--primary-color);
color: var(--primary-color);
}
.dot-flashing::before {
left: -15px;
animation: dotFlashing 1s infinite alternate;
animation-delay: 0s;
}
.dot-flashing::after {
left: 15px;
animation: dotFlashing 1s infinite alternate;
animation-delay: 1s;
}
@keyframes dotFlashing {
0% { background-color: var(--primary-color); }
50%, 100% { background-color: rgba(13, 110, 253, 0.2); }
}
