|
:root { |
|
--primary: #4285f4; |
|
--secondary: #34a853; |
|
--background: #202124; |
|
--surface: #303134; |
|
--text: #e8eaed; |
|
--error: #ea4335; |
|
} |
|
|
|
* { |
|
box-sizing: border-box; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
body { |
|
background: var(--background); |
|
color: var(--text); |
|
font-family: 'Roboto Mono', monospace; |
|
height: 100vh; |
|
overflow: hidden; |
|
} |
|
|
|
.terminal-container { |
|
display: grid; |
|
grid-template-rows: 1fr auto; |
|
height: 100vh; |
|
max-width: 800px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
} |
|
|
|
.chat-output { |
|
flex: 1; |
|
overflow-y: auto; |
|
padding: 20px; |
|
background: var(--surface); |
|
border-radius: 8px; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.message { |
|
margin: 10px 0; |
|
padding: 15px; |
|
border-radius: 8px; |
|
animation: slideIn 0.3s ease; |
|
} |
|
|
|
.message.user { |
|
background: rgba(66, 133, 244, 0.1); |
|
border-left: 3px solid var(--primary); |
|
} |
|
|
|
.message.text { |
|
background: rgba(52, 168, 83, 0.1); |
|
border-left: 3px solid var(--secondary); |
|
} |
|
|
|
.message.error { |
|
background: rgba(234, 67, 53, 0.1); |
|
border-left: 3px solid var(--error); |
|
} |
|
|
|
.message.system { |
|
background: rgba(255, 255, 255, 0.05); |
|
border-left: 3px solid #666; |
|
} |
|
|
|
.input-container { |
|
display: flex; |
|
gap: 10px; |
|
align-items: center; |
|
padding: 15px; |
|
background: var(--surface); |
|
border-radius: 8px; |
|
} |
|
|
|
input { |
|
flex: 1; |
|
padding: 12px; |
|
background: rgba(255, 255, 255, 0.05); |
|
border: 1px solid var(--primary); |
|
color: var(--text); |
|
border-radius: 6px; |
|
font-family: inherit; |
|
font-size: 1em; |
|
} |
|
|
|
button { |
|
background: var(--primary); |
|
color: white; |
|
border: none; |
|
padding: 12px 24px; |
|
border-radius: 6px; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
button:hover { |
|
background: #1a73e8; |
|
} |
|
|
|
.download-link { |
|
color: var(--secondary); |
|
text-decoration: none; |
|
margin-top: 10px; |
|
display: inline-block; |
|
} |
|
|
|
.dot-flashing { |
|
position: relative; |
|
width: 10px; |
|
height: 10px; |
|
border-radius: 5px; |
|
background-color: var(--secondary); |
|
animation: dotFlashing 1s infinite linear; |
|
} |
|
|
|
@keyframes slideIn { |
|
from { transform: translateX(30px); opacity: 0; } |
|
to { transform: translateX(0); opacity: 1; } |
|
} |
|
|
|
@keyframes dotFlashing { |
|
0% { opacity: 0.2; } |
|
50% { opacity: 1; } |
|
100% { opacity: 0.2; } |
|
} |