html {
height: 100%;
}
body {
background: linear-gradient(-45deg, #2a1f16, #3b2a1f, #4f3826, #2a1f16);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
color: #e6dcc8;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.chat-header img {
height: 52px;
width: auto;
object-fit: cover;
}
p, li, pre {
font-size: 0.8rem;
color: #d4c4b0;
}
h3 {
font-size: 1.0rem;
color: #f0e6d2;
}
h2 {
font-size: 1.0rem;
color: #e8dcc8;
}
h1 {
font-size: 0.9rem;
color: #f2e8d8;
}
td, th {
font-size: 0.8rem;
color: #d4c4b0;
}
.typing-text {
font-size: 0.8rem;
color: #c4a882;
}
#balance {
font-size: 0.7rem;
color: #b8a08a;
font-style: italic;
}
strong {
font-size: 0.8rem;
color: #f5e8d0;
}
.form-control::placeholder {
color: #8a7460;
opacity: 1;
}
.form-control::-webkit-input-placeholder { color: #8a7460; opacity: 1; }
.form-control::-moz-placeholder { color: #8a7460; opacity: 1; }
.form-control:-ms-input-placeholder { color: #8a7460; opacity: 1; }
.form-control:-moz-placeholder { color: #8a7460; opacity: 1; }
p img {
width: 100%;
border-radius: 1rem;
border: 1px solid #6b4c3b;
box-shadow: 1px 2px 0.8rem 0 rgba(60, 40, 20, 0.5);
}
p:has(img) {
text-align: center;
}
.chat-container {
max-width: 800px;
height: 100%;
box-sizing: border-box;
}
.chat-header {
background: linear-gradient(90deg, #3b2a1f 0%, #5c3a2a 50%, #3b2a1f 100%);
background-size: 200% 200%;
animation: headerGlow 8s ease infinite;
color: #f2e8d8;
padding: 0.3rem 1.6rem;
border-radius: 15px 15px 0 0;
border: 1px solid #6b4c3b;
box-shadow: 0 4px 15px rgba(50, 30, 15, 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(139, 90, 43, 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: #251810;
border-right: 1px solid #3b2a1f;
border-left: 1px solid #3b2a1f;
}
.message {
max-width: 80%;
padding: 0.5rem 0.8rem 0 0.8rem;
border-radius: 15px;
border: 1px solid #6b4c3b;
position: relative;
word-wrap: break-word;
opacity: 0;
transform: translateY(10px);
animation: messageAppear 0.4s ease-out forwards;
box-shadow: 0 4px 15px rgba(40, 25, 15, 0.4);
margin-bottom: 1rem;
color: #e6dcc8;
}
@keyframes messageAppear {
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-messages::-webkit-scrollbar {
width: 10px;
}
.chat-messages::-webkit-scrollbar-track {
background: #251810;
border-radius: 5px;
}
.chat-messages::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #4f3826, #6b4c3b);
border-radius: 5px;
border: 2px solid #251810;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to bottom, #6b4c3b, #8a5c4b);
}
.chat-messages {
scrollbar-width: thin;
scrollbar-color: #6b4c3b #251810;
}
.user-message {
background: linear-gradient(135deg, #4f3826 0%, #5c4033 100%);
margin-left: auto;
border-bottom-right-radius: 0;
box-shadow: 0 2px 20px rgba(80, 50, 30, 0.4);
border: 1px solid #7a5c4b;
}
.ai-message {
background: linear-gradient(135deg, #3b2a1f 0%, #4a3528 100%);
margin-right: auto;
border-bottom-left-radius: 0;
box-shadow: 0 2px 20px rgba(60, 40, 20, 0.4);
border: 1px solid #6b4c3b;
}
.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(40, 25, 15, 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, 30, 15, 0.5);
color: #c4a882;
}
.copy-btn:hover {
transform: scale(1.1);
background: #4f3826;
box-shadow: 0 6px 15px rgba(80, 50, 30, 0.6);
}
.typing-indicator {
display: flex;
align-items: center;
padding: 0.6rem 1.2rem;
background: transparent;
border: 1px solid #6b4c3b;
border-radius: 15px;
width: fit-content;
box-shadow: 0px 0px 12px rgba(107, 76, 59, 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, #8b5a2b 0%, #c4a882 100%);
border-radius: 50%;
margin: 0 4px;
box-shadow: 0 2px 6px rgba(139, 90, 43, 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: #251810;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
border-left: 1px solid #3b2a1f;
border-right: 1px solid #3b2a1f;
border-bottom: 1px solid #3b2a1f;
}
.btn {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border-radius: 12px;
border: 1px solid #5c3a2a;
box-shadow: 0 4px 12px rgba(40, 25, 15, 0.5);
color: #f2e8d8;
}
.btn-dark {
margin-left: 0.5rem;
background: linear-gradient(180deg, #4f3826 0%, #3b2a1f 100%);
}
.btn:hover {
transform: scale(0.95);
box-shadow: 0 6px 15px rgba(107, 76, 59, 0.6);
}
#sendBtn {
background: linear-gradient(180deg, #8b5a2b 0%, #6b4c3b 100%);
box-shadow: none;
border: none;
}
#sendBtn:hover {
color: #f0e6d2;
transform: scale(0.97);
box-shadow: 0 6px 15px rgba(139, 90, 43, 0.7);
}
.form-control {
border-radius: 15px;
border: none;
transition: all 0.3s;
padding: 0.8rem 1rem;
font-size: 0.8rem;
background-color: #3b2a1f;
color: #e6dcc8;
caret-color: #c4a882;
}
.form-control:focus {
outline: none;
border-color: #8b5a2b;
background-color: #4f3826;
color: #f0e6d2;
box-shadow: 0 0 0 0.20rem rgba(139, 90, 43, 0.4);
}
.message::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 15px;
background: linear-gradient(135deg, rgba(107, 76, 59, 0.15), transparent);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.message:hover::after {
opacity: 1;
}