.wa-web{display:grid;grid-template-columns:360px minmax(0,1fr);height:680px;background:#efeae2}
.wa-conversations{background:#fff;border-right:1px solid #dfe3e8;display:flex;flex-direction:column;min-width:0}
.wa-list-head,.wa-chat-head{height:66px;padding:10px 14px;background:#f0f2f5;display:flex;align-items:center;gap:12px}
.wa-list-head{justify-content:space-between}
.wa-list-head small,.wa-chat-head small{display:block;color:var(--muted);margin-top:3px}
.wa-list-head button{border:0;background:transparent;font-size:22px;cursor:pointer}
.wa-search{padding:8px;background:#fff;border-bottom:1px solid #eee}
.wa-search input{width:100%;border:0;border-radius:8px;background:#f0f2f5;padding:11px 13px}
.wa-conversation-list{overflow:auto;flex:1}
.wa-conversation{width:100%;border:0;border-bottom:1px solid #f0f0f0;background:#fff;padding:12px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;text-align:left;cursor:pointer}
.wa-conversation:hover,.wa-conversation.active{background:#f0f2f5}
.wa-avatar{width:44px;height:44px;border-radius:50%;background:#00a884;color:#fff;display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.wa-avatar{overflow:hidden;position:relative}
.wa-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}

.wa-conversation-main{min-width:0}
.wa-conversation-main b,.wa-conversation-main span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-conversation-main span{font-size:12px;color:#667781;margin-top:5px}
.wa-conversation-time{font-size:11px;color:#667781;white-space:nowrap}
.wa-chat{min-width:0;display:flex;flex-direction:column}
.wa-chat-head{border-bottom:1px solid #d8d8d8}
.wa-chat-messages{flex:1;overflow:auto;padding:24px;background-color:#efeae2;background-image:radial-gradient(#d7d1c8 1px,transparent 1px);background-size:22px 22px}
.wa-bubble{max-width:75%;margin:0 0 10px auto;background:#d9fdd3;padding:8px 10px;border-radius:9px 0 9px 9px;box-shadow:0 1px 1px #0002;white-space:pre-wrap;overflow-wrap:anywhere}
.wa-bubble-meta{display:flex;justify-content:flex-end;gap:7px;margin-top:5px;font-size:10px;color:#667781}
.wa-state.failed,.wa-state.cancelled{color:#d93025}
.wa-state.sent{color:#168bd2}
.wa-compose{padding:10px;background:#f0f2f5;display:flex;align-items:center;gap:10px}
.wa-compose textarea{flex:1;resize:none;border:0;border-radius:9px;padding:11px;min-height:44px}
.wa-empty{padding:30px;text-align:center;color:#667781}
@media(max-width:850px){
  .wa-web{grid-template-columns:1fr;height:720px}
  .wa-web.chat-open .wa-conversations{display:none}
  .wa-chat{display:none}
  .wa-web.chat-open .wa-chat{display:flex}
  .wa-bubble{max-width:88%}
}


/* Aprovechar el espacio disponible de la pantalla */
.wa-web{
  width:100%;
  height:calc(100dvh - 245px);
  min-height:650px;
  max-height:none;
  overflow:hidden;
}

.wa-conversations,
.wa-chat{
  height:100%;
  min-height:0;
  overflow:hidden;
}

.wa-conversations{
  display:flex;
  flex-direction:column;
}

.wa-conversation-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#9ca3af #f0f2f5;
}

.wa-chat{
  display:flex;
  flex-direction:column;
}

.wa-chat-head,
.wa-compose{
  flex:0 0 auto;
}

.wa-chat-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:scroll;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#8696a0 #efeae2;
}

.wa-chat-messages::-webkit-scrollbar,
.wa-conversation-list::-webkit-scrollbar{
  width:10px;
}

.wa-chat-messages::-webkit-scrollbar-track{
  background:#efeae2;
}

.wa-conversation-list::-webkit-scrollbar-track{
  background:#f0f2f5;
}

.wa-chat-messages::-webkit-scrollbar-thumb,
.wa-conversation-list::-webkit-scrollbar-thumb{
  background:#8696a0;
  border-radius:10px;
  border:2px solid transparent;
  background-clip:padding-box;
}

.wa-compose{
  position:relative;
  z-index:2;
  border-top:1px solid #d8d8d8;
}

@media(max-width:850px){
  .wa-web{
    height:calc(100dvh - 180px);
    min-height:560px;
  }
}


.wa-delete-chat{
  margin-left:auto;
  color:#d93025;
  white-space:nowrap;
}

.wa-delete-message{
  border:0;
  background:transparent;
  padding:0 3px;
  cursor:pointer;
  opacity:.55;
  font-size:12px;
}

.wa-delete-message:hover{
  opacity:1;
}


.wa-bubble.incoming{
  margin-left:0;
  margin-right:auto;
  background:#ffffff;
  border-radius:0 9px 9px 9px;
}

.wa-bubble.incoming .wa-bubble-meta{
  justify-content:flex-start;
}


.wa-unread{
  background:#00a884;
  color:#fff !important;
  border-radius:12px;
  padding:3px 7px;
  font-weight:700;
}

.wa-new-message-banner{
  position:fixed;
  top:18px;
  right:18px;
  z-index:10000;
  width:min(360px,calc(100vw - 36px));
  padding:14px 16px;
  border:0;
  border-radius:12px;
  background:#202c33;
  color:#fff;
  box-shadow:0 8px 28px #0005;
  text-align:left;
  cursor:pointer;
  animation:waBannerIn .2s ease-out;
}

.wa-new-message-banner b,
.wa-new-message-banner span{
  display:block;
}

.wa-new-message-banner span{
  margin-top:5px;
  color:#d1d7db;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@keyframes waBannerIn{
  from{transform:translateY(-15px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.wa-message-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.wa-message-image{
  display:block;
  width:auto;
  max-width:min(420px,100%);
  max-height:420px;
  border-radius:10px;
  object-fit:contain;
  cursor:zoom-in;
  background:#e9edef;
}
.wa-message-audio{
  display:block;
  width:min(420px,100%);
  min-width:280px;
  max-width:100%;
}
.wa-message-caption{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media(max-width:700px){
  .wa-message-image{max-width:100%;max-height:320px}
  .wa-message-audio{min-width:220px;width:100%}
}

.wa-message-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.wa-message-image{
  display:block;
  width:auto;
  max-width:min(420px,100%);
  max-height:420px;
  border-radius:10px;
  object-fit:contain;
  cursor:zoom-in;
  background:#e9edef;
}
.wa-message-audio{
  display:block;
  width:min(420px,100%);
  min-width:280px;
  max-width:100%;
}
.wa-message-caption{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
@media(max-width:700px){
  .wa-message-image{max-width:100%;max-height:320px}
  .wa-message-audio{min-width:220px;width:100%}
}