:root {
--bg: #272933;
--card: #f7f7f2;
--text: #272933;
--gold: #FFD700;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
background: var(--bg);
color: var(--card);
font-family: Arial, Helvetica, sans-serif;


display: flex;
justify-content: center;
align-items: center;

min-height: 100vh;
padding: 40px;


}

/* ===========================
BACK BUTTON
=========================== */

.back-button {
position: fixed;
top: 16px;
left: 16px;


width: 36px;
height: 36px;

border-radius: 50%;

background: var(--card);
color: var(--text);

display: flex;
align-items: center;
justify-content: center;

text-decoration: none;

font-size: 22px;
font-weight: 900;

line-height: 1;

box-shadow: 0 4px 12px rgba(0, 0, 0, .25);

z-index: 999;


}

/* ===========================
MAIN CONTAINER
=========================== */

.chat-container {
width: 100%;
max-width: 900px;


background: var(--bg);

border: 2px solid var(--card);
border-radius: 18px;

overflow: hidden;

box-shadow: 0 10px 30px rgba(0, 0, 0, .35);


}

/* ===========================
HEADER
=========================== */

.chat-header {
background: var(--card);
color: var(--text);


text-align: center;

padding: 25px;


}

.chat-header h1 {
font-size: 1.8rem;
margin-bottom: 8px;
}

.chat-header p {
font-size: .95rem;
}

/* ===========================
CHAT AREA
=========================== */

#chat-box {
height: 500px;


overflow-y: auto;

padding: 25px;

background: var(--bg);

display: flex;
flex-direction: column;

gap: 18px;


}

#chat-box::-webkit-scrollbar {
width: 10px;
}

#chat-box::-webkit-scrollbar-thumb {
background: var(--card);
border-radius: 20px;
}

/* ===========================
MESSAGES
=========================== */

.message {
background: var(--card);
color: var(--text);


border-radius: 12px;

padding: 12px;

max-width: 80%;

animation: pop .25s ease;

word-wrap: break-word;


}

.message strong {
display: block;


margin-bottom: 5px;

font-size: .95rem;


}

.message small {
display: block;


margin-top: 8px;

opacity: .6;

font-size: .75rem;


}

/* ===========================
YOUR MESSAGES
=========================== */

.mine {
align-self: flex-end;


background: #e9e9e2;


}

/* ===========================
INPUT AREA
=========================== */

.chat-input-area {
background: var(--card);


padding: 20px;

display: flex;
flex-direction: column;

gap: 8px;


}

.chat-input-area label {
color: var(--text);


font-size: .85rem;
font-weight: bold;

margin-top: 4px;


}

input,
textarea {
width: 100%;


border: none;
outline: none;

border-radius: 8px;

padding: 11px;

font-size: 1rem;

background: white;
color: var(--text);


}

textarea {
resize: none;


height: 90px;


}

/* ===========================
SEND BUTTON
=========================== */

button {
background: var(--text);
color: var(--card);


border: none;

border-radius: 8px;

cursor: pointer;

padding: 14px;

font-size: 1rem;
font-weight: bold;

transition: .2s;

margin-top: 5px;


}

button:hover {
transform: translateY(-2px);
}

button:active {
transform: translateY(0);
}

/* ===========================
ANIMATION
=========================== */

@keyframes pop {
from {
opacity: 0;
transform: translateY(10px);
}


to {
    opacity: 1;
    transform: translateY(0);
}


}

/* ===========================
MOBILE
=========================== */

@media (max-width: 700px) {


body {
    padding: 15px;
}

.chat-header h1 {
    font-size: 1.4rem;
}

#chat-box {
    height: 420px;
    padding: 15px;
}

.message {
    max-width: 90%;
}


}