/* Variables */
:root{
  --bg:#f0f2f5;
  --panel:#fff;
  --green:#25d366;
  --muted:#8a8f98;
  --accent:#128c7e;
  --bubble-sent:var(--green);
  --bubble-recv:#ffffff;
  --max-width:420px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Inter, 'Segoe UI', Roboto, Arial, sans-serif;color:#111}
.app{display:flex;gap:18px;padding:20px;align-items:stretch;justify-content:center}
.panel{width:48%;max-width:calc(var(--max-width) + 200px);background:var(--panel);border-radius:8px;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.panel-header{background:linear-gradient(90deg,var(--accent),var(--green));padding:12px 16px;border-radius:8px 8px 0 0;color:#fff;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:700}
.status{font-size:13px;opacity:0.95}
.controls{padding:12px 16px;display:flex;gap:8px;align-items:center}
.controls .txt{flex:1;padding:8px 10px;border-radius:6px;border:1px solid #ddd}
.btn{padding:8px 10px;border-radius:6px;border:none;background:#eee;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}
.btn:hover{transform:translateY(-1px)}
.chat{display:flex;flex-direction:column;min-height:420px;height:60vh}
.messages{flex:1;padding:16px;overflow:auto;background:linear-gradient(#fafafa,transparent)}
.composer{display:flex;padding:10px;border-top:1px solid #eee;align-items:center}
.inputMsg{flex:1;padding:10px;border-radius:22px;border:1px solid #ddd;margin:0 8px}
.btn.send{background:var(--accent);color:#fff;border-radius:20px;padding:8px 12px}

/* Message bubbles */
.msg{display:flex;margin:6px 0;align-items:flex-end}
.msg .bubble{max-width:72%;padding:10px 12px;border-radius:16px;box-shadow:0 3px 6px rgba(0,0,0,0.06);position:relative}
.msg.sent{justify-content:flex-end}
.msg.sent .bubble{background:var(--bubble-sent);color:#042; border-bottom-right-radius:4px}
.msg.recv{justify-content:flex-start}
.msg.recv .bubble{background:var(--bubble-recv);color:#111;border:1px solid #eee;border-bottom-left-radius:4px}
.meta{font-size:11px;color:var(--muted);margin-top:6px}
.img-preview{max-width:200px;border-radius:10px;display:block}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:80}
.modal-content{position:relative;background:#fff;padding:12px;border-radius:8px;max-width:90%;max-height:90%}
.modal img{max-width:100%;max-height:80vh;border-radius:6px}
.modal-close{position:absolute;right:8px;top:8px;border:none;background:transparent;color:#444;font-size:18px;cursor:pointer}

/* Ticks for message status */
.tick {
  font-size: 10px;
  margin-left: 5px;
  color: var(--muted);
}

.tick.blue {
  color: #34b7f1; /* WhatsApp Blue Tick Color */
  font-weight: bold;
}

/* Conversations list */
.conversations{display:flex;flex-direction:column;padding:12px;gap:8px}
.conv{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.conv:hover{background:#f7f8fa;border-color:#eee;box-shadow:0 2px 6px rgba(0,0,0,0.03)}
.conv-title{font-weight:600}
.conv-sub{font-size:12px;color:var(--muted);margin-top:4px}
.conv .meta-right{display:flex;flex-direction:column;align-items:flex-end}
.unread-badge{background:#25d366;color:#fff;padding:4px 8px;border-radius:14px;font-size:12px;font-weight:700}

/* Back button */
.btn.back{background:transparent;color:#fff;border:none;font-size:16px;padding:6px 8px;margin-right:8px}
.chat-top{display:flex;align-items:center;padding:8px 12px;background:linear-gradient(90deg,var(--accent),var(--green));color:#fff}

/* Ensure conversation list looks like inbox */
.home-header{display:flex;justify-content:space-between;align-items:center;padding:8px}

/* small screens */
@media (max-width:900px){
  .app{flex-direction:column;gap:12px}
  .panel{width:100%}
}

/* subtle animations */
.bubble{transform-origin:bottom right;animation:pop .15s ease}
@keyframes pop{from{transform:scale(0.98);opacity:0}to{transform:scale(1);opacity:1}}