/* assets/css/tcn-chat-style.css */

/* ===== Main Chat Container ===== */
/* This container holds both the sidebar and chat window */
.chat-container {
  display: flex;
  height: 800px;
  width: 100%;
  max-width: 1000px;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/*Old 001*/
/* ===== Sidebar: User List ===== */
/* Sidebar for listing users/conversations */
/*.chat-sidebar {
  width: 30%;
  background-color: #f0f0f0;
  border-right: 1px solid #ccc;
  overflow-y: auto;
}
*/
/* Individual user in sidebar */
/*.chat-user {
  padding: 15px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.2s;
}*/

/* Hover effect on user */
/*.chat-user:hover {
  background-color: #e0e0e0;
}*/

/* Highlight active user */
/*.chat-user.active {
  background-color: #d0d0d0;
  font-weight: bold;
}*/

/*End Old 001*/







/*New 001*/

/* ===== Sidebar Container (Desktop Layout) ===== */
.chat-sidebar {
  width: 30%;
  max-width: 300px; /* Prevent sidebar from being too wide */
  background-color: #f9f9f9;
  border-right: 1px solid #ccc;
  overflow-y: auto;
  padding: 10px 0;
}

/* ===== Partner Entry Item ===== */
.chat-user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  margin: 6px 12px;
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover effect */
.chat-user:hover {
  background-color: #eaeaea;
  border-color: #ddd;
}

/* Active user highlight */
.chat-user.active {
  background-color: #d6f5e3;
  border-color: #27ae60;
  font-weight: bold;
}

/* Optional: style text */
.chat-user strong {
  font-size: 16px;
  margin-bottom: 2px;
  color: #333;
}

.chat-user small {
  font-size: 12px;
  color: #777;
}
/* ===== Sidebar Container (Desktop Layout) ===== */

/*End new 001*/



/*New 002*/

/* ===== Toggle Button Style ===== */
.chat-toggle-btn {
  display: none;
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  background-color: #25d366;
  color: white;
  border: none;
  cursor: pointer;
}

/* Show toggle button on small screens */
@media (max-width: 768px) {
  .chat-toggle-btn {
    display: block;
  }

  .chat-container {
    flex-direction: column;
  }

  .chat-sidebar {
    display: none;
    width: 100%;
    max-height: 400px;
    border-right: none;
    border-bottom: 1px solid #ccc;
    z-index: 10;
    background-color: #f9f9f9;
  }

  .chat-sidebar.open {
    display: block;
  }
}
/* ===== Fade In/Out Animations ===== */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.fade-out {
  opacity: 1;
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ===== Overlay Styling ===== */
#chatOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* dark semi-transparent background */
  z-index: 5;
}

/* ===== Sidebar Slide + Fade Animation ===== */
@keyframes slideFadeIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFadeOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.chat-sidebar.fade-in {
  animation: slideFadeIn 0.3s ease forwards;
}

.chat-sidebar.fade-out {
  animation: slideFadeOut 0.3s ease forwards;
}


/* ===== Fade In/Out Animations ===== */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.fade-out {
  opacity: 1;
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/*End New 002*/




/* ===== Main Chat Area ===== */
/* Chat content section on the right */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%; /* Fill parent */
  overflow: hidden; /* Prevent overflow from child elements */
}


/* ===== Message Display Area ===== */
/* Area where messages are displayed */
.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  max-height: 100%;
}

/* Base message bubble style */
.message {
  max-width: 70%;
  padding: 10px 15px;
  margin: 8px 0;
  border-radius: 12px;
  clear: both;
}

/* Message from the current user */
.message.user {
  background-color: #dcf8c6;
  align-self: flex-end;
  margin-left: auto;
}

/* Message from the other party */
.message.owner {
  background-color: #fff;
  align-self: flex-start;
  margin-right: auto;
}
/* new 003 */
/* ===== Message Entry Animation ===== */
@keyframes bubbleFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tcn-chat-message.animate-in {
  animation: bubbleFadeIn 0.25s ease forwards;
}


/* end new 003 */


/* new 004  */
/* ===== Typing Indicator ===== */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 15px;
  margin: 10px 0;
  color: #555;
  font-size: 20px;
  height: 30px;
}

.typing-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #999;
  animation: typingBounce 1s infinite;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* new 004  */



/* ===== Message Input Area ===== */
/* Footer area with textarea and send button */
.chat-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #eee;
  background-color: #fafafa;
}
#chat-input-box {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 15px;
  resize: none;
  min-height: 45px;
  outline: none;
  transition: border 0.3s ease;
}

#chat-input-box:focus {
  border-color: #3ac162;
  box-shadow: 0 0 0 3px rgba(58, 193, 98, 0.2);
}

/* ===== Send Button Styling ===== */
.chat-input button {
  background-color: #25d366; /* WhatsApp green */
  color: white;
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  flex: 0 0 auto; /* Prevent shrinking */
}

.chat-input button:hover {
  background-color: #1ebe5d; /* Darker green on hover */
}

.chat-input button:active {
  transform: scale(0.95); /* Slight shrink on click */
}

.chat-input button:disabled {
  background-color: #ccc; /* Gray when disabled */
  cursor: not-allowed;
}

/* Textarea for typing messages */
.chat-input textarea {
  flex: 1;
  resize: none;
  height: 50px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}



/* ===== Additional TCN Chat Styles ===== */
/* Shared base message style for TCN layout */
.tcn-chat-message {
  max-width: 70%;
  padding: 10px 15px;
  margin: 8px 0;
  border-radius: 12px;
  clear: both;
  font-size: 14px;
  word-wrap: break-word;
}

/* Outgoing message (sender = current user) */
.tcn-outgoing {
  background-color: #dcf8c6;
  align-self: flex-end;
  margin-left: auto;
  border-radius: 12px 12px 0 12px;
  border: 1px solid #b2dfdb;
}

/* Incoming message (sender = other user) */
.tcn-incoming {
  background-color: #fff;
  align-self: flex-start;
  margin-right: auto;
  border-radius: 12px 12px 12px 0;
  border: 1px solid #ccc;
}

/* Timestamp styling below messages */
.tcn-chat-time {
  font-size: 10px;
  text-align: right;
  color: #888;
  margin-top: 4px;
}