* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #e5ddd5;
  color: #1a1a1a;
}
.hidden { display: none !important; }

/* Auth */
#auth-screen { height: 100vh; display: flex; align-items: center; justify-content: center; background: #075e54; }
.auth-box { background: white; padding: 32px; border-radius: 12px; width: 320px; display: flex; flex-direction: column; gap: 12px; }
.auth-box h1 { margin: 0 0 8px; color: #075e54; text-align: center; }
.auth-actions { display: flex; gap: 8px; }
.error { color: #d32f2f; min-height: 1.2em; font-size: 0.9em; }

input, textarea, button {
  font: inherit;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
button {
  background: #25d366;
  color: white;
  border: none;
  cursor: pointer;
}
button.secondary { background: #eee; color: #333; }
button:hover { filter: brightness(0.95); }

/* App shell */
#app-screen { height: 100vh; display: flex; flex-direction: column; }
#top-bar { background: #075e54; color: white; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; }
.avatar-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #ccc; }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #ccc; align-self: center; }
.top-actions { display: flex; gap: 8px; }

#body-layout { flex: 1; display: flex; min-height: 0; }
#contacts { width: 280px; background: white; overflow-y: auto; border-right: 1px solid #ddd; }
.contact-row { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.contact-row:hover, .contact-row.active { background: #f5f5f5; }

#chat-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.empty-state { margin: auto; color: #888; }
#chat-active { display: flex; flex-direction: column; height: 100%; }
#chat-header { background: #f0f0f0; padding: 10px 16px; }

#messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 60%; padding: 8px 10px; border-radius: 8px; position: relative; }
.msg.mine { align-self: flex-end; background: #dcf8c6; }
.msg.theirs { align-self: flex-start; background: white; }
.msg .meta { font-size: 0.7em; color: #888; margin-top: 4px; }
.msg img.attachment { max-width: 220px; border-radius: 6px; display: block; }
.msg .delete-btn { position: absolute; top: -8px; right: -8px; background: #d32f2f; color: white; border-radius: 50%; width: 20px; height: 20px; padding: 0; font-size: 12px; line-height: 1; cursor: pointer; }

#pending-attachment { padding: 8px 16px; background: #fffbe6; border-top: 1px solid #eee; display: flex; align-items: center; gap: 10px; }
#compose { display: flex; gap: 8px; padding: 10px; background: #f0f0f0; }
#compose input[type=text] { flex: 1; }
#compose button { padding: 10px 12px; }

/* Modals */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.modal-box { background: white; padding: 24px; border-radius: 12px; width: 320px; display: flex; flex-direction: column; gap: 12px; max-height: 80vh; overflow-y: auto; }
.modal-box h2 { margin: 0; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

.scheduled-item { border-bottom: 1px solid #eee; padding: 8px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scheduled-item .info { font-size: 0.9em; }