* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --wa-green: #075e54;
  --wa-green-light: #128c7e;
  --wa-bg: #e5ddd5;
  --bubble-in: #ffffff;
  --bubble-out: #dcf8c6;
  --tick: #34b7f1;
}
body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #d3d3d3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}
.phone {
  width: 100%;
  max-width: 430px;
  height: 90vh;
  max-height: 860px;
  display: flex;
  flex-direction: column;
  background: var(--wa-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

/* Header */
.wa-header {
  background: var(--wa-green);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.wa-header .back { background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wa-green-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}
.contact { display: flex; flex-direction: column; flex: 1; }
.contact .name { font-size: 15px; font-weight: 600; }
.contact .status { font-size: 12px; opacity: .85; }
.icons { font-size: 18px; opacity: .9; letter-spacing: 6px; }

/* Chat area */
.chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23e5ddd5'/%3E%3Ccircle cx='20' cy='20' r='1.2' fill='%23d8cfc4'/%3E%3C/svg%3E");
}
.msg {
  max-width: 78%;
  padding: 7px 10px 8px;
  border-radius: 9px;
  font-size: 14.5px;
  line-height: 1.4;
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.msg .time { display:block; font-size: 10.5px; color:#667781; text-align:right; margin-top:2px; }
.msg.in  { align-self: flex-start; background: var(--bubble-in); border-top-left-radius: 0; }
.msg.out { align-self: flex-end; background: var(--bubble-out); border-top-right-radius: 0; }
.msg.out .tick { color: var(--tick); margin-left: 3px; }

/* typing */
.typing { align-self: flex-start; background: var(--bubble-in); padding: 10px 14px; border-radius: 9px; border-top-left-radius:0; }
.typing span { display:inline-block; width:7px; height:7px; margin:0 2px; background:#9aa0a6; border-radius:50%; animation: blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,80%,100%{opacity:.3; transform:translateY(0);} 40%{opacity:1; transform:translateY(-3px);} }

/* Composer */
.composer { display:flex; align-items:center; gap:8px; padding:8px; background:#f0f0f0; }
.input-wrap { flex:1; display:flex; align-items:center; gap:8px; background:#fff; border-radius:22px; padding:8px 14px; }
.input-wrap .emoji, .input-wrap .clip { color:#8696a0; font-size:18px; }
.input-wrap input { flex:1; border:none; outline:none; font-size:15px; }
.send {
  width:46px; height:46px; border:none; border-radius:50%;
  background: var(--wa-green-light); color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.send:disabled { opacity:.5; cursor:not-allowed; }

.error-banner {
  background:#ffe2e2; color:#b00020; font-size:12.5px;
  text-align:center; padding:6px; align-self:center; border-radius:6px; max-width:90%;
}