/* WhatsApp-inspired chat surface for the staff inbox. */
.chat-shell{border-color:#d7dbd9;box-shadow:0 2px 8px rgb(11 20 26 / 8%)}
.chat-list-pane{background:#fff;border-right-color:#d7dbd9}
.chat-list-toolbar{background:#f0f2f5;padding-bottom:13px}
.chat-list-toolbar strong{font-size:15px}
.chat-refresh{background:#e7f3ef;color:#008069}
.chat-search{background:#f0f2f5;border-color:#f0f2f5;border-radius:8px}
.chat-filter.active{background:#d9fdd3;color:#075e54}
.chat-list-item{padding-bottom:13px;padding-top:13px}
.chat-list-item:hover,.chat-list-item.selected{background:#f0f2f5}
.chat-list-item.selected{box-shadow:inset 3px 0 #00a884}
.list-avatar,.customer-avatar{background:#dfe5e7;color:#52616b}
.chat-main{background:#efeae2}
.chat-header{background:#f0f2f5;border-bottom-color:#d7dbd9;padding-left:14px;padding-right:14px}
.chat-back{color:#54656c}
.chat-status-pill{background:#d9fdd3;color:#075e54;margin-left:auto}
.chat-header-actions{display:none}
.chat-header-actions button:hover{border-color:#8ccdbd;color:#008069}
.chat-messages{background-color:#efeae2;background-image:radial-gradient(rgb(84 98 92 / 12%) .7px,transparent .7px);background-size:14px 14px;padding:18px 14px 12px}
.incoming .chat-bubble{background:#fff;border-top-left-radius:2px}
.outgoing .chat-bubble{background:#d9fdd3;border-top-right-radius:2px}
.chat-message-row{align-items:flex-end;padding-inline:2px;width:100%}
.chat-message-row.incoming .chat-bubble{margin-inline-end:auto}
.chat-message-row.outgoing .chat-bubble{margin-inline-start:auto}
.chat-bubble{border-radius:8px;box-shadow:0 1px 1px rgb(11 20 26 / 13%);color:#111b21;max-width:min(78%,560px)}
.chat-bubble small{color:#667781}
.chat-composer{background:#f0f2f5;border-top-color:#d7dbd9}
.chat-composer textarea{background:#fff;border-color:#fff;border-radius:8px}
.chat-composer button{background:#008069;border-radius:50%;height:37px;width:37px}
.chat-empty-state{background:#efeae2}
.chat-empty-icon{background:#d9fdd3;color:#008069}

/* Keep the reply composer visible while only the message history scrolls. */
.chat-shell{height:min(680px,calc(100vh - 270px));height:min(680px,calc(100dvh - 270px));min-height:0}
.chat-main,.chat-active{min-height:0}
.chat-active{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.chat-list{flex:1 1 auto;min-height:0}
.chat-messages{min-height:0;overscroll-behavior:contain}
.chat-composer{flex:0 0 auto;position:sticky;bottom:0;z-index:2}
.chat-composer{align-items:stretch;display:block;padding:10px 15px 8px}
.chat-composer-row{align-items:flex-end;display:flex;gap:8px;min-width:0;width:100%}
.chat-composer textarea{flex:1 1 auto;min-width:0;width:auto}
.chat-composer .chat-send{align-items:center;appearance:none;background:#008069;border:0;border-radius:50%;color:#fff;display:inline-flex;flex:0 0 42px;height:42px;justify-content:center;margin:0;min-height:42px;min-width:42px;padding:0;width:42px}
.chat-composer .chat-send:hover{background:#006f5b}
.chat-composer .chat-send svg{fill:none;height:18px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:18px}
.chat-composer .chat-send:focus-visible{outline:3px solid #7bcdb7;outline-offset:2px}
.chat-composer p{bottom:auto;left:auto;margin:4px 0 0;position:static}
.chat-composer p:empty{display:none}

@media(max-width:600px){
    .chat-shell{height:calc(100vh - 220px);height:calc(100dvh - 220px);min-height:0}
}