:root {
  --whatsapp-green: #FFD700;
  --whatsapp-light: #ffe600;
  --primary-color: #FFD700;
  --secondary-color: hsla(0, 0%, 0%, 0.369);
  --text-color: #ffe605;
  --light-text: #000000;
  --border-color: #0084ff;
  --error-color: #1b0401;
--whatsapp-dark-green: #D4AF37;
  --whatsapp-bg: #ffea00;
  --whatsapp-header: #FFEE58;
  --whatsapp-input: #760a0a;
  --received-msg: #ffe600;
  --sent-msg: #ffbf00;
  --msg-time: #ffc400;
  --status-indicator: #FFC400;
  --date-separator: #ffb700;
}
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-color);
}

/* Auth Page Styles */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--secondary-color);
}

.auth-box {
  background: rgb(194, 95, 9);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(52, 25, 25, 0.1);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.auth-box h1 {
  color: var(--primary-color);
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0.5rem;
}

.input-group i {
  padding: 0 10px;
  color: var(--light-text);
}

.input-group input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.5rem;
  font-size: 1rem;
}

.btn {
  width: 100%;
  padding: 0.8rem;
  background-color: var(--primary-color);
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  margin: 1rem 0;
}

.btn:hover {
  background-color: #000000;
}

.auth-link {
  color: var(--light-text);
  font-size: 0.9rem;
}

.auth-link a {
  color: var(--primary-color);
  text-decoration: none;
}

.auth-link a:hover {
  text-decoration: underline;
}
.chat-app {
  background-color: var(--whatsapp-bg);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.chat-container {
  display: flex;
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  background: rgb(0, 255, 60);
  position: relative;
}

/* Sidebar Styles */
.sidebar {
  width: 30%;
  min-width: 300px;
  border-right: 1px solid #000000;
  display: flex;
  flex-direction: column;
  background: rgb(0, 0, 0);
}

/* Chat Area Styles */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUY2QkY0MDVBMDg4MTFFQTg0MUY4MTE0ODVCMzVBNDUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUY2QkY0MDZBMDg4MTFFQTg0MUY4MTE0ODVCMzVBNDUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5RjZCRjQwM0EwODgxMUVBODQxRjgxMTQ4NUIzNUE0NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5RjZCRjQwNEEwODgxMUVBODQxRjgxMTQ4NUIzNUE0NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvXGU/8AAABeSURBVHjaYvz//z8DKYCJgVRAik4mxBsGRgEZ/jMw/Pv3jwFu4s+fP3/9+vX379/fv3///v37Dwj///8P5ADFgSxAORA2kA8St4F8sBRIHw+XhwtDRYCSQHWwDAAEGABEAQsuDVTaXwAAAABJRU5ErkJggg==");
}

/* Input Area Styles */
.input-area {
  background: var(--whatsapp-input);
  border-top: 1px solid #000000;
  padding: 10px;
}

.input-container {
  display: flex;
  align-items: center;
  background: rgb(0, 0, 0);
  border-radius: 8px;
  padding: 5px 10px;
}

.input-container input {
  flex-grow: 1;
  border: none;
  outline: none;
  padding: 9px 12px;
  font-size: 15px;
  background: transparent;
}

.input-container i {
  color: var(--msg-time);
  cursor: pointer;
  padding: 8px;
}