/* Messenger in the WhatsApp style (module Messenger.js). Wallpaper: own cleaning-themed doodles; the build puts its hashed file name into the url() below. */
.wa{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);height:calc(100dvh - 210px);min-height:480px;max-height:920px;overflow:hidden;background:#fff;border:1px solid #e9edef;border-radius:14px;box-shadow:0 2px 10px rgba(11,20,26,.06);color:#111b21;font-size:14px}
.wa button{font:inherit;letter-spacing:normal;box-shadow:none;transform:none;min-height:0;min-width:0;text-transform:none}
.wa-wallpaper{background-color:#efeae2;background-image:url("messenger-wallpaper-c8a1c972527a.svg");background-size:320px 320px}

/* chat list */
.wa-list{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;border-right:1px solid #e9edef}
.wa-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 12px 10px 18px}
.wa-list-head h2{margin:0;font-size:22px;font-weight:700;color:#111b21}
.wa-head-actions{display:flex;gap:4px}
.wa-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;cursor:pointer;transition:background .15s}
.wa-icon:hover{background:rgba(11,20,26,.07)}
.wa-search{display:flex;align-items:center;gap:10px;height:38px;margin:0 12px 8px;padding:0 14px;border-radius:19px;background:#f0f2f5;color:#54656f;cursor:text}
.wa-search input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;box-shadow:none;font-size:14.5px;color:#111b21}
.wa-chats{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.wa .wa-chat{display:flex;align-items:center;gap:13px;width:100%;min-height:72px;padding:0 0 0 13px;border:0;border-radius:0;background:#fff;color:inherit;text-align:left;cursor:pointer;transition:background .12s}
.wa-chat:hover{background:#f5f6f6}
.wa-chat.selected{background:#f0f2f5}
.wa-avatar{display:grid;place-items:center;flex-shrink:0;border-radius:50%;color:#fff;font-size:17px;font-weight:600;line-height:1}
.wa-chat-body{display:flex;flex:1;flex-direction:column;justify-content:center;gap:3px;align-self:stretch;min-width:0;padding-right:15px;border-bottom:1px solid #e9edef}
.wa-chat:last-child .wa-chat-body{border-bottom:0}
.wa-chat-top,.wa-chat-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.wa-chat-top strong{overflow:hidden;font-size:16px;font-weight:500;color:#111b21;white-space:nowrap;text-overflow:ellipsis}
.wa-chat-top time{flex-shrink:0;font-size:12px;color:#667781}
.wa-chat-top time.unread{color:#1fa855;font-weight:600}
.wa-chat-bottom small{display:block;overflow:hidden;min-width:0;font-size:14px;color:#667781;white-space:nowrap;text-overflow:ellipsis}
.wa-chat-bottom .wa-ticks{margin-right:3px;vertical-align:-1px}
.wa-badge{display:inline-grid;place-items:center;flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#25d366;color:#fff;font-size:12px;font-weight:600;line-height:1}
.wa-empty-list{padding:30px 20px;text-align:center;color:#667781}

/* conversation */
.wa-chat-pane{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:#efeae2}
.wa-chat-head{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 10px 8px 16px;background:#f0f2f5;border-bottom:1px solid #e9edef}
.wa-chat-title{display:flex;flex:1;flex-direction:column;min-width:0}
.wa-chat-title strong{overflow:hidden;font-size:16px;font-weight:500;color:#111b21;white-space:nowrap;text-overflow:ellipsis}
.wa-chat-title small{overflow:hidden;font-size:13px;color:#667781;white-space:nowrap;text-overflow:ellipsis}
.wa-back{display:none}
.wa-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wa-thread{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;padding:10px 0 12px}
.wa-day{position:sticky;top:8px;z-index:2;display:flex;justify-content:center;margin:10px 0 6px;pointer-events:none}
.wa-day span{padding:5px 12px;border-radius:8px;background:#fff;color:#54656f;font-size:12.5px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-older{align-self:center;margin:4px 0 8px;padding:6px 14px;border:0;border-radius:16px;background:#fff;color:#027eb5;font-size:13px;cursor:pointer;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-row{display:flex;margin-top:2px;padding:0 7%}
.wa-row.fresh{animation:wa-in .18s ease-out}
.wa-row.first{margin-top:9px}
.wa-row.mine{justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.wa-row.fresh{animation:none}}
@keyframes wa-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wa-bubble{position:relative;max-width:min(65%,600px);padding:6px 7px 8px 9px;border-radius:8px;background:#fff;color:#111b21;font-size:14.2px;line-height:19px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-row.mine .wa-bubble{background:#d9fdd3}
.wa-bubble.tail{border-top-left-radius:0}
.wa-row.mine .wa-bubble.tail{border-top-left-radius:8px;border-top-right-radius:0}
.wa-bubble.tail::before{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
.wa-row.mine .wa-bubble.tail::before{left:auto;right:-8px;clip-path:polygon(0 0,100% 0,0 100%)}
.wa-bubble.failed{background:#fde8e8!important;cursor:pointer}
.wa-name{margin-bottom:2px;font-size:12.8px;font-weight:600;line-height:18px}
.wa-text{white-space:pre-wrap;overflow-wrap:anywhere}
.wa-text a{color:#027eb5;text-decoration:underline}
.wa-spacer{display:inline-block;width:52px;height:1px}
.wa-row.mine .wa-spacer{width:70px}
.wa-meta{position:absolute;right:7px;bottom:3px;display:flex;align-items:center;gap:3px;font-size:11px;line-height:15px;color:#667781;white-space:nowrap}
.wa-ticks{display:inline-block;flex-shrink:0;color:#8696a0}
.wa-ticks.read{color:#53bdeb}
.wa-status{display:inline-grid;color:#8696a0}
.wa svg{flex-shrink:0}
.wa-status.failed{color:#ea0038}
.wa-delete{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:inherit;color:#8696a0;opacity:0;cursor:pointer;transition:opacity .12s}
.wa-bubble:hover .wa-delete{opacity:1}
.wa-delete:hover{color:#ea0038}
.wa-down{position:absolute;right:18px;bottom:76px;z-index:3;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:#fff;color:#54656f;cursor:pointer;box-shadow:0 1px 3px rgba(11,20,26,.25)}
.wa-down .wa-badge{position:absolute;top:-9px;right:-3px}
.wa-composer{display:flex;align-items:flex-end;gap:8px;padding:8px 12px;background:#f0f2f5}
.wa-composer textarea{flex:1;min-width:0;max-height:132px;margin:0;padding:10px 16px;border:0;border-radius:21px;outline:0;background:#fff;box-shadow:none;color:#111b21;font:inherit;font-size:15px;line-height:20px;resize:none;overflow-x:hidden;overflow-y:auto}
.wa-send{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0 0 0 3px;border:0;border-radius:50%;background:#00a884;color:#fff;cursor:pointer;transition:opacity .15s,transform .1s}
.wa-send:active{transform:scale(.94)}
.wa-send:disabled{opacity:.45;cursor:default}
.wa-welcome{display:grid;place-items:center;padding:24px;border-bottom:6px solid #25d366;text-align:center}
.wa-welcome>div{max-width:440px;padding:32px 28px;border-radius:16px;background:rgba(255,255,255,.88)}
.wa-welcome-icon{color:#00a884;margin-bottom:12px}
.wa-welcome h2{margin:0 0 10px;font-size:26px;font-weight:300;color:#41525d}
.wa-welcome p{margin:0;font-size:14px;line-height:20px;color:#667781}

/* phones: list inside the CRM page, an open chat takes the whole screen (like WhatsApp) */
@media (max-width:760px){
 .wa{display:block;height:auto;min-height:calc(100dvh - 240px);max-height:none;border-radius:12px}
 .wa-list{min-height:calc(100dvh - 240px);border-right:0}
 .wa-chat-pane{display:none}
 .wa.wa-open .wa-chat-pane{position:fixed;inset:0;z-index:1000;display:flex;height:100dvh}
 .wa-chat-head{min-height:56px;padding:6px 8px 6px 4px;padding-top:calc(6px + env(safe-area-inset-top,0px));background:#008069;border-bottom:0;gap:8px}
 .wa-chat-head .wa-icon{color:#fff}
 .wa-chat-head .wa-icon:hover{background:rgba(255,255,255,.12)}
 .wa-chat-title strong{color:#fff;font-size:17px}
 .wa-chat-title small{color:rgba(255,255,255,.8)}
 .wa-back{display:grid;width:36px}
 .wa-row{padding:0 3.5%}
 .wa-bubble{max-width:85%;font-size:15px;line-height:20px}
 .wa-delete{display:none}
 .wa-composer{padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:transparent}
 .wa-composer textarea{font-size:16px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
 .wa-send{width:48px;height:48px}
 .wa-down{bottom:72px;right:12px}
 html:has(.wa.wa-open) body{overflow:hidden}
}

/* attachments */
.wa-bubble.has-files{padding:3px 3px 8px}
.wa-bubble.only-media{padding:3px}
.wa-bubble.has-files .wa-name{padding:3px 6px 0}
.wa-bubble.has-files .wa-text{padding:4px 6px 0}
.wa-text-empty{height:12px}
.wa-media{display:grid;gap:3px;width:min(330px,68vw);overflow:hidden;border-radius:6px}
.wa-media.n2,.wa-media.n3,.wa-media.n4{grid-template-columns:1fr 1fr}
.wa-media.n3 .wa-media-item:first-child{grid-column:span 2;aspect-ratio:2/1}
.wa .wa-media-item{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:#d1d7db;cursor:zoom-in;overflow:hidden;aspect-ratio:1}
.wa-media.n1 .wa-media-item{aspect-ratio:auto}
.wa-media-item img{display:block;width:100%;height:100%;object-fit:cover}
.wa-media.n1 .wa-media-item img{height:auto;min-height:120px;max-height:380px}
.wa-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,20,26,.45);color:#fff;font-size:26px;font-weight:600}
.wa-bubble.sending .wa-media-item::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.35)}
.wa-bubble.sending .wa-media-item::before{content:"";position:absolute;left:50%;top:50%;z-index:1;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid #fff;border-top-color:transparent;border-radius:50%;animation:wa-spin .8s linear infinite}
@keyframes wa-spin{to{transform:rotate(360deg)}}
.wa-meta.on-media{right:9px;bottom:8px;padding:1px 7px;border-radius:10px;background:rgba(11,20,26,.42);color:#fff}
.wa-meta.on-media .wa-ticks{color:#fff}
.wa-meta.on-media .wa-ticks.read{color:#8fdcff}
.wa-meta.on-media .wa-status{color:#fff}
.wa-doc{display:flex;align-items:center;gap:10px;width:min(330px,68vw);margin:0 0 2px;padding:9px 10px;border-radius:6px;background:rgba(11,20,26,.05);color:inherit;text-decoration:none}
.wa-row.mine .wa-doc{background:rgba(0,80,40,.07)}
.wa-doc+.wa-doc{margin-top:3px}
.wa-doc-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:44px;border-radius:4px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.2px}
.wa-doc-body{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.wa-doc-body strong{overflow:hidden;font-size:14px;font-weight:500;color:#111b21;white-space:nowrap;text-overflow:ellipsis}
.wa-doc-body small{font-size:12px;color:#667781}
.wa-doc-dl{flex-shrink:0;color:#8696a0}
.wa-compose-wrap{background:#f0f2f5}
.wa-compose-wrap .wa-composer{background:transparent}
.wa-tray{display:flex;gap:8px;padding:10px 12px 2px;overflow-x:auto}
.wa-tray-item{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;height:64px;max-width:230px;padding:0 30px 0 10px;border-radius:10px;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-tray-item.photo{width:64px;padding:0;overflow:hidden}
.wa-tray-item.photo img{width:100%;height:100%;object-fit:cover}
.wa-tray-item .wa-doc-icon{width:30px;height:36px}
.wa-tray-name{display:flex;flex-direction:column;min-width:0;overflow:hidden;font-size:13px;white-space:nowrap;text-overflow:ellipsis}
.wa-tray-name small{color:#667781;font-size:11.5px}
.wa .wa-tray-x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(11,20,26,.6);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.wa-note{padding:4px 16px 0;font-size:12.5px;color:#ea0038}
.wa .wa-clip{align-self:flex-end;margin-bottom:2px}
.wa-dropzone{position:absolute;inset:60px 0 0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(240,242,245,.93);border:3px dashed #00a884;color:#008069;font-size:18px;font-weight:600;pointer-events:none}
.wa-viewer{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(11,20,26,.95);animation:wa-fade .15s ease-out}
@keyframes wa-fade{from{opacity:0}to{opacity:1}}
.wa-viewer img{max-width:94vw;max-height:calc(100dvh - 120px);object-fit:contain;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.wa-viewer-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));color:#e9edef;font-size:14px}
.wa-viewer-bar span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wa-viewer .wa-viewer-btn{display:grid;place-items:center;width:42px;height:42px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:#e9edef;box-shadow:none;cursor:pointer}
.wa-viewer .wa-viewer-btn:hover{background:rgba(255,255,255,.1)}
.wa-viewer .wa-viewer-nav{position:absolute;top:50%;display:grid;place-items:center;width:48px;height:48px;min-height:0;margin-top:-24px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;box-shadow:none;cursor:pointer}
.wa-viewer-nav.prev{left:14px}
.wa-viewer-nav.next{right:14px}
@media (max-width:760px){
 .wa-compose-wrap{background:transparent}
 .wa-media,.wa-doc{width:min(300px,72vw)}
 .wa-viewer img{max-width:100vw;border-radius:0}
}