html {
height: 100%;
}
body {
background: linear-gradient(-45deg, #0b1410, #0f1c16, #13241c, #0d1812);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
color: #d6e8d8;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.chat-header img {
padding-left: 1rem;
height: 52px;
width: auto;
object-fit: cover;
}
p, li, pre {
font-size: 0.8rem;
color: #c4dcc8;
}
h3 {
font-size: 1.0rem;
color: #e6f2e8;
}
h2 {
font-size: 1.0rem;
color: #dce8de;
}
h1 {
font-size: 0.9rem;
color: #eaf5ec;
}
td, th {
font-size: 0.8rem;
color: #c4dcc8;
}
.typing-text {
font-size: 0.8rem;
color: #b8d4be;
}
#balance {
font-size: 0.7rem;
color: #a8c8b0;
font-style: italic;
}
strong {
font-size: 0.8rem;
color: #d8e8c8;
}
.form-control::placeholder {
color: #80a088;
opacity: 1;
}
.form-control::-webkit-input-placeholder { color: #80a088; opacity: 1; }
.form-control::-moz-placeholder { color: #80a088; opacity: 1; }
.form-control:-ms-input-placeholder { color: #80a088; opacity: 1; }
.form-control:-moz-placeholder { color: #80a088; opacity: 1; }
p img {
width: 100%;
border-radius: 1rem;
border: 1px solid #4a7a58;
box-shadow: 1px 2px 0.8rem 0 rgba(60, 130, 80, 0.4);
}
p:has(img) {
text-align: center;
}
.chat-container {
max-width: 800px;
height: 100%;
box-sizing: border-box;
}
.chat-header {
background: linear-gradient(90deg, #14281e 0%, #28583a 50%, #14281e 100%);
background-size: 200% 200%;
animation: headerGlow 8s ease infinite;
color: #eaf5ec;
padding: 0.3rem 1.6rem;
border-radius: 15px 15px 0 0;
border: 1px solid #3a7a4a;
box-shadow: 0 4px 15px rgba(50, 140, 80, 0.6);
position: relative;
overflow: hidden;
}
@keyframes headerGlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* .chat-header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(60, 160, 100, 0.1), transparent);
animation: shimmer 8s ease-in-out infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
} */
.chat-messages {
height: calc(50vh);
overflow-y: auto;
background-color: #0d1812;
border-right: 1px solid #2a5a3a;
border-left: 1px solid #2a5a3a;
}
.message {
max-width: 80%;
padding: 0.5rem 0.8rem 0 0.8rem;
border-radius: 15px;
border: 1px solid #3a7a4a;
position: relative;
word-wrap: break-word;
opacity: 0;
transform: translateY(10px);
animation: messageAppear 0.4s ease-out forwards;
box-shadow: 0 4px 15px rgba(50, 140, 80, 0.3);
margin-bottom: 1rem;
color: #d6e8d8;
}
@keyframes messageAppear {
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-messages::-webkit-scrollbar {
width: 10px;
}
.chat-messages::-webkit-scrollbar-track {
background: #0d1812;
border-radius: 5px;
}
.chat-messages::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #28583a, #3a9a5a);
border-radius: 5px;
border: 2px solid #0d1812;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to bottom, #3a9a5a, #50b060);
}
.chat-messages {
scrollbar-width: thin;
scrollbar-color: #3a9a5a #0d1812;
}
.user-message {
background: linear-gradient(135deg, #14281e 0%, #1e3d2a 100%);
margin-left: auto;
border-bottom-right-radius: 0;
box-shadow: 0 2px 20px rgba(40, 100, 50, 0.4);
border: 1px solid #40c06096;
}
.ai-message {
background: linear-gradient(135deg, #112018 0%, #182e22 100%);
margin-right: auto;
border-bottom-left-radius: 0;
box-shadow: 0 2px 20px rgba(80, 160, 60, 0.4);
border: 1px solid #80c04083;
}
.message:hover .copy-btn {
opacity: 1;
}
.copy-btn {
position: absolute;
right: 5px;
bottom: 5px;
opacity: 0;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
background: rgba(20, 32, 24, 0.9);
border: none;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 3px 4px 12px 0 rgba(50, 140, 80, 0.5);
color: #a8d4b0;
}
.copy-btn:hover {
transform: scale(1.1);
background: #28583a;
box-shadow: 0 6px 15px rgba(60, 160, 100, 0.5);
}
.typing-indicator {
display: flex;
align-items: center;
padding: 0.6rem 1.2rem;
background: transparent;
border: 1px solid #3a7a4a;
border-radius: 15px;
width: fit-content;
box-shadow: 0px 0px 12px rgba(60, 160, 100, 0.4);
transform: scale(0.7);
opacity: 0;
animation: typingAppear 0.8s ease-out forwards;
}
@keyframes typingAppear {
to {
transform: scale(1);
opacity: 1;
}
}
.typing-dot {
width: 10px;
height: 10px;
background: linear-gradient(135deg, #50b060 0%, #70d088 100%);
border-radius: 50%;
margin: 0 4px;
box-shadow: 0 2px 6px rgba(90, 190, 120, 0.5);
animation: typingAnimation 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) {
animation-delay: 0s;
}
.typing-dot:nth-child(2) {
animation-delay: 0.3s;
}
.typing-dot:nth-child(3) {
animation-delay: 0.6s;
}
@keyframes typingAnimation {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
}
.input-container {
background: #0d1812;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
border-left: 1px solid #2a5a3a;
border-right: 1px solid #2a5a3a;
border-bottom: 1px solid #2a5a3a;
}
.btn {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 12px;
border: 1px solid #2a7a4a;
box-shadow: 0 4px 12px rgba(42, 90, 58, 0.5);
color: #eaf5ec;
}
.btn-dark {
margin-left: 0.5rem;
background: linear-gradient(180deg, #28583a 0%, #1e3d2a 100%);
}
.btn:hover {
transform: scale(0.95);
box-shadow: 0 6px 15px rgba(60, 160, 100, 0.5);
}
#sendBtn {
background: linear-gradient(180deg, #3a9a5a 0%, #28783a 100%);
box-shadow: none;
border: none;
}
#sendBtn:hover {
color: #d0f0d8;
transform: scale(0.97);
box-shadow: 0 6px 15px rgba(50, 140, 80, 0.6);
}
.form-control {
border-radius: 15px;
border: none;
transition: all 0.3s;
padding: 0.8rem 1rem;
font-size: 0.8rem;
background-color: #112018;
color: #d6e8d8;
caret-color: #70d088;
}
.form-control:focus {
outline: none;
border-color: #50b060;
background-color: #14281e;
color: #e6f2e8;
box-shadow: 0 0 0 0.20rem rgba(60, 160, 100, 0.4);
}
.message::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 15px;
background: linear-gradient(135deg, rgba(60, 160, 100, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.message:hover::after {
opacity: 1;
}