:root {
  --primary: darkcyan;
  --accent: gold;
  --bg: #f7fbfb;
}

/* CHAT BUTTON */
.chat-toggle {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), #014d4d);
  color: white;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 99;
}

/* CHAT WINDOW */
.chat-container {
  position: fixed;
  bottom: 110px;
  right: 25px;
  width: 380px;
  height: 520px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 999;
}
.chat-header {
  background: var(--primary);
  color: white;
  padding: 16px;
  display: flex;
  align-items: center;
}
.chat-header h3 {
  font-size: 16px;
}
.close {
  margin-left: auto;
  cursor: pointer;
  font-size: 20px;
}
.chat-messages {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f4fafa;
}

/* MESSAGES */
.message {
  max-width: 75%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
}
.user {
  align-self: flex-end;
  background: var(--primary);
  color: white;
}
.bot {
  align-self: flex-start;
  background: white;
  border: 1px solid #eee;
}

/* INPUT */
.chat-input {
  display: flex;
  padding: 12px;
  border-top: 1px solid #eee;
}
.chat-input input {
  flex: 1;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid #ddd;
  outline: none;
}
.chat-input button {
  margin-left: 8px;
  border: none;
  width: 45px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 18px;
  cursor: pointer;
}

/* TYPING */
.typing {
  display: flex;
  gap: 5px;
  padding: 10px;
}
.typing span {
  width: 6px;
  height: 6px;
  background: #777;
  border-radius: 50%;
  animation: typing 1s infinite;
}
.typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typing {
  0%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}
/* chat open animation */

.chat-container{
opacity:0;
transform:translateY(20px) scale(.95);
transition:all .35s ease;
}

.chat-container.active{
display:flex;
opacity:1;
transform:translateY(0) scale(1);
}

/* message fade */

.message{
animation:fadeUp .3s ease;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* delete icon */

#deleteChatBtn{
margin-left:auto;
margin-right:10px;
cursor:pointer;
font-size:16px;
opacity:.8;
transition:.2s;
}

#deleteChatBtn:hover{
opacity:1;
transform:scale(1.1);
}
/*Modal */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
display:none;
justify-content:center;
align-items:center;
z-index:999;
}

.modal-box{
background:white;
padding:25px;
border-radius:10px;
width:280px;
text-align:center;
}

.modal-buttons{
margin-top:15px;
display:flex;
justify-content:space-between;
}

.modal-buttons button{
padding:8px 12px;
border:none;
border-radius:6px;
cursor:pointer;
}

#confirmDelete{
background:red;
color:white;
}

#cancelDelete{
background:#ddd;
}