/* --- BASE STYLES --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }

body, html {
  height: 100%; width: 100%;
  /* Change: Background Beige se Cool Grey kar diya */
  background: #eceff1;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
}

/* --- LOGIN CONTAINER --- */
.container {
  width: 95%; max-width: 500px;
  background: rgba(255,255,255,0.9); /* Milky White */
  border-radius: 24px; padding: 30px;
  /* Change: Shadow Blueish kar diya */
  box-shadow: 0 8px 40px rgba(13, 71, 161, 0.15);
  /* Change: Text Color Green se Royal Blue */
  text-align: center; color: #0d47a1;
  display: flex; flex-direction: column; justify-content: center;
}
h2 { font-size: 2em; margin-bottom: 20px; }
.input-group { margin-bottom: 15px; width: 100%; }
.input-group input {
  width: 100%; padding: 14px; border-radius: 8px;
  border: 1px solid #ccc; outline: none; font-size: 16px; background: #fff;
}
button {
  width: 100%; 
  /* Change: Main Button Bright Blue */
  background: #2196f3; 
  border: none;
  padding: 14px; border-radius: 8px; color: #fff;
  cursor: pointer; margin-bottom: 10px; font-weight: bold; font-size: 16px;
}
/* Change: Signup Button Dark Blue */
.signup-btn { background: #0d47a1; }
#auth-error-msg { color: #d32f2f; font-size: 14px; margin-top: 5px; display: none; }

/* --- SCREENS --- */
#users-screen, #chat-screen {
  display: none; background: #fff;
  width: 100%; height: 100%;
  flex-direction: column; overflow: hidden;
  position: absolute; top: 0; left: 0;
}

/* --- HEADERS --- */
.users-header, .chat-header {
  /* Change: Header Dark Blue */
  background: #0d47a1; 
  color: white; padding: 15px;
  font-size: 18px; font-weight: bold;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.header-btns { display: flex; gap: 8px; align-items: center; }
.small-btn {
  background: rgba(255,255,255,0.2); border: none;
  padding: 6px 12px; color: white; border-radius: 6px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.back-btn {
  background: none; border: none; color: white;
  font-size: 22px; cursor: pointer; margin-right: 10px; padding: 0 5px;
}

/* --- CONTACT LIST --- */
.users-list {
  flex-grow: 1; overflow-y: auto; padding: 10px; background: #f0f0f0;
}
.user-card {
  background: white; padding: 15px; margin-bottom: 10px;
  border-radius: 10px; cursor: pointer; display: flex; align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.user-avatar {
  min-width: 45px; height: 45px; background: #ddd; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  margin-right: 15px; font-weight: bold; color: #555; font-size: 18px;
}
/* Change: Group Icon Blue */
.group-avatar { background: #2196f3; color: white; }
.user-info-name { font-weight: bold; font-size: 16px; color: #333; }
.user-info-email { font-size: 12px; color: #888; }

/* --- REQUEST CARD --- */
.req-card {
  /* Change: Request Card Light Blueish */
  background: #e3f2fd; 
  padding: 10px; margin-top: 10px;
  /* Change: Border Light Blue */
  border-radius: 8px; border: 1px solid #90caf9; text-align: left;
}
.req-actions { display: flex; gap: 10px; margin-top: 8px; }
.req-btn { padding: 6px 10px; font-size: 12px; border-radius: 4px; border: none; cursor: pointer; color: white; flex: 1; font-weight: bold; }
/* Change: Accept Button Blue */
.accept-btn { background: #2196f3; }
.reject-btn { background: #ff4444; }

/* --- COPY UID BOX --- */
.uid-box {
  background: #f5f5f5; padding: 10px; border-radius: 5px;
  font-size: 13px; color: #333; margin: 10px 0; word-break: break-all;
  border: 1px dashed #999; font-family: monospace;
}
.copy-btn {
  /* Change: Copy Button Dark Blue */
  background: #0d47a1; 
  padding: 6px 12px; font-size: 12px;
  margin-top: 5px; color: white; border: none; border-radius: 4px; cursor: pointer;
}

/* --- CHAT AREA --- */
.chat-box {
  flex-grow: 1; padding: 15px; 
  /* Change: Chat Background Cool Grey */
  background: #eceff1;
  overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.chat-input-area {
  display: flex; padding: 10px; background: #f0f0f0;
  align-items: center; border-top: 1px solid #ddd; flex-shrink: 0;
}
.chat-input-area input {
  flex-grow: 1; padding: 12px; border-radius: 20px;
  border: none; outline: none; margin: 0 10px;
}
.icon-btn { background: none; width: auto; color: #555; font-size: 24px; cursor: pointer; padding: 0 5px; }

/* MESSAGES */
.message {
  padding: 8px 12px; border-radius: 8px; margin: 2px 0;
  max-width: 75%; word-wrap: break-word; position: relative;
}
/* Change: My Message Bubble Light Blue */
.my-message { background: #bbdefb; align-self: flex-end; text-align: right; }
.other-message { background: #fff; align-self: flex-start; text-align: left; }
.sender-name { font-size: 10px; font-weight: bold; color: #d9534f; display: block; margin-bottom: 2px;}
.msg-img { max-width: 100%; border-radius: 5px; margin-top: 5px; display: block; }
.msg-time { font-size: 9px; color: #777; display: block; margin-top: 2px; }

/* MODAL & TOAST */
#custom-modal {
  display: none; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; background: rgba(0,0,0,0.5);
  z-index: 200; justify-content: center; align-items: center;
}
.modal-content { background: white; padding: 25px; border-radius: 15px; width: 85%; max-width: 320px; text-align: center; max-height: 80vh; overflow-y: auto; }
#modal-input { width: 100%; padding: 10px; border: 1px solid #ccc; margin: 15px 0; display: none; }
.modal-btn { width: auto; padding: 8px 20px; margin: 5px; border-radius: 5px; border: none; font-weight: bold; cursor: pointer; }

#toast-box {
  visibility: hidden; min-width: 250px; background: #333; color: #fff;
  text-align: center; border-radius: 50px; padding: 12px;
  position: fixed; z-index: 300; left: 50%; bottom: 30px;
}
#toast-box.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }