/* Improved styles for better visuals and responsiveness */
:root{
  --bg:#f5f6fa;
  --card:#ffffff;
  --primary:#2ecc71;
  --primary-2:#27ae60;
  --accent:#3498db;
  --muted:#7f8c8d;
  --header:#2c3e50;
}

* { box-sizing:border-box }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; padding:0; background:var(--bg); color:#222; -webkit-font-smoothing:antialiased }
.header { background:var(--header); color:white; padding:14px 16px; display:flex; align-items:center; justify-content:space-between }
.header h3 { margin:0; font-weight:600 }
.container { max-width:1100px; margin:20px auto; padding:12px }
.card { background:var(--card); padding:14px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06) }
.form-card { padding:18px }
.flex { display:flex; gap:16px; align-items:flex-start }
.sidebar { width:320px; min-width:260px }
.chat-area { flex:1; min-height:520px; display:flex; flex-direction:column }
.contact { padding:10px; border-bottom:1px solid #f0f0f0; cursor:pointer; transition:background .12s, transform .06s; display:flex; justify-content:space-between; align-items:center }
.contact:hover { background:#fafafa; transform:translateY(-1px) }
.message-list { flex:1; overflow:auto; padding:14px; background:linear-gradient(180deg, #fafafa, #fff) }
.message { margin:10px 0; padding:10px 12px; border-radius:12px; max-width:78%; word-break:break-word; box-shadow:0 1px 0 rgba(0,0,0,0.02) }
.message.me { background:#dcf8c6; margin-left:auto }
.message.other { background:#fff; margin-right:auto; border:1px solid #f0f0f0 }
.input-row { display:flex; gap:8px; padding:10px; border-top:1px solid #eee; align-items:center }
input[type="text"], input[type="email"], input[type="password"], textarea { width:100%; padding:10px; border:1px solid #e6e9ee; border-radius:8px; font-size:14px }
button { padding:8px 14px; border:none; background:var(--primary); color:white; border-radius:8px; cursor:pointer; font-weight:600 }
button.secondary { background:var(--accent) }
button.disabled { opacity:.6; cursor:not-allowed }
.small { font-size:12px; color:var(--muted) }
.muted { color:var(--muted) }
.msg-time { margin-top:6px; text-align:right; font-size:11px; opacity:.7 }
@media (max-width:880px){
  .flex{flex-direction:column}
  .sidebar{width:100%}
  .chat-area{min-height:60vh}
}