/* Portable MEALFRESH Messenger styles. No host CSS changes required. */
.mf-messenger{padding:10px;max-width:760px;margin:0 auto;height:calc(100vh - 150px);display:flex;flex-direction:column;min-height:0}
.mf-messenger-toolbar{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 10px}
.mf-icon-button{width:38px;height:38px;border-radius:50%;border:0;background:#33691e;color:#fff;font-size:26px;line-height:1}
.mf-chat-list{display:flex;flex-direction:column;gap:8px;overflow:auto;padding-bottom:8px}
.mf-chat-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:12px;background:#fff;padding:11px;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer}
.mf-chat-avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#dcedc8;color:#33691e;font-weight:700}
.mf-chat-main{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}
.mf-chat-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-chat-preview{font-size:13px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-chat-meta{display:flex;align-items:flex-end;flex-direction:column;gap:5px;font-size:10px;color:#888}
.mf-chat-meta b{background:#33691e;color:#fff;border-radius:12px;padding:2px 6px;font-size:10px}
.mf-empty,.mf-messenger-loading,.mf-messenger-error{text-align:center;padding:30px;color:#777}
.mf-chat-screen{padding-bottom:4px}
.mf-chat-header{display:flex;align-items:center;gap:8px;padding:4px 0 10px}
.mf-chat-header button{border:0;background:transparent;font-size:30px;line-height:1;padding:0 8px;color:#33691e}
.mf-chat-messages{flex:1;overflow-y:auto;padding:4px 2px 12px;display:flex;flex-direction:column;gap:7px}
.mf-message{display:flex;width:100%}
.mf-message.mine{justify-content:flex-end}
.mf-message.theirs{justify-content:flex-start}
.mf-message-bubble{max-width:82%;padding:8px 10px;border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);word-break:break-word;overflow-wrap:anywhere}
.mf-message.mine .mf-message-bubble{background:#dcedc8}
.mf-message-author{font-size:11px;font-weight:700;color:#33691e;margin-bottom:3px}
.mf-message-bubble time{display:block;text-align:right;font-size:9px;color:#888;margin-top:4px}
.mf-chat-compose{display:flex;gap:7px;align-items:flex-end;padding-top:6px;border-top:1px solid #ddd}
.mf-chat-compose textarea{flex:1;resize:none;min-height:42px;max-height:110px;padding:10px;border:1px solid #ccc;border-radius:12px;font-size:14px;outline:none}
.mf-chat-compose button{width:46px;height:42px;border:0;border-radius:12px;background:#33691e;color:#fff;font-size:20px}
.mf-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:2500;display:flex;align-items:center;justify-content:center;padding:15px}
.mf-modal{background:#fff;border-radius:14px;padding:16px;width:94%;max-width:430px;max-height:80vh;display:flex;flex-direction:column;gap:10px}
.mf-user-list{display:flex;flex-direction:column;gap:6px;overflow:auto}
.mf-user-list button{display:flex;flex-direction:column;text-align:left;border:0;background:#f5f5f5;border-radius:10px;padding:10px}
.mf-user-list small{color:#777;margin-top:2px}
.mf-cancel{border:0;border-radius:9px;padding:10px;background:#ddd}
.mf-nav-icon-wrap{position:relative}
#messengerBadge{position:absolute;top:-5px;right:-8px}

.bottom-nav.mf-has-messenger .bottom-btn{width:25%}