* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Segoe UI", Helvetica, Arial, sans-serif; background: #111b21; height: 100vh; }
.app { display: flex; height: 100vh; max-width: 1400px; margin: 0 auto; }
.sidebar { width: 30%; min-width: 280px; background: #111b21; border-right: 1px solid #222d34; }
.sidebar-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #202c33; color: #e9edef; font-weight: 600; }
.wa-logo { width: 26px; height: 26px; flex: none; }
.me-avatar { width: 34px; height: 34px; border-radius: 50%; background: #6a7175; margin-left: auto; flex: none; }
.chat-item { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; align-items: center; }
.chat-item.active { background: #2a3942; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; background: #fff; padding: 8px; flex: none; }
.chat-name { color: #e9edef; font-size: 15px; }
.chat-last, .chat-status { color: #8696a0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.chat { flex: 1; display: flex; flex-direction: column; background: #0b141a url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" opacity="0.04"><circle cx="20" cy="20" r="2" fill="white"/><circle cx="60" cy="55" r="2" fill="white"/></svg>'); }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #202c33; }
.messages { flex: 1; overflow-y: auto; padding: 20px 8%; display: flex; flex-direction: column; gap: 4px; }
/* Ancla la conversación abajo (como WhatsApp Web) sin romper el scroll al desbordar */
.messages > :first-child { margin-top: auto; }
.msg { max-width: 65%; padding: 7px 10px; border-radius: 8px; color: #e9edef; font-size: 14.5px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; position: relative; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.35); }
.msg.bot { background: #202c33; align-self: flex-start; border-top-left-radius: 0; }
.msg.user { background: #005c4b; align-self: flex-end; border-top-right-radius: 0; }
.msg .time { display: inline-block; margin-left: 8px; font-size: 11px; color: #8696a0; vertical-align: bottom; float: right; margin-top: 4px; }
.msg.user .time { color: rgba(233, 237, 239, 0.6); }
.msg.user .time::after { content: " ✓✓"; color: #53bdeb; }
.msg a { color: #53bdeb; }
.typing { align-self: flex-start; background: #202c33; border-radius: 8px; padding: 10px 14px; color: #8696a0; font-size: 13px; }
.composer { display: flex; gap: 10px; padding: 10px 16px; background: #202c33; align-items: center; }
.composer input { flex: 1; background: #2a3942; border: none; border-radius: 8px; padding: 12px 14px; color: #e9edef; font-size: 15px; outline: none; }
.composer button { background: none; border: none; color: #8696a0; font-size: 22px; cursor: pointer; }
.messages::-webkit-scrollbar { width: 6px; }
.messages::-webkit-scrollbar-thumb { background: #374045; border-radius: 3px; }