* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: #111b21;
  background: #fff;
}

.app { display: flex; height: 100vh; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 320px; flex-shrink: 0; background: #fff; border-right: 1px solid #e9edef;
  display: flex; flex-direction: column;
}
.sidebar-header {
  padding: 14px 20px; border-bottom: 1px solid #e9edef; background: #f0f2f5;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #25d366; }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: #111b21; }

.chat-list { flex: 1; overflow-y: auto; background: #fff; }
.chat-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; border-bottom: 1px solid #f2f2f2;
}
.chat-item.active { background: #f0f2f5; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; background: #075e54; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px;
  flex-shrink: 0;
}
.chat-item-text { min-width: 0; }
.chat-item-name { font-weight: 600; font-size: 14.5px; color: #111b21; }
.chat-item-sub { font-size: 12.5px; color: #25d366; margin-top: 2px; font-weight: 500; }
.chat-item-sub.offline { color: #8696a0; font-weight: 400; }

/* ---------- conversation pane ---------- */
.conversation { flex: 1; display: flex; flex-direction: column; }

.conv-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #f0f2f5;
  border-bottom: 1px solid #e9edef; flex-shrink: 0;
}
.conv-title { font-weight: 600; font-size: 15px; color: #111b21; }
.conv-status { font-size: 12.5px; color: #667781; margin-top: 1px; }
.conv-status.online { color: #075e54; font-weight: 500; }

.conv-body {
  flex: 1; overflow-y: auto; padding: 20px 6%; display: flex; flex-direction: column; gap: 6px;
  background-color: #efeae2;
  background-image: url('whatsapp-bg.svg');
  background-repeat: repeat;
  background-size: 220px 220px;
}
.empty-state {
  margin: auto; color: #667781; font-size: 13.5px; text-align: center; max-width: 320px;
  background: #ffeecd; padding: 8px 14px; border-radius: 8px;
}

.msg { max-width: min(65%, 480px); padding: 6px 9px 8px; border-radius: 8px; font-size: 14.2px; line-height: 1.4; box-shadow: 0 1px 0.5px rgba(0,0,0,.13); position: relative; }
.msg.agent { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.msg.visitor { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; }
.msg-text { white-space: pre-wrap; word-break: break-word; padding: 0 4px; }
.msg-time { font-size: 10.5px; color: #667781; margin-top: 2px; text-align: right; padding-right: 2px; }

.msg-attachment img, .msg-attachment video { max-width: 260px; max-height: 260px; border-radius: 6px; display: block; }
.msg-attachment audio { width: 240px; }
.msg-file {
  display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.03); border-radius: 6px; padding: 8px 10px; min-width: 200px;
}
.msg-file-icon { width: 34px; height: 34px; border-radius: 6px; background: #075e54; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-file-name { font-size: 13px; word-break: break-all; }

.conv-input {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #f0f2f5; flex-shrink: 0; position: relative;
}
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #54656f; flex-shrink: 0;
}
.icon-btn:hover { background: rgba(0,0,0,0.05); }
#msgInput {
  flex: 1; border: none; border-radius: 22px; padding: 11px 18px; font-size: 14.5px; outline: none; background: #fff;
}
#sendBtn {
  background: #075e54; border: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
#sendBtn svg { width: 18px; height: 18px; }
#sendBtn.recording { background: #d9534f; }

.attach-menu {
  position: absolute; bottom: 60px; left: 16px; background: #fff; border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.2); padding: 8px; display: none; flex-direction: column; gap: 2px;
  min-width: 200px; z-index: 20;
}
.attach-menu.open { display: flex; }
.attach-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #111b21;
}
.attach-item:hover { background: #f0f2f5; }
.attach-icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.attach-icon.ai-doc { background: #7f66ff; }
.attach-icon.ai-media { background: #007bfc; }
.attach-icon.ai-camera { background: #ff2e74; }
.attach-icon.ai-audio { background: #ff7a00; }

.upload-progress { font-size: 12px; color: #667781; padding: 0 20px 6px; }

@media (max-width: 640px) {
  .sidebar { display: none; }
}