/* =========================================================================
   AnonFun Chat v2.0 – iMessage-Inspired, with Realistic Two-Layer Tails
   -------------------------------------------------------------------------
   Retains your element structure:
     - .message.you, .message.other
     - .sender-you, .sender-other
   BUT ensures .username-bubble never shows tails by restricting tail rules 
   to .sender-you:not(.username-bubble) and .sender-other:not(.username-bubble).
   ========================================================================= */

/* Base Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  color: #333;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  background-size: cover;  
}

/* BODY STYLING */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* HEADER BAR */
.header-bar {
  width: 100%;
  background: #3a3a3a; 
  color: #fff;
  padding: 10px 20px;
  position: fixed;
  top: 0; 
  left: 0;
  z-index: 1000; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.user-info {
  display: flex; 
  align-items: center; 
  font-size: 1.2em;
}

/* STATUS INDICATOR */
.status-indicator {
  width: 12px; 
  height: 12px; 
  border-radius: 50%; 
  margin-right: 8px;
  transition: background-color 0.3s ease;
}
.status-indicator.online {
  background-color: #28a745;
}
.status-indicator.busy {
  background-color: #fd7e14;
}
.status-indicator.away {
  background-color: #dc3545;
}

/* MAIN CONTAINER */
#chat-container {
  margin-top: 70px; /* so it sits below the fixed header */
  padding: 1rem;
}

/* ONLINE USERS COLUMN */
#online-users {
  max-height: 500px; 
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
  padding: 15px;
  transition: box-shadow 0.3s ease;
}

#online-users:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* SINGLE USER ITEM */
.user {
  display: flex; 
  align-items: center; 
  padding: 10px; 
  border-radius: 8px;
  transition: background-color 0.3s ease;
  cursor: pointer;
  color: #333;
  background-color: #eee;
  margin-bottom: 5px;
  text-decoration: none;
}

.user:hover {
  background-color: #ccc;
}

.self-user {
  background-color: #d4edda; 
  font-weight: bold;
}

/* MESSAGES COLUMN */
#messages {
  max-height: 400px; 
  min-height: 400px; 
  font-size: 16px;
  overflow-y: auto;
  background-color: #eee; 
  padding: 20px; 
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
  margin-bottom: 20px;
  display: flex; 
  flex-direction: column; 
  transition: box-shadow 0.3s ease;
}

#messages:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* INDIVIDUAL MESSAGE WRAPPER 
   .message = container
   .message.you  => outgoing (my side)
   .message.other => incoming
*/
.message {
  display: flex; 
  flex-direction: column; 
  margin-bottom: 10px;  
  line-height: 1.4;
  position: relative; /* for tail positioning */
}

/* .message.you = My outgoing side */
.message.you {
  align-items: flex-end;
}
/* .message.other = Their incoming side */
.message.other {
  align-items: flex-start;
}

/* The bubble for "me" */
.sender-you {
  background-color: #007aff; /* iMessage blue */
  color: #eee; 
  border-radius: 20px 20px 0 20px;
  max-width: 70%; 
  word-wrap: break-word; 
  position: relative; 
  padding: 10px 15px;
  margin-left: auto; /* ensures the bubble is on right side */
  margin-bottom: 5px;
}

/* The bubble for "them" */
.sender-other {
  background-color: #663366; /* android green */
  color: #eee; 
  border-radius: 20px 20px 20px 0;
  max-width: 70%; 
  word-wrap: break-word; 
  position: relative; 
  padding: 10px 15px;
  margin-right: auto; /* ensures bubble is on left side */
  margin-bottom: 5px;
}

/* TAIL STYLES: we do NOT apply them if .username-bubble is also present */
/* Only apply to .sender-you:not(.username-bubble) for .message.you */
.message.you .sender-you:not(.username-bubble)::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -7px;
  height: 20px;
  width: 20px;
  background: #007aff;
  border-bottom-left-radius: 15px;
}
.message.you .sender-you:not(.username-bubble)::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 20px;
  background: #eee;
  border-bottom-left-radius: 10px;
}

/* Only apply to .sender-other:not(.username-bubble) for .message.other */
.message.other .sender-other:not(.username-bubble)::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -7px;
  height: 20px;
  width: 20px;
  background: #663366;
  border-bottom-right-radius: 15px;
}
.message.other .sender-other:not(.username-bubble)::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 20px;
  background: #eee;
  border-bottom-right-radius: 10px;
}

/* USERNAME BUBBLE 
   We do NOT want tails on these, so no :before/:after is declared for them.
*/
.username-bubble {
  display: inline-block;
  font-weight: 500;
  padding: 4px 10px;
  margin-bottom: 4px;
  border-radius: 12px;
  color: #333;
  background: #f0f0f0;
  /* or something else subtle */
  /* no tail styles here */
}

/* MESSAGE FORM */
#message-form .input-group {
  display: flex;
  align-items: stretch;
}
#message-form textarea {
  resize: none;
  border-radius: 12px 0 0 12px;
  border: 1px solid #ced4da;
  transition: border-color 0.2s ease;
}
#message-form textarea:focus {
  outline: none;
  border-color: #007aff;
}
#message-form .btn {
  border-radius: 0 12px 12px 0;
}

/* BUTTONS (Disconnect, Report, Block) */
#disconnect-btn, 
#report-btn, 
#block-btn {
  margin-top: 10px;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

#disconnect-btn {
  background-color: #dc3545;
  color: #fff;
}
#disconnect-btn:hover {
  background-color: #c82333;
}

#report-btn {
  background-color: #ffc107;
  color: #212529;
}
#report-btn:hover {
  background-color: #e0a800;
}

#block-btn {
  background-color: #007bff;
  color: #fff;
}
#block-btn:hover {
  background-color: #0056b3;
}

/* HEADERS & TEXT */
h3 {
  font-size: 1.25rem; 
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.text-center {
  text-align: center !important;
}

/* SCROLLBAR (Chrome, Edge) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f0f2f5;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: #cfd2d4;
  border-radius: 5px;
  border: 1px solid #f0f2f5;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #b1b4b7;
}