:root {
  --primary: #E4007C; /* Sottcor Magenta */
  --secondary: #F58220; /* Sottcor Orange */
  --bg-gray: #F0F2F5; /* WhatsApp Gray */
  --white: #FFFFFF;
  --text-dark: #3B4043;
  --text-light: #667781;
  --bubble-out: #E4007C;
  --bubble-in: #FFFFFF;
  --border: rgba(0, 0, 0, 0.08);
  --sidebar-w: 360px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-gray);
  color: var(--text-dark);
  height: 100vh;
  overflow: hidden;
}

.screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Login Screen */
.login-card {
  background: white;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  text-align: center;
  width: 100%;
  max-width: 400px;
  animation: fadeIn 0.5s ease;
}
.login-card img { max-width: 100px; margin-bottom: 20px; }
.login-card h1 { font-size: 1.5rem; color: var(--primary); margin-bottom: 8px; }
.login-card p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 24px; }
.login-card input {
  display: block; width: 100%; padding: 14px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 1rem; outline: none; transition: 0.3s;
}
.login-card input:focus { border-color: var(--primary); }
.login-card button {
  width: 100%; padding: 14px; background: var(--primary); color: white;
  border: none; border-radius: 10px; font-weight: 700; cursor: pointer;
  transition: 0.3s; margin-top: 10px;
}
.login-card button:hover { background: #C20068; }

/* Messenger Layout */
.messenger-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  background: var(--white);
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}

.sidebar {
  width: var(--sidebar-w);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.sidebar header {
  padding: 10px 16px;
  height: 60px;
  background: var(--bg-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer;
}

.header-actions {
  display: flex; gap: 20px; color: #54656F; font-size: 1.2rem;
}
.header-actions i { cursor: pointer; transition: 0.2s; }
.header-actions i:hover { color: var(--primary); }

.search-bar { padding: 8px 12px; background: var(--white); border-bottom: 1px solid var(--border); }
.search-input {
  background: var(--bg-gray); border-radius: 10px; padding: 6px 12px;
  display: flex; align-items: center; gap: 10px;
}
.search-input i { color: var(--text-light); font-size: 0.8rem; }
.search-input input {
  border: none; background: transparent; flex: 1; outline: none; font-size: 0.9rem;
}

.conv-list { flex: 1; overflow-y: auto; }
.conv-item {
  display: flex; padding: 12px 16px; gap: 12px; cursor: pointer;
  transition: 0.2s; border-bottom: 1px solid var(--border);
}
.conv-item:hover { background: #F5F6F6; }
.conv-item.active { background: #EBEBEB; }
.conv-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #DFE5E7; color: #54656F;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.conv-meta { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; align-items: baseline; }
.conv-name { font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 0.75rem; color: var(--text-light); }
.conv-msg {
  font-size: 0.85rem; color: var(--text-light); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Chat Area */
.chat-area { flex: 1; background: #E5DDD5; position: relative; display: flex; flex-direction: column; }

.empty-state {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #F8F9FA; border-bottom: 6px solid var(--secondary);
}
.empty-state img { max-width: 120px; opacity: 0.8; margin-bottom: 20px; }
.empty-state h2 { color: #41525D; font-weight: 300; margin-bottom: 10px; }
.empty-state p { color: #667781; font-size: 0.9rem; }
.encryption-tag { margin-top: 40px; font-size: 0.75rem; color: #8696A0; display: flex; gap: 6px; }

.chat-view { height: 100%; display: flex; flex-direction: column; }
.chat-header {
  height: 60px; padding: 10px 16px; background: var(--bg-gray);
  display: flex; align-items: center; gap: 15px; border-left: 1px solid var(--border);
}
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: #D8D8D8; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.chat-meta h3 { font-size: 1rem; font-weight: 600; }
.chat-meta span { font-size: 0.75rem; color: var(--text-light); }

.messages-container {
  flex: 1; overflow-y: auto; padding: 20px 5%;
  background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
  background-repeat: repeat;
  display: flex; flex-direction: column; gap: 10px;
}

.bubble {
  max-width: 65%; padding: 8px 12px; border-radius: 8px; font-size: 0.95rem;
  line-height: 1.4; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.bubble.out { align-self: flex-end; background: var(--primary); color: white; border-top-right-radius: 0; }
.bubble.in { align-self: flex-start; background: var(--white); color: var(--text-dark); border-top-left-radius: 0; }
.bubble .time { font-size: 0.65rem; opacity: 0.7; float: right; margin-top: 4px; margin-left: 8px; }

.chat-footer {
  padding: 10px 16px; background: var(--bg-gray);
  display: flex; align-items: center; gap: 12px;
}
.voice-btn, .attach-btn, .send-btn { color: #54656F; font-size: 1.4rem; cursor: pointer; }
.input-wrap { flex: 1; padding: 0 8px; }
.input-wrap textarea {
  width: 100%; border: none; border-radius: 8px; padding: 10px 14px;
  background: white; outline: none; font-size: 0.95rem; resize: none;
}

/* Mobile Responsive */
#btn-back-mobile { display: none; font-size: 1.2rem; cursor: pointer; color: #54656F; }

@media (max-width: 768px) {
  .sidebar { width: 100%; }
  .chat-area { display: none; width: 100%; }
  #btn-back-mobile { display: block; }
  .messenger-wrapper.active-chat .sidebar { display: none; }
  .messenger-wrapper.active-chat .chat-area { display: flex; }
}

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