/* line-height:1.4 here on purpose: the shell only resets font-family and color from the host page, never line-height, so every label that doesn't set its own (the onboarding step count, step prompts, etc.) was inheriting the host theme's body line-height verbatim in px — e.g. Divi's 1.8 ratio at 16px computes to a fixed 28.8px, which doesn't shrink back down for a 12px label, so small text ends up with far more vertical space than its font-size implies. One sane default here, and anything that needs a different rhythm (the header h2, etc.) already sets its own. */ .prayer-pop-messenger{position:fixed;z-index:999999;right:24px;bottom:24px;width:min(var(--pp-popup-width),calc(100vw - 32px));height:min(680px,calc(100vh - 48px));background:#fff;border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden;display:grid;grid-template-rows:auto 1fr 72px;font-family:inherit;color:#172033;line-height:1.4}.prayer-pop-messenger[hidden]{display:none}.ppm-header{background:var(--prayerpop-primary-color,#173ee8);color:#fff;padding:24px 26px 22px;position:relative}.ppm-header h2{color:inherit;font-size:29px;line-height:1.15;margin:28px 0 8px}.ppm-header p{margin:0;opacity:.85}.ppm-profile{display:flex;align-items:center;gap:10px;font-weight:700}.ppm-profile img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff}.ppm-close{position:absolute;right:18px;top:17px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer}.ppm-body{overflow:auto;background:#f5f6f8}.ppm-view{padding:var(--pp-screen-inset);min-height:100%;box-sizing:border-box}.ppm-start-message{width:100%;padding:18px 20px;border:0;border-radius:16px;background:#171a1f;color:#fff;font-size:17px;font-weight:700;display:flex;justify-content:space-between;cursor:pointer}.ppm-prayer-home #prayer-pop-initial-options{display:flex!important;margin-top:14px}.ppm-view-faq #prayer-pop-faq-wrapper{display:block!important}.ppm-view-faq #prayer-pop-faq-view-header{display:none}.ppm-faq-search,.ppm-identify input:not(.ppm-website),.ppm-identify textarea{box-sizing:border-box;width:100%;margin:0 0 10px;padding:13px;border:1px solid #d5d9e0;border-radius:10px}.ppm-faq-search{background:#fff}.ppm-identify h3{margin-top:0}.ppm-identify textarea{min-height:110px;resize:vertical}.ppm-website{position:absolute!important;left:-10000px!important}.ppm-thread{height:100%;display:grid;grid-template-rows:1fr auto}.ppm-messages{overflow:auto;padding:4px;display:flex;flex-direction:column;gap:10px}.ppm-message{max-width:82%}.ppm-message>div{padding:11px 14px;border-radius:16px;background:#e5e7eb;white-space:normal}.ppm-message time{font-size:10px;color:#6b7280}.ppm-message-visitor{align-self:flex-end;text-align:right}.ppm-message-visitor>div{background:var(--prayerpop-primary-color,#173ee8);color:#fff;border-bottom-right-radius:4px}.ppm-message-admin>div{border-bottom-left-radius:4px}.ppm-composer{display:flex;gap:8px;padding-top:10px}.ppm-composer textarea{flex:1;border:1px solid #d5d9e0;border-radius:14px;padding:10px;resize:none}.ppm-composer button{width:46px;border:0;border-radius:50%;background:var(--prayerpop-primary-color,#173ee8);color:#fff;font-size:22px}.ppm-closed{text-align:center;padding:12px}.ppm-nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ddd;background:#fff}.ppm-nav button{border:0;background:none;color:#777;font:inherit;font-size:12px;position:relative}.ppm-nav button.active{color:#111;font-weight:700}.ppm-nav .dashicons{display:block;margin:0 auto 4px}.ppm-badge{position:absolute;background:#ef7777;color:#fff;border-radius:10px;padding:1px 5px;font-style:normal}.ppm-error{color:#b91c1c}.ppm-open #prayer-pop-modal{display:none!important}@media(max-width:600px){.prayer-pop-messenger{inset:0;width:100%;height:100%;max-width:none;border-radius:0}.ppm-header h2{font-size:26px}} .prayer-pop-messenger{border-radius:20px;font-family:var(--pp-font-family,inherit)}.ppm-header{background:var(--pp-bubble-bg-color,var(--pp-bg-color,#173ee8));color:var(--pp-font-color,#fff)}.ppm-message-visitor>div,.ppm-composer button{background:var(--pp-bubble-bg-color,var(--pp-bg-color,#173ee8))} @media(max-width:600px){.prayer-pop-messenger{border-radius:0}} .prayer-pop-messenger .ppm-view{display:none!important}.prayer-pop-messenger .ppm-view.is-active{display:block!important}.prayer-pop-messenger .ppm-view[hidden]{display:none!important}.prayer-pop-messenger .ppm-identify[hidden],.prayer-pop-messenger .ppm-thread[hidden],.prayer-pop-messenger .ppm-closed[hidden],.prayer-pop-messenger .ppm-composer[hidden],.prayer-pop-messenger .ppm-error[hidden],.prayer-pop-messenger .ppm-badge[hidden],.prayer-pop-messenger .prayer-pop-faq-item[hidden]{display:none!important}.prayer-pop-messenger[data-active-view="messages"] .ppm-view-messages.is-active{height:100%}.prayer-pop-messenger[data-active-view="messages"] .ppm-thread:not([hidden]){height:100%}.prayer-pop-messenger .ppm-nav button{cursor:pointer}.prayer-pop-messenger .ppm-nav button:focus-visible{outline:2px solid var(--pp-bubble-bg-color,var(--pp-bg-color,#173ee8));outline-offset:-4px} .prayer-pop-messenger .ppm-message-overview[hidden],.prayer-pop-messenger .ppm-chat-screen[hidden],.prayer-pop-messenger .ppm-conversation-card[hidden],.prayer-pop-messenger .ppm-no-conversations[hidden],.prayer-pop-messenger .ppm-card-unread[hidden]{display:none!important}.prayer-pop-messenger .ppm-start-message{background:#fff;color:#172033;border:1px solid rgba(23,32,51,.14);box-shadow:0 10px 28px rgba(23,32,51,.1);align-items:center}.prayer-pop-messenger .ppm-start-message span:last-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pp-bubble-bg-color,var(--pp-bg-color,#173ee8));color:var(--pp-font-color,#fff);font-size:20px}.ppm-message-overview{min-height:100%;display:flex;flex-direction:column}.ppm-message-overview h3{color:#172033}.ppm-conversation-card{display:grid;width:100%;box-sizing:border-box;grid-template-columns:48px 1fr;align-items:center;gap:12px;padding:14px 18px;border:0;border-bottom:1px solid #dfe2e7;background:transparent;text-align:left;cursor:pointer;color:#172033;transition:background-color .12s ease}.ppm-conversation-card:hover{background:#f3f4f6}.ppm-conversation-card img{width:48px;height:48px;border-radius:14px;object-fit:cover}.ppm-conversation-card>.dashicons{width:48px;height:48px;font-size:36px;display:grid;place-items:center}.ppm-conversation-copy{min-width:0;display:grid;gap:3px}.ppm-conversation-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ppm-conversation-top strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.ppm-conversation-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#6b7280;line-height:1.35;font-size:13px}.ppm-conversation-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto;color:#9aa1ac;font-size:13px;white-space:nowrap}.ppm-card-unread{min-width:18px;height:18px;padding:1px 5px;box-sizing:border-box;border-radius:10px;background:#ef7777;color:#fff;font-style:normal;text-align:center}.ppm-no-conversations{text-align:center;color:#6b7280;padding:38px 24px}.ppm-overview-start{margin:auto auto 12px;display:flex;align-items:center;gap:22px;border:0;border-radius:14px;padding:14px 20px;background:var(--pp-bubble-bg-color,var(--pp-bg-color,#173ee8));color:var(--pp-font-color,#fff);font-weight:700;font-size:16px;cursor:pointer}.ppm-chat-screen{height:100%;margin:-18px;display:grid;grid-template-rows:auto 1fr;overflow:hidden;background:#f5f6f8}.ppm-chat-header{display:grid;grid-template-columns:38px 42px 1fr;align-items:center;gap:8px;background:#fff;border-bottom:1px solid #dfe2e7;padding:12px 14px}.ppm-chat-header img{width:40px;height:40px;border-radius:12px;object-fit:cover}.ppm-chat-header>.dashicons{width:40px;height:40px;font-size:30px;display:grid;place-items:center}.ppm-chat-header>span:last-child{display:grid}.ppm-chat-header small{color:#6b7280}.ppm-chat-back{border:0;background:transparent;font-size:24px;color:#6b7280;cursor:pointer}.ppm-chat-screen .ppm-identify,.ppm-chat-screen .ppm-thread{min-height:0;overflow:auto;padding:var(--pp-screen-inset)}.ppm-chat-intro{text-align:center;color:#6b7280;line-height:1.5;margin:0 12px 18px}.ppm-agent-welcome{max-width:86%;margin-bottom:20px}.ppm-agent-welcome>div{background:#e3e5e9;border-radius:18px 18px 18px 5px;padding:15px;color:#172033}.ppm-agent-welcome p{margin:8px 0 0}.ppm-agent-welcome small{display:block;color:#6b7280;margin:5px 8px}.ppm-visitor-details{display:grid;gap:9px;margin:16px 0}.ppm-visitor-details label{font-size:12px;color:#6b7280}.ppm-visitor-details input{width:100%;box-sizing:border-box;margin-top:4px;padding:11px 12px;border:1px solid #d5d9e0;border-radius:12px;background:#fff;color:#172033}.ppm-chat-screen .ppm-thread{display:grid;grid-template-rows:1fr auto}.ppm-chat-screen .ppm-messages{min-height:0}.ppm-chat-screen .ppm-composer{background:#fff;border:1px solid #d5d9e0;border-radius:18px;padding:7px}.prayer-pop-messenger[data-active-view="messages"]>.ppm-header{display:none}.prayer-pop-messenger[data-active-view="messages"]{grid-template-rows:1fr 72px} /* Compact message primitives: intentionally stronger than the shared form CSS. */ .prayer-pop-messenger .ppm-chat-screen .ppm-thread{padding:0!important;overflow:hidden;background:#f7f8fa}.prayer-pop-messenger .ppm-chat-screen .ppm-messages{min-height:0!important;overflow-y:auto!important;padding:var(--pp-screen-inset) var(--pp-screen-inset) calc(var(--pp-composer-overlap, 20px) + var(--pp-message-gap, 14px))!important;gap:var(--pp-message-gap, 14px)!important;scrollbar-width:thin}.prayer-pop-messenger .ppm-thread-welcome{align-self:flex-start;max-width:min(82%,290px);color:#172033}.prayer-pop-messenger .ppm-thread-welcome>div{background:#e9ebef;border-radius:18px 18px 18px 6px;padding:12px 14px;line-height:1.45}.prayer-pop-messenger .ppm-thread-welcome strong{display:block;font-size:14px;margin-bottom:4px}.prayer-pop-messenger .ppm-thread-welcome p{font-size:14px;margin:0}.prayer-pop-messenger .ppm-thread-welcome small{display:block;margin:5px 5px 0;color:#747b88;font-size:11px}.prayer-pop-messenger .ppm-message{display:flex!important;flex-direction:column!important;width:fit-content!important;max-width:min(78%,290px)!important;gap:4px!important;font-size:14px;line-height:1.45}.prayer-pop-messenger .ppm-message>div{width:fit-content!important;max-width:100%!important;box-sizing:border-box!important;padding:10px 13px!important;border:0!important;box-shadow:none!important;overflow-wrap:anywhere}.prayer-pop-messenger .ppm-message-visitor{align-self:flex-end!important;align-items:flex-end!important;text-align:left!important}.prayer-pop-messenger .ppm-message-visitor>div{border-radius:18px 18px 6px 18px!important;background:var(--pp-bubble-bg-color,var(--pp-bg-color,#365bb2))!important;color:var(--pp-font-color,#fff)!important}.prayer-pop-messenger .ppm-message-admin{align-self:flex-start!important;align-items:flex-start!important}.prayer-pop-messenger .ppm-message-admin>div{border-radius:18px 18px 18px 6px!important;background:#e9ebef!important;color:#172033!important}.prayer-pop-messenger .ppm-message time{padding:0 4px!important;color:#7a818d!important;font-size:10px!important;line-height:1.2!important}.prayer-pop-messenger .ppm-chat-screen .ppm-composer{display:flex!important;align-items:flex-end!important;gap:8px!important;margin:calc(var(--pp-composer-overlap, 20px) * -1) 0 0!important;padding:0 12px 12px!important;border:0!important;border-top:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.prayer-pop-messenger .ppm-chat-screen .ppm-composer textarea{display:block!important;flex:1 1 auto!important;width:auto!important;height:42px!important;min-height:42px!important;max-height:112px!important;margin:0!important;padding:10px 13px!important;border:1px solid #d9dde4!important;border-radius:15px!important;background:#f7f8fa!important;color:#172033!important;font:inherit!important;font-size:14px!important;line-height:20px!important;resize:none!important;box-shadow:none!important;outline:none!important;overflow-y:auto!important}.prayer-pop-messenger .ppm-chat-screen .ppm-composer textarea:focus{border-color:inherit!important;background:inherit!important;box-shadow:none!important}.prayer-pop-messenger .ppm-chat-screen .ppm-composer button{display:grid!important;place-items:center!important;flex:0 0 42px!important;width:42px!important;height:42px!important;min-width:42px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--pp-bubble-bg-color,var(--pp-bg-color,#365bb2))!important;color:var(--pp-font-color,#fff)!important;font-size:22px!important;line-height:1!important;box-shadow:none!important;cursor:pointer!important}.prayer-pop-messenger .ppm-chat-screen .ppm-composer button:hover{filter:brightness(.94)}.prayer-pop-messenger .ppm-chat-screen .ppm-composer button:focus-visible{outline:3px solid rgba(54,91,178,.22)!important;outline-offset:2px}.prayer-pop-messenger .ppm-closed{margin:0!important;padding:12px 16px!important;background:#fff!important;border-top:1px solid #e1e4e8!important;font-size:13px!important} .prayer-pop-messenger .ppm-chat-screen .ppm-composer button:disabled{cursor:default!important;opacity:.58!important;filter:none!important} .prayer-pop-messenger[data-active-view="messages"] .ppm-body{position:relative;min-height:0;overflow:hidden!important}.prayer-pop-messenger[data-active-view="messages"] .ppm-view-messages.is-active{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;overflow:hidden!important}.prayer-pop-messenger[data-active-view="messages"] .ppm-message-overview{box-sizing:border-box;height:100%;min-height:0;padding:var(--pp-screen-inset)}.prayer-pop-messenger[data-active-view="messages"] .ppm-chat-screen{box-sizing:border-box;width:100%;height:100%!important;min-height:0;margin:0!important}.prayer-pop-messenger[data-active-view="messages"] .ppm-chat-screen .ppm-thread{height:100%!important;min-height:0}.prayer-pop-messenger[data-active-view="messages"] .ppm-chat-screen .ppm-composer{position:relative;z-index:2} /* Simple/classic-footer only: an open conversation thread takes the full card height, with the Home/Messages tab bar hidden — it comes back once the visitor returns to the conversation list. Messenger and classic layouts manage their own chrome and are excluded. */ .prayer-pop-messenger:not([data-layout="messenger"]):not([data-layout="classic"])[data-active-view="messages"][data-message-screen="chat"] { grid-template-rows: 1fr 0 !important; } .prayer-pop-messenger:not([data-layout="messenger"]):not([data-layout="classic"])[data-active-view="messages"][data-message-screen="chat"] .ppm-nav { display: none !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer[hidden]{display:none!important}.prayer-pop-messenger .ppm-chat-screen .ppm-closed[hidden]{display:none!important}.prayer-pop-messenger .ppm-chat-screen .ppm-closed{display:grid!important;grid-template-columns:38px 1fr;align-items:center;gap:10px 12px;margin:0!important;padding:14px 16px!important;border-top:1px solid #e1e4e8!important;background:#fff!important;text-align:left!important}.prayer-pop-messenger .ppm-closed-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eef2f8;color:#667085}.prayer-pop-messenger .ppm-closed-copy{display:grid;gap:2px}.prayer-pop-messenger .ppm-closed-copy strong{font-size:14px;color:#172033}.prayer-pop-messenger .ppm-closed-copy small{font-size:11px;line-height:1.35;color:#737b89}.prayer-pop-messenger .ppm-closed .ppm-new{grid-column:1/-1;width:100%;margin:1px 0 0;padding:10px 14px;border:0;border-radius:12px;background:var(--pp-bubble-bg-color,var(--pp-bg-color,#365bb2));color:var(--pp-font-color,#fff);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.prayer-pop-messenger .ppm-closed .ppm-new:hover{filter:brightness(.95)}.prayer-pop-messenger .ppm-closed .ppm-new:focus-visible{outline:3px solid rgba(54,91,178,.2);outline-offset:2px} .prayer-pop-messenger .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.prayer-pop-messenger .ppm-onboarding{margin-top:20px}.prayer-pop-messenger .ppm-onboarding-step[hidden]{display:none!important}.prayer-pop-messenger .ppm-onboarding-step{display:grid;gap:11px;animation:ppm-step-in .18s ease-out}.prayer-pop-messenger .ppm-step-count{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a92a0}.prayer-pop-messenger .ppm-step-prompt{justify-self:start;max-width:82%;padding:11px 14px;border-radius:17px 17px 17px 5px;background:#e9ebef;color:#172033;font-size:14px;line-height:1.45}.prayer-pop-messenger .ppm-step-control{margin-top:4px}.prayer-pop-messenger .ppm-step-control input[aria-invalid="true"]{background:#fff3f3!important}.prayer-pop-messenger .ppm-step-links{display:flex;justify-content:space-between;align-items:center}.prayer-pop-messenger .ppm-step-links button{padding:5px 2px;border:0;background:transparent;color:#687181;font:inherit;font-size:11px;cursor:pointer}.prayer-pop-messenger .ppm-step-links button:hover{color:var(--pp-bubble-bg-color,var(--pp-bg-color,#365bb2))}.prayer-pop-messenger .ppm-error{margin:8px 18px;color:#b42318;font-size:12px}@keyframes ppm-step-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} /* Keep Messenger aligned with the existing PrayerPop design controls. */ .prayer-pop-messenger{right:calc(var(--pp-bubble-margin,20px) + var(--pp-bubble-offset-x,0px));left:auto;bottom:calc(var(--pp-bubble-margin,20px) + var(--pp-bubble-offset-y,0px) + var(--pp-bubble-height,60px) + 12px);height:min(680px,calc(100vh - var(--pp-bubble-height,60px) - var(--pp-bubble-margin,20px) - var(--pp-bubble-offset-y,0px) - 28px));max-height:calc(100vh - var(--pp-bubble-height,60px) - var(--pp-bubble-margin,20px) - var(--pp-bubble-offset-y,0px) - 28px);border:1px solid var(--pp-border-color,#d5d9e0);font-family:var(--pp-font-family,inherit);font-size:var(--pp-font-size,16px);--ppm-panel-content-gap:calc(var(--pp-margin,20px) / 2)} .prayer-pop-messenger[data-bubble-position="left"]{right:auto;left:calc(var(--pp-bubble-margin,20px) + var(--pp-bubble-offset-x,0px))} .prayer-pop-messenger .ppm-header{padding:var(--pp-padding,24px);background:var(--pp-bubble-bg-color,var(--pp-bg-color,#173ee8));color:var(--pp-font-color,#fff)} .prayer-pop-messenger .ppm-header h2{font-family:var(--pp-heading-font-family,var(--pp-font-family,inherit));font-size:var(--pp-heading-font-size,29px);font-weight:var(--pp-heading-font-weight,700)} .prayer-pop-messenger .ppm-header p,.prayer-pop-messenger .ppm-chat-header small,.prayer-pop-messenger .ppm-message time,.prayer-pop-messenger .ppm-step-count,.prayer-pop-messenger .ppm-step-links button{color:var(--pp-label-color,#6b7280)} .prayer-pop-messenger .ppm-start-message,.prayer-pop-messenger .ppm-faq-search,.prayer-pop-messenger .ppm-chat-screen .ppm-composer textarea{border-color:var(--pp-border-color,#d5d9e0)!important;border-radius:var(--pp-border-radius,16px)!important;background:var(--pp-textarea-bg-color,#fff)!important;font-family:var(--pp-font-family,inherit)} .prayer-pop-messenger .ppm-step-prompt,.prayer-pop-messenger .ppm-thread-welcome>div,.prayer-pop-messenger .ppm-message-admin>div{border-radius:var(--pp-border-radius,18px)!important;background:var(--pp-textarea-bg-color,#e9ebef)!important} .prayer-pop-messenger .ppm-message-visitor>div{border-radius:var(--pp-border-radius,18px)!important} .prayer-pop-messenger .ppm-start-message span:last-child,.prayer-pop-messenger .ppm-overview-start,.prayer-pop-messenger .ppm-chat-screen .ppm-composer button,.prayer-pop-messenger .ppm-closed .ppm-new{background:var(--pp-bubble-bg-color,var(--pp-bg-color,#173ee8))!important;color:var(--pp-font-color,#fff)!important} .prayer-pop-messenger .ppm-start-message:hover,.prayer-pop-messenger .ppm-overview-start:hover,.prayer-pop-messenger .ppm-chat-screen .ppm-composer button:hover,.prayer-pop-messenger .ppm-closed .ppm-new:hover{background:var(--pp-button-hover-color,var(--pp-bubble-bg-color,var(--pp-bg-color,#173ee8)))!important;filter:none!important} .prayer-pop-messenger .ppm-nav{border-color:var(--pp-border-color,#ddd)} @media(max-width:600px){.prayer-pop-messenger,.prayer-pop-messenger[data-bubble-position="left"]{inset:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important}} /* Shared Popup Intro presentation for the Messenger layout. */ .prayer-pop-messenger .ppm-header { --ppm-header-row-top: var(--pp-padding, 24px); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; } .prayer-pop-messenger .ppm-header--has-image { min-height: 210px; } .prayer-pop-messenger .ppm-header-media { position: absolute; inset: 0; z-index: 0; } .prayer-pop-messenger .ppm-header-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .prayer-pop-messenger .ppm-header-media span { position: absolute; inset: 0; background: var(--prayerpop-popup-intro-overlay-color, #000); opacity: var(--prayerpop-popup-intro-overlay-opacity, .35); } .prayer-pop-messenger .ppm-profile, .prayer-pop-messenger .ppm-shared-intro { position: relative; z-index: 1; } .prayer-pop-messenger .ppm-profile { min-height: 46px; box-sizing: border-box; padding-right: 58px; } .prayer-pop-messenger .ppm-close { position: absolute; top: var(--ppm-header-row-top); right: 18px; z-index: 2; display: grid; place-items: center; width: var(--pp-control-size, 28px); height: var(--pp-control-size, 28px); min-width: var(--pp-control-size, 28px); margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; line-height: 1 !important; font-size: 0 !important; box-sizing: border-box; } .prayer-pop-messenger .ppm-close::before, .prayer-pop-messenger .ppm-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: var(--pp-control-glyph, 16px); height: 2px; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); } .prayer-pop-messenger .ppm-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .prayer-pop-messenger .ppm-shared-intro { margin-top: 26px; } .prayer-pop-messenger .ppm-header--has-image .ppm-shared-intro { margin-top: auto; padding-top: 34px; } .prayer-pop-messenger .ppm-shared-intro h2 { margin: 0 0 10px; color: inherit; font-family: var(--popup-intro-title-font-family, var(--pp-heading-font-family, inherit)); font-size: var(--popup-intro-title-font-size, 29px); font-style: var(--popup-intro-title-font-style, normal); font-weight: var(--popup-intro-title-font-weight, 700); line-height: 1.15; } .prayer-pop-messenger .ppm-shared-intro p { margin: 0; color: inherit !important; font-family: var(--popup-intro-description-font-family, var(--pp-font-family, inherit)); font-size: var(--popup-intro-description-font-size, 16px); font-style: var(--popup-intro-description-font-style, normal); font-weight: var(--popup-intro-description-font-weight, 400); line-height: 1.45; opacity: .9; } .prayer-pop-messenger .ppm-header--has-image, .prayer-pop-messenger .ppm-header--has-image .ppm-profile, .prayer-pop-messenger .ppm-header--has-image .ppm-shared-intro, .prayer-pop-messenger .ppm-header--has-image .ppm-close { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .prayer-pop-messenger.ppm-intro-collapsed .ppm-shared-intro { display: none; } .prayer-pop-messenger.ppm-intro-collapsed .ppm-header, .prayer-pop-messenger.ppm-intro-collapsed .ppm-header--has-image { --ppm-header-row-top: 16px; min-height: 0; padding-top: 16px; padding-bottom: 16px; } .prayer-pop-messenger[data-chat-enabled="0"] .ppm-nav { grid-template-columns: repeat(2, 1fr); } /* Navigation adapts to Home only, Home + Messages, or Home + Messages + FAQ. */ .prayer-pop-messenger .ppm-nav { display: flex; } .prayer-pop-messenger .ppm-nav > button { flex: 1 1 0; } /* Classic swaps Chat into the existing popup surface instead of opening a second card. */ .prayer-pop-messenger[data-layout="classic"] { grid-template-rows: 1fr; } #prayer-pop-form-container.ppm-classic-chat-host { transition: transform 0.3s ease, opacity 0.3s ease, height 220ms cubic-bezier(.2, .8, .2, 1); } #prayer-pop-form-container.ppm-classic-chat-host.ppm-classic-chat-active { height: min(520px, calc(100vh - var(--pp-bubble-height, 60px) - var(--pp-bubble-margin, 20px) - var(--pp-bubble-offset-y, 0px) - 28px)); max-height: min(520px, calc(100vh - var(--pp-bubble-height, 60px) - var(--pp-bubble-margin, 20px) - var(--pp-bubble-offset-y, 0px) - 28px)); padding: 0; overflow: hidden; } #prayer-pop-form-container.ppm-classic-chat-host.ppm-classic-chat-active > :not(.prayer-pop-messenger) { visibility: hidden; } #prayer-pop-form-container .prayer-pop-messenger.ppm-classic-chat-embedded { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-height: none; border: 0; border-radius: inherit; box-shadow: none; } .prayer-pop-messenger[data-layout="classic"] .ppm-nav { display: none; } /* Optional Pro adapter: preserve the Classic home content while using the shared nav shell. */ .prayer-pop-messenger[data-layout="classic-footer"] { --ppm-classic-footer-gutter: 14px; --ppm-classic-footer-height: 64px; grid-template-rows: 1fr var(--ppm-classic-footer-height); background: #fff; border: 0; transition: height 180ms cubic-bezier(.2, .8, .2, 1); } .prayer-pop-messenger[data-layout="classic-footer"] > .ppm-header { display: none; } .prayer-pop-messenger[data-layout="classic-footer"] > .ppm-body { background: #fff; } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-view-home { padding: 0; } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-prayer-home #prayer-pop-popup-intro { margin: 0 0 var(--pp-margin); } .prayer-pop-messenger[data-layout="classic-footer"] .prayer-pop-popup-intro--hero .prayer-pop-popup-intro__content { margin-inline: var(--ppm-classic-footer-gutter); } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-prayer-home #prayer-pop-initial-options { box-sizing: border-box; margin: 0; padding: 0 var(--ppm-classic-footer-gutter) var(--ppm-classic-footer-gutter); } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-prayer-home #prayer-pop-initial-options > [hidden] { display: none !important; } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-nav { display: flex; } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-nav > button:only-child { display: none; } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-nav > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 4px; line-height: 1.2; } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-nav .dashicons { margin: 0; line-height: 1; } .prayer-pop-messenger[data-layout="classic-footer"].ppm-prayer-form-active, .prayer-pop-messenger[data-layout="classic-footer"].ppm-prayer-faq-active { grid-template-rows: 1fr var(--ppm-classic-footer-height); height: var(--ppm-messenger-height, 620px); } .prayer-pop-messenger[data-layout="classic-footer"].ppm-prayer-form-active > .ppm-nav, .prayer-pop-messenger[data-layout="classic-footer"].ppm-prayer-faq-active > .ppm-nav { display: flex !important; } .prayer-pop-messenger[data-layout="classic-footer"] .ppm-prayer-form-screen, .prayer-pop-messenger[data-layout="classic-footer"] .ppm-prayer-faq-screen { grid-row: 1; } .prayer-pop-messenger[data-layout="classic-footer"] #prayer-pop-faq-back-button { display: none !important; } /* =========================================================================== Panel header — one component, four mount points. Every screen that has a header uses the same bar: the conversation thread (.ppm-chat-header), the Messages list in every layout (.ppm-classic-overview-header, with a back control only where there is somewhere to go back to), and the prayer/FAQ screens in classic (.ppm-classic-screen-header, assembled in JS). They previously each carried their own height, alignment and title size, so the header moved and the title resized as you crossed screens. Shared here: bar geometry, the bottom rule, and title typography. Only genuine structural differences stay per-mount below — whether a back control or an avatar is present, and whether the header has to escape a padded container to sit flush. =========================================================================== */ .prayer-pop-messenger .ppm-chat-header, .prayer-pop-messenger .ppm-classic-overview-header, .ppm-classic-screen-header { position: relative; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; gap: 10px; min-height: var(--pp-header-height, 56px); margin: 0; /* Right padding clears the close control the shell parks in this corner. */ padding: 8px var(--pp-header-gutter, 48px) 8px var(--pp-control-inset, 12px); text-align: left; border-bottom: 1px solid var(--pp-border-color, #dfe2e7); } /* --------------------------------------------------------------------------- Conversation notice — the band directly under the panel header. A standing message from the team ("we are only online Wednesday to Sunday"), authored once in the Chat settings and shown to every visitor. It belongs to the header rather than to the message list: it must not scroll away, and it is not part of the conversation. One component for every layout. The header it hangs from is already shared, so this rule needs no layout in its selector; the only per-layout work is making room for the row, below. --------------------------------------------------------------------------- */ .ppm-chat-notice { box-sizing: border-box; margin: 0; padding: 10px var(--pp-screen-inset, 20px); background: var(--pp-notice-bg, #fdf6e6); color: var(--pp-notice-color, #8a6d33); border-bottom: 1px solid var(--pp-border-color, #dfe2e7); font-size: 13px; line-height: 1.45; text-align: center; } .ppm-chat-notice a { color: inherit; text-decoration: underline; } /* One title treatment, whichever element happens to carry it. */ .prayer-pop-messenger .ppm-chat-header strong, .prayer-pop-messenger .ppm-classic-overview-header h3, .ppm-classic-screen-header .prayer-pop-heading, .ppm-classic-screen-header #prayer-pop-header h2, .ppm-classic-screen-header #prayer-pop-faq-view-header h2 { margin: 0; /* Themes commonly give headings their own padding (this one adds 10px below every h1-h6). Left in place it makes the title's box taller than its text, so centring the box leaves the text sitting high. */ padding: 0; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mount variant: in the classic layout this header sits in the popup panel rather than the chat shell, so it cancels that panel's own padding token to sit flush like the shell-mounted headers do. The shell-scoped rule below is more specific and still wins inside the shell. */ .ppm-classic-screen-header { margin: calc(var(--pp-screen-inset) * -1) calc(var(--pp-screen-inset) * -1) var(--pp-screen-inset); } /* Mount variant: these sit inside a container with its own inset, so they cancel it horizontally to span the panel edge to edge. The bottom margin is the gap between the header and whatever screen content follows it. It belongs to the header, not to each screen's first child, so every screen in every layout gets the same separation without restating it — and it matches the side inset, so the spacing around content is uniform. */ .prayer-pop-messenger .ppm-classic-overview-header, .prayer-pop-messenger .ppm-classic-screen-header { margin: calc(var(--pp-screen-inset) * -1) calc(var(--pp-screen-inset) * -1) 0; } /* Content variant: a screen whose body is ordinary content (FAQ, prayer request, testimony) is separated from its header by the header itself, so every such screen gets the same gap without its first child restating one. The message list and the thread are deliberately excluded: their rows and bubbles run edge to edge under the header. */ .prayer-pop-messenger .ppm-classic-screen-header, .ppm-classic-screen-header { margin-bottom: var(--pp-screen-inset); } /* Where a back control leads the bar, the title is centred on the panel rather than in the space left over beside that control — otherwise it sits off-centre by however wide the control happens to be. Symmetric insets clear a 28px control at a 12px inset on either side, so this stays correct if a control's size changes. */ .prayer-pop-messenger .ppm-classic-overview-header h3, .ppm-classic-screen-header #prayer-pop-header, .ppm-classic-screen-header #prayer-pop-faq-view-header { position: absolute; left: var(--pp-header-gutter, 48px); right: var(--pp-header-gutter, 48px); /* Centred explicitly rather than relying on the static position an absolutely positioned flex child falls into — that varies with the title element's own metrics, which is why some titles sat a few pixels above the back and close controls beside them. */ top: 50%; transform: translateY(-50%); margin: 0; text-align: center; } .ppm-classic-screen-header .prayer-pop-heading, .ppm-classic-screen-header #prayer-pop-header h2, .ppm-classic-screen-header #prayer-pop-faq-view-header h2 { margin: 0; text-align: center; } .ppm-classic-screen-header #prayer-pop-header, .ppm-classic-screen-header #prayer-pop-faq-view-header { margin: 0; } .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview { position: relative; padding-top: 62px; } /* One back control for every header. It is navigation, so it recedes behind the title rather than competing with it as a circled button — and it is the same size everywhere, which is what lets the title centre on the panel without per-screen compensation. The popup's own back buttons are restyled here too, since inside a header they are this component's control. */ .prayer-pop-messenger .ppm-chat-header .ppm-chat-back, .prayer-pop-messenger .ppm-classic-overview-header .ppm-classic-overview-back, .ppm-classic-screen-header #prayer-pop-back-button, .ppm-classic-screen-header #prayer-pop-faq-back-button { position: static !important; transform: none !important; flex: 0 0 auto; display: grid !important; place-items: center; width: var(--pp-control-size, 28px) !important; height: var(--pp-control-size, 28px) !important; min-width: var(--pp-control-size, 28px) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--pp-control-color, #687181); cursor: pointer; } /* The shared control sets display with !important, which outranks the browser's own [hidden] rule — so hiding it needs saying explicitly. Messenger hides its back on the thread, where there is nothing behind. */ .prayer-pop-messenger .ppm-chat-header .ppm-chat-back[hidden], .prayer-pop-messenger .ppm-classic-overview-header .ppm-classic-overview-back[hidden], .ppm-classic-screen-header #prayer-pop-back-button[hidden], .ppm-classic-screen-header #prayer-pop-faq-back-button[hidden] { display: none !important; } .prayer-pop-messenger .ppm-chat-header .ppm-chat-back:hover, .prayer-pop-messenger .ppm-classic-overview-header .ppm-classic-overview-back:hover, .ppm-classic-screen-header #prayer-pop-back-button:hover, .ppm-classic-screen-header #prayer-pop-faq-back-button:hover { color: var(--pp-bubble-bg-color, var(--pp-bg-color, #365bb2)); } .prayer-pop-messenger .ppm-chat-header .ppm-chat-back:focus-visible, .prayer-pop-messenger .ppm-classic-overview-header .ppm-classic-overview-back:focus-visible, .ppm-classic-screen-header #prayer-pop-back-button:focus-visible, .ppm-classic-screen-header #prayer-pop-faq-back-button:focus-visible { outline: 3px solid rgba(54, 91, 178, .22); outline-offset: 2px; } @media(max-width:600px) { .prayer-pop-messenger .ppm-header--has-image { min-height: 180px; } } /* Keep Messenger calls to action in the existing PrayerPop button system. */ .prayer-pop-messenger .ppm-start-message.prayer-pop-option-button { position: relative; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0; padding: var(--pp-padding) !important; border: 0 !important; border-radius: var(--pp-border-radius) !important; background: var(--pp-bg-color) !important; box-shadow: none !important; color: var(--pp-font-color) !important; font-family: var(--pp-font-family, inherit); font-size: var(--pp-font-size); font-weight: var(--pp-bold-font-weight); line-height: normal; text-align: center; transition: background-color .3s ease !important; } .prayer-pop-messenger .ppm-start-message.prayer-pop-option-button:hover { background: var(--pp-button-hover-color) !important; } .prayer-pop-messenger .ppm-start-message.prayer-pop-option-button > span:last-child { position: absolute; right: var(--pp-padding); display: inline !important; width: auto; height: auto; border-radius: 0; background: transparent !important; color: inherit !important; font-size: 1.25em; line-height: 1; } .prayer-pop-messenger .ppm-overview-start, .prayer-pop-messenger .ppm-closed .ppm-new { border-radius: var(--pp-border-radius) !important; background: var(--pp-bg-color) !important; color: var(--pp-font-color) !important; font-family: var(--pp-font-family, inherit); font-size: var(--pp-font-size); font-weight: var(--pp-bold-font-weight); transition: background-color .3s ease !important; } .prayer-pop-messenger .ppm-overview-start:hover, .prayer-pop-messenger .ppm-closed .ppm-new:hover { background: var(--pp-button-hover-color) !important; } .prayer-pop-messenger .ppm-prayer-home #prayer-pop-initial-options { margin-top: var(--pp-margin) !important; } /* Hidden chat states must win over the layout display declarations above. */ .prayer-pop-messenger .ppm-chat-screen .ppm-identify[hidden], .prayer-pop-messenger .ppm-chat-screen .ppm-thread[hidden] { display: none !important; } /* Prayer, testimony, and button-launched FAQ views are standalone destinations. */ .prayer-pop-messenger .ppm-prayer-form-screen[hidden], .prayer-pop-messenger .ppm-prayer-faq-screen[hidden] { display: none !important; } .prayer-pop-messenger .ppm-prayer-form-screen, .prayer-pop-messenger .ppm-prayer-faq-screen { grid-column: 1; grid-row: 1; min-height: 0; overflow: auto; box-sizing: border-box; padding: var(--pp-screen-inset); background: #fff; } .prayer-pop-messenger.ppm-prayer-form-active, .prayer-pop-messenger.ppm-prayer-faq-active { grid-template-rows: 1fr; } .prayer-pop-messenger.ppm-prayer-form-active > .ppm-header, .prayer-pop-messenger.ppm-prayer-form-active > .ppm-body, .prayer-pop-messenger.ppm-prayer-form-active > .ppm-nav, .prayer-pop-messenger.ppm-prayer-faq-active > .ppm-header, .prayer-pop-messenger.ppm-prayer-faq-active > .ppm-body, .prayer-pop-messenger.ppm-prayer-faq-active > .ppm-nav { display: none !important; } .prayer-pop-messenger .ppm-prayer-form-screen #prayer-pop-form-wrapper, .prayer-pop-messenger .ppm-prayer-faq-screen #prayer-pop-faq-wrapper { min-height: 0; margin: 0 !important; } /* Keep Home and forms compact; the Messages view retains the dedicated chat height. */ .prayer-pop-messenger:not([data-active-view="messages"]) { height: auto; max-height: min(680px, calc(100vh - 48px)); } @media (max-width: 600px) { .prayer-pop-messenger:not([data-active-view="messages"]) { inset: auto 16px 16px; width: auto; max-height: calc(100vh - 32px); border-radius: max(18px, var(--pp-border-radius, 18px)); } .prayer-pop-messenger .ppm-prayer-form-screen, .prayer-pop-messenger .ppm-prayer-faq-screen { padding: var(--pp-screen-inset); } } /* A compact desktop panel keeps conversations focused without changing mobile. */ @media (min-width: 601px) { .prayer-pop-messenger { height: min(620px, calc(100vh - var(--pp-bubble-height, 60px) - var(--pp-bubble-margin, 20px) - var(--pp-bubble-offset-y, 0px) - 28px)); } .prayer-pop-messenger:not([data-active-view="messages"]) { max-height: min(620px, calc(100vh - 48px)); } } /* The onboarding screen is built like the conversation screen: a scrolling feed on top, quick-action chips under it, and the input pinned to the bottom — so the question that leads the input is the only thing that changes between the steps, and between onboarding and a live thread the field never jumps. The welcome message keeps its natural height inside the feed instead of being stretched by a grid track, which is what used to move the agent avatar whenever a step grew or shrank. */ .prayer-pop-messenger .ppm-chat-screen .ppm-identify { --ppm-identify-inset: var(--pp-screen-inset, 16px); box-sizing: border-box; display: grid !important; grid-template-rows: minmax(0, 1fr) auto auto; height: 100%; min-height: 0; padding: 0 !important; overflow: hidden !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-identify-feed { box-sizing: border-box; grid-row: 1; min-height: 0; padding: var(--ppm-identify-inset) var(--ppm-identify-inset) 4px; overflow-y: auto; scrollbar-width: thin; } /* Destination chips share the composer's row band, exactly as they do above the thread composer. The inset is padding rather than margin so the first chip lines up with the question, the field and the welcome bubble above it, while the row itself still runs the full width — chips past the edge stay reachable by scrolling instead of being clipped early. */ .prayer-pop-messenger .ppm-chat-screen .ppm-identify > #prayer-pop-initial-options.ppm-feed-actions { grid-row: 2; padding: 0 var(--ppm-identify-inset) 2px; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding { box-sizing: border-box; grid-row: 3; height: auto; min-height: 0; margin-top: 0; padding: 0 var(--ppm-identify-inset) var(--ppm-identify-inset); } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step:not([hidden]) { box-sizing: border-box; display: grid !important; grid-template-rows: auto auto auto; align-content: start; height: auto; min-height: 0; padding-bottom: 2px; gap: 0; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="name"] .ppm-step-count { margin-bottom: 8px; } /* Keep the editable step label and add a quick visual progress cue. */ .prayer-pop-messenger .ppm-chat-screen .ppm-step-count { --ppm-step-progress: 33.333%; display: inline-grid; grid-template-columns: 54px auto; align-items: center; gap: 9px; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"] .ppm-step-count { --ppm-step-progress: 66.666%; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="message"] .ppm-step-count { --ppm-step-progress: 100%; } .prayer-pop-messenger .ppm-chat-screen .ppm-step-count::before { content: ""; width: 54px; height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--pp-bubble-bg-color, var(--pp-bg-color, #365bb2)) 0 var(--ppm-step-progress), color-mix(in srgb, var(--pp-border-color, #d5d9e0) 82%, transparent) var(--ppm-step-progress) 100%); } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"]:not([hidden]), .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="message"]:not([hidden]) { grid-template-columns: 40px max-content 1fr max-content; grid-template-rows: auto auto auto; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"] .ppm-step-links, .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="message"] .ppm-step-links { display: contents !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"] .ppm-step-links [data-back], .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="message"] .ppm-step-links [data-back] { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; margin: 0 !important; padding: 0 !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"] .ppm-step-links [data-back] .dashicons, .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="message"] .ppm-step-links [data-back] .dashicons { width: 24px; height: 24px; font-size: 24px; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"] .ppm-step-count, .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="message"] .ppm-step-count { grid-column: 2; grid-row: 1; align-self: center; margin: 0 !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"] .ppm-step-skip { grid-column: 4; grid-row: 1; align-self: center; justify-self: end; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"] .ppm-step-prompt, .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="message"] .ppm-step-prompt { grid-column: 1 / -1; grid-row: 2; align-self: start; margin: 0 !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="email"] .ppm-step-control, .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[data-step="message"] .ppm-first-composer { grid-column: 1 / -1; grid-row: 3; align-self: start; margin: 0 !important; } /* The onboarding question is plain copy, with only a little room before its field. */ .prayer-pop-messenger .ppm-step-prompt { max-width: none; padding: 0 0 10px !important; border-radius: 0 !important; background: transparent !important; } /* Only the active onboarding step is visible. */ .prayer-pop-messenger .ppm-chat-screen .ppm-onboarding-step[hidden] { display: none !important; } /* Classic overview uses the exact shared header and spacing system. */ .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: 16px; } .prayer-pop-messenger[data-layout="classic"] .ppm-classic-overview-header { grid-column: 1; grid-row: 1; margin-bottom: 0; } .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview .ppm-conversation-card, .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview .ppm-no-conversations { grid-column: 1; grid-row: 2; } .prayer-pop-messenger .ppm-conversation-list { display: flex; flex-direction: column; width: calc(100% + 36px); margin: 0 -18px; } /* The Messages overview should look the same regardless of layout — simple and classic otherwise inherit the grey .ppm-body background that messenger/classic-footer already override to white for this view. */ .prayer-pop-messenger .ppm-message-overview { background: #fff; } /* Conversation rows are a full-width list directly below the Messages header. */ .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview .ppm-conversation-card { align-self: start; box-sizing: border-box; width: calc(100% + 32px); min-height: 80px; margin: 0 -16px; padding: 16px 32px; } .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview .ppm-conversation-list { grid-column: 1; grid-row: 2; align-self: start; width: calc(100% + 32px); margin: 0 -16px; } .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview .ppm-conversation-list .ppm-conversation-card { width: 100%; margin: 0; } /* Conversation rows share one divider. The header owns the line above the first row, and each row owns only its lower line. */ .prayer-pop-messenger .ppm-conversation-list .ppm-conversation-card { border: 0 !important; border-bottom: 1px solid var(--pp-border-color, #dfe2e7) !important; } .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview .ppm-no-conversations { align-self: center; justify-self: stretch; } .prayer-pop-messenger[data-layout="classic"] .ppm-message-overview .ppm-overview-start { grid-column: 1; grid-row: 3; align-self: end; justify-self: center; } /* The shared welcome copy is an incoming message, not plain page content. */ .prayer-pop-messenger .ppm-thread-welcome > div { background: #e9ebef !important; border-radius: 18px 18px 18px 6px !important; padding: 12px 14px !important; color: #172033 !important; } /* PrayerPop Chat: compact conversation-first feed. Classic layouts stay unchanged. */ .prayer-pop-messenger[data-layout="messenger"] { --ppm-radius: var(--chat-border-radius, 16px); --pp-border-radius: var(--ppm-radius); grid-template-rows: var(--pp-header-height, 56px) minmax(0, 1fr); width: min(var(--pp-popup-width), calc(100vw - 32px)); height: var(--ppm-messenger-height, 520px); max-height: calc(100vh - var(--pp-bubble-height, 60px) - var(--pp-bubble-margin, 20px) - var(--pp-bubble-offset-y, 0px) - 28px); border: 0; /* The outer card shape is fixed at 20px across every layout for visual consistency — only the internal bubbles/buttons still follow the configurable Chat Corner Radius (--ppm-radius) below. */ border-radius: 20px; background: #fff; transition: height 180ms cubic-bezier(.2, .8, .2, 1); } .prayer-pop-messenger[data-layout="messenger"] .ppm-close::before, .prayer-pop-messenger[data-layout="messenger"] .ppm-close::after { width: 18px; height: 2px; } .prayer-pop-messenger[data-layout="messenger"] > .ppm-body { min-height: 0; overflow: hidden; background: #fff; } .prayer-pop-messenger[data-layout="messenger"] .ppm-nav, .prayer-pop-messenger[data-layout="messenger"] .ppm-view-home, .prayer-pop-messenger[data-layout="messenger"] .ppm-view-faq { display: none !important; } /* Messenger drew its own header with a duplicate back, avatar, name and close. It now uses the shared panel header, promoted to the shell's first row by mountMessengerHeader(), so its own chrome is retired. */ .prayer-pop-messenger[data-layout="messenger"] > .ppm-header { display: none !important; } /* The shared header is a shell-level row here, not a child of the chat screen, so it spans the panel and keeps the component's own geometry. The notice is promoted with it and keeps its place directly underneath. */ .prayer-pop-messenger[data-layout="messenger"] > .ppm-chat-header { width: 100%; background: #fff; } .prayer-pop-messenger[data-layout="messenger"].ppm-has-notice { grid-template-rows: var(--pp-header-height, 56px) auto minmax(0, 1fr); } /* Every screen except the thread brings its own header — the conversation list its "Messages" title, the prayer and FAQ screens theirs — so the thread's identity header steps aside rather than stacking a second title above them. */ .prayer-pop-messenger[data-layout="messenger"][data-message-screen="overview"] > .ppm-chat-header, .prayer-pop-messenger[data-layout="messenger"][data-message-screen="overview"] > .ppm-chat-notice, .prayer-pop-messenger[data-layout="messenger"].ppm-prayer-form-active > .ppm-chat-header, .prayer-pop-messenger[data-layout="messenger"].ppm-prayer-form-active > .ppm-chat-notice, .prayer-pop-messenger[data-layout="messenger"].ppm-prayer-faq-active > .ppm-chat-header, .prayer-pop-messenger[data-layout="messenger"].ppm-prayer-faq-active > .ppm-chat-notice { display: none !important; } /* ...and the rows they occupied go with them. A hidden grid child leaves its track behind, so without this the screen below is sized to the header's 56px and the rest of it is clipped away outside the panel. Same selectors as the rule above deliberately: the rows exist exactly when the header does. */ .prayer-pop-messenger[data-layout="messenger"][data-message-screen="overview"], .prayer-pop-messenger[data-layout="messenger"].ppm-prayer-form-active, .prayer-pop-messenger[data-layout="messenger"].ppm-prayer-faq-active { grid-template-rows: minmax(0, 1fr); } /* mountSharedCloseControl() promotes whichever close PHP rendered — for every layout, not just messenger and classic-footer — to a direct child of the shell root, so it survives every active view instead of disappearing with whatever header happened to contain it. One rule here covers all of them on the same shared control tokens; classic-footer's One rule, one mount: PHP renders exactly one .ppm-close for every layout and this positions it, so no screen can end up without a way out. */ .prayer-pop-messenger > .ppm-close { position: absolute; top: var(--pp-control-offset, 14px); right: var(--pp-control-inset, 12px); z-index: 12; width: var(--pp-control-size, 28px); height: var(--pp-control-size, 28px); min-width: var(--pp-control-size, 28px); margin: 0 !important; padding: 0 !important; color: var(--pp-control-color, #687181); } .prayer-pop-messenger[data-layout="messenger"] .ppm-view-messages.is-active { position: absolute !important; inset: 0 !important; display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; } /* The chat screen is a grid of header + body; with a notice it is header + notice + body. Stated once, for every layout that mounts the screen this way. */ .prayer-pop-messenger.ppm-has-notice .ppm-chat-screen { grid-template-rows: auto auto minmax(0, 1fr); } .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen { display: block; width: 100%; height: 100% !important; min-height: 0; margin: 0; overflow: hidden; background: #fff; } .prayer-pop-messenger[data-layout="messenger"] .ppm-identify, .prayer-pop-messenger[data-layout="messenger"] .ppm-thread { box-sizing: border-box; height: 100%; min-height: 0; padding: 16px; overflow-y: auto; background: #fff; } .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen .ppm-identify { --ppm-identify-inset: 16px; } .prayer-pop-messenger[data-layout="messenger"] .ppm-agent-welcome, .prayer-pop-messenger[data-layout="messenger"] .ppm-thread-welcome { display: flex; align-items: flex-start; gap: 8px; width: 100%; max-width: none; margin: 0 0 14px; text-align: left; } .prayer-pop-messenger[data-layout="messenger"] .ppm-agent-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--pp-bubble-bg-color, var(--pp-bg-color, #0048a6)); color: var(--pp-font-color, #fff); font-size: 15px; line-height: 28px; object-fit: cover; } .prayer-pop-messenger[data-layout="messenger"] .ppm-agent-welcome-copy { display: grid; gap: 4px; min-width: 0; } .prayer-pop-messenger[data-layout="messenger"] .ppm-agent-welcome-copy > .ppm-agent-welcome-bubble { display: block; max-width: 250px; padding: 12px 14px; border: 0; border-radius: 18px 18px 18px 6px; background: #e9ebef; color: #172033; font-size: 14px; line-height: 1.45; } .prayer-pop-messenger[data-layout="messenger"] .ppm-agent-welcome-copy strong, .prayer-pop-messenger[data-layout="messenger"] .ppm-agent-welcome-copy > .ppm-agent-welcome-bubble > span { display: block; } .prayer-pop-messenger[data-layout="messenger"] .ppm-agent-welcome-copy strong { margin: 0 0 4px; font-size: inherit; } .prayer-pop-messenger[data-layout="messenger"] .ppm-agent-welcome-copy small { margin: 0 !important; padding: 0 4px; color: #747b88; font-size: 12px; line-height: 1.2; } /* The initial welcome is a Chat message in every Chat presentation. Footer * navigation can use a classic-footer marker, so this must not rely on the * messenger layout selector to retain its bubble. */ .prayer-pop-messenger .ppm-agent-welcome, .prayer-pop-messenger .ppm-thread-welcome { display: flex; align-items: flex-start; gap: 8px; max-width: none; margin: 0 0 14px; text-align: left; } .prayer-pop-messenger .ppm-agent-welcome-copy { display: grid; gap: 4px; min-width: 0; } .prayer-pop-messenger .ppm-agent-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--pp-bubble-bg-color, var(--pp-bg-color, #0048a6)); color: var(--pp-font-color, #fff); font-size: 15px; line-height: 28px; object-fit: cover; } .prayer-pop-messenger .ppm-agent-welcome .ppm-agent-avatar, .prayer-pop-messenger .ppm-thread-welcome .ppm-agent-avatar { margin-top: 10px; } .prayer-pop-messenger .ppm-agent-welcome-bubble { display: block; max-width: 250px; padding: 12px 14px; border: 0; border-radius: 18px 18px 18px 6px; background: #e9ebef; color: #172033; font-size: 14px; line-height: 1.45; } .prayer-pop-messenger .ppm-agent-welcome-bubble strong, .prayer-pop-messenger .ppm-agent-welcome-bubble > span { display: block; } .prayer-pop-messenger .ppm-agent-welcome-bubble strong { margin: 0 0 4px; font-size: inherit; } .prayer-pop-messenger .ppm-agent-welcome-copy small { display: block; margin: 0 !important; padding: 0 4px; color: #747b88; font-size: 12px; line-height: 1.2; } .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options.ppm-feed-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 auto; gap: 6px; width: 100%; margin: 0 0 8px; padding: 0 0 2px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options.ppm-feed-actions::-webkit-scrollbar { display: none; } .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options .ppm-feed-action { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto !important; width: max-content !important; min-width: 0; height: 38px; margin: 0 !important; padding: 0 14px !important; gap: 5px; border: 1px solid var(--pp-bubble-bg-color, var(--pp-bg-color, #0048a6)) !important; border-radius: var(--ppm-radius) !important; /* They overlay the conversation, so they need an opaque surface rather than letting message bubbles show through behind the label. */ background: #fff !important; color: var(--pp-bubble-bg-color, var(--pp-bg-color, #0048a6)) !important; box-shadow: none !important; font: inherit !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap; } .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options .ppm-feed-action::before { content: "\f487"; font-family: dashicons; font-size: 16px; font-weight: 400; } .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options [data-option="testimony"]::before { content: "\f313"; } .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options [data-option="faq"]::before { content: "\f223"; } .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options .prayer-pop-custom-button::before { content: "\f504"; } .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options .ppm-feed-action:hover, .prayer-pop-messenger[data-layout="messenger"] #prayer-pop-initial-options .ppm-feed-action:focus-visible { background: color-mix(in srgb, var(--pp-bubble-bg-color, var(--pp-bg-color, #0048a6)) 8%, transparent) !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-onboarding { margin: 0; } .prayer-pop-messenger[data-layout="messenger"] .ppm-onboarding-step { gap: 7px; animation: ppm-step-in .18s ease-out; } .prayer-pop-messenger[data-layout="messenger"] .ppm-step-count { font-size: 12px; } .prayer-pop-messenger[data-layout="messenger"] .ppm-step-prompt { max-width: 88%; padding: 0 0 3px; border-radius: 0; background: transparent; font-size: 16px; line-height: 1.45; } .prayer-pop-messenger[data-layout="messenger"] .ppm-thread { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; padding: 0; overflow: hidden; } .prayer-pop-messenger[data-layout="messenger"] .ppm-thread .ppm-messages { grid-row: 1; grid-column: 1; min-height: 0; padding: 16px 16px 76px !important; overflow-y: auto; } /* Quick-action pills float over the bottom of the message list instead of claiming their own row — otherwise they permanently eat into the already short scrollable message area of a fixed-height widget. They share the messages track (grid-row 1) and only their buttons are clickable, so the empty space around them still lets scroll/click pass through to the messages beneath. */ .prayer-pop-messenger[data-layout="messenger"] .ppm-thread #prayer-pop-initial-options.ppm-feed-actions { grid-row: 1; grid-column: 1; align-self: end; justify-self: stretch; width: 100%; margin: 0; padding: 4px 12px calc(8px + var(--pp-composer-overlap)); pointer-events: none; z-index: 1; } .prayer-pop-messenger[data-layout="messenger"] .ppm-thread #prayer-pop-initial-options.ppm-feed-actions .ppm-feed-action { pointer-events: auto; } /* Zero top padding here (and on the shared, non-layout-specific composer rule) is deliberate: the composer sits directly against the message list's own bottom padding, with no second gap stacked on top of it, so the input pill reads as part of the scrolling conversation rather than a separate footer bar floating above it. */ .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen .ppm-composer { padding: 0 12px 12px !important; border: 0 !important; background: transparent !important; } /* Messenger uses the same threaded-message overlap as Classic and Simple. Only onboarding places destination chips between the message list and the composer, so that state keeps the composer in its normal grid row. */ .prayer-pop-messenger[data-layout="messenger"] { --pp-composer-overlap: 20px; } .prayer-pop-messenger[data-layout="messenger"].ppm-feed-actions-active { --pp-composer-overlap: 0px; } /* Only the body scale is messenger's own here. The fill, border and radius belong to the shared .ppm-composer-field pill around it — setting them on the textarea drew a second rounded box inside the pill. */ .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen .ppm-composer textarea { font-size: 16px !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen .ppm-composer textarea:focus { border: 0 !important; box-shadow: none !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-thread-welcome, .prayer-pop-messenger[data-layout="messenger"] .ppm-message { font-size: 16px !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-thread-welcome > div, .prayer-pop-messenger[data-layout="messenger"] .ppm-message-admin > div { border-radius: var(--ppm-radius) var(--ppm-radius) var(--ppm-radius) 4px !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-message-visitor > div { border-radius: var(--ppm-radius) var(--ppm-radius) 4px var(--ppm-radius) !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-message time { font-size: 12px !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-prayer-form-screen, .prayer-pop-messenger[data-layout="messenger"] .ppm-prayer-faq-screen { grid-row: 1; padding: var(--pp-screen-inset); background: #fff; } .prayer-pop-messenger[data-layout="messenger"] .ppm-prayer-form-screen #prayer-pop-description p { font-size: 16px !important; line-height: 1.45 !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-prayer-form-screen #prayer-pop-last-time, .prayer-pop-messenger[data-layout="messenger"] .ppm-prayer-form-screen #prayer-pop-form label, .prayer-pop-messenger[data-layout="messenger"] .ppm-prayer-form-screen #prayer-pop-form input:not([type="checkbox"]):not([type="radio"]), .prayer-pop-messenger[data-layout="messenger"] .ppm-prayer-form-screen #prayer-pop-form textarea, .prayer-pop-messenger[data-layout="messenger"] .ppm-prayer-form-screen #prayer-pop-form select { font-size: 16px !important; line-height: 1.4 !important; } @keyframes ppm-message-view-enter { from { transform: translateX(16px); } to { transform: translateX(0); } } .prayer-pop-messenger .ppm-view-messages.ppm-message-view-enter { animation: ppm-message-view-enter 180ms cubic-bezier(.2, .8, .2, 1); } /* On phones the shell floats above the page like the popup layouts do, instead of taking the whole viewport. classic-footer is a standalone panel exactly as messenger is — its footer nav is chrome inside the panel, not a reason to fill the screen — so both share this geometry. !important is load-bearing: an earlier rule pins every .prayer-pop-messenger to inset:0/100% with !important at this width, which silently outranked this block and made the panel fullscreen regardless. */ @media (max-width: 600px) { .prayer-pop-messenger[data-layout="messenger"], .prayer-pop-messenger[data-layout="classic-footer"] { inset: auto 16px 16px !important; width: calc(100% - 32px) !important; height: var(--ppm-messenger-height, 520px) !important; max-height: calc(100vh - 32px) !important; /* 20px is the fixed outer card shape every layout shares; --ppm-radius is only defined for messenger, and without a fallback the whole declaration drops and the panel keeps the square phone corners. */ border-radius: var(--ppm-radius, 20px) !important; } } /* Simple and Classic Chat use the full viewport on phones and small tablets. The two standalone shells keep the floating geometry above. */ @media (max-width: 782px) { .prayer-pop-messenger:not([data-layout="messenger"]):not([data-layout="classic-footer"])[data-active-view="messages"] { inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; } body.ppm-open #prayer-pop-bubble { visibility: hidden; pointer-events: none; } } /* Welcome on top, active question pinned to the bottom: every layout gets that from the shared .ppm-identify grid above, so nothing is scoped to a single layout here any more. */ @media (prefers-reduced-motion: reduce) { .prayer-pop-messenger[data-layout="messenger"], .prayer-pop-messenger[data-layout="classic-footer"] { transition: none; } .prayer-pop-messenger .ppm-view-messages.ppm-message-view-enter { animation: none; } } /* Every team response uses the opening-message identity and metadata pattern. */ .prayer-pop-messenger .ppm-message.ppm-message-admin { display: flex !important; flex-direction: row !important; align-items: flex-start !important; align-self: flex-start !important; gap: 8px !important; width: auto !important; max-width: 100% !important; text-align: left !important; } .prayer-pop-messenger .ppm-message-admin .ppm-message-team-avatar { margin-top: 10px; } .prayer-pop-messenger .ppm-message-admin .ppm-message-team-copy { display: grid !important; gap: 4px !important; min-width: 0; } .prayer-pop-messenger .ppm-message-admin .ppm-agent-welcome-bubble { display: block; width: fit-content; max-width: 250px; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: 18px 18px 18px 6px; background: #e9ebef; color: #172033; font-size: inherit; line-height: 1.45; overflow-wrap: anywhere; } .prayer-pop-messenger .ppm-message-admin .ppm-message-team-copy small, .prayer-pop-messenger .ppm-message-admin .ppm-message-team-copy time { display: block; margin: 0 !important; padding: 0 4px !important; color: #747b88 !important; font-size: 12px !important; line-height: 1.2 !important; } .prayer-pop-messenger .ppm-message-admin .ppm-message-team-copy time { font-size: 10px !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-message-admin .ppm-agent-welcome-bubble { border-radius: var(--ppm-radius) var(--ppm-radius) var(--ppm-radius) 4px !important; } .prayer-pop-messenger[data-layout="messenger"] .ppm-message-admin .ppm-message-team-copy time { font-size: 12px !important; } /* Consecutive messages from the same sender in one minute form one group. */ .prayer-pop-messenger .ppm-message.ppm-message-grouped { margin-top: -10px !important; } .prayer-pop-messenger .ppm-message-admin.ppm-message-grouped .ppm-message-team-avatar { visibility: hidden; } /* Keep the sender and timestamp together on one compact metadata row. */ .prayer-pop-messenger .ppm-message-admin .ppm-message-team-copy { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px !important; row-gap: 4px !important; } .prayer-pop-messenger .ppm-message-admin .ppm-message-team-copy .ppm-agent-welcome-bubble { grid-column: 1 / -1; grid-row: 1; } .prayer-pop-messenger .ppm-message-admin .ppm-message-team-copy small { grid-column: 1; grid-row: 2; min-width: 0; } .prayer-pop-messenger .ppm-message-admin .ppm-message-team-copy time { grid-column: 2; grid-row: 2; align-self: center; padding-left: 0 !important; white-space: nowrap; } .prayer-pop-messenger .ppm-chat-header img, .prayer-pop-messenger .ppm-chat-header > .dashicons { width: 32px; height: 32px; font-size: 22px; flex: 0 0 auto; } .prayer-pop-messenger .ppm-chat-header img { border-radius: 30%; object-fit: cover; } .prayer-pop-messenger .ppm-chat-header > span:last-child { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; line-height: 1.25; } .prayer-pop-messenger .ppm-chat-header strong { display: block; } .prayer-pop-messenger .ppm-chat-header small { display: block; font-size: 12px; /* The subtitle only works if it recedes behind the name. It inherits --pp-label-color, which a site can set to full-strength body text (this one uses #333), leaving two competing titles. Opacity steps it back whatever colour the theme supplies, instead of hardcoding a grey. */ opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prayer-pop-messenger .ppm-agent-welcome { align-items: flex-end; padding-bottom: 21px; } .prayer-pop-messenger .ppm-agent-welcome-copy { position: relative; } .prayer-pop-messenger .ppm-agent-welcome .ppm-agent-avatar { align-self: flex-end; margin-top: 0; } .prayer-pop-messenger .ppm-agent-welcome .ppm-agent-welcome-copy small { position: absolute; top: calc(100% + 5px); left: 0; } /* Attachments */ .prayer-pop-messenger .ppm-composer { flex-wrap: wrap; } .prayer-pop-messenger .ppm-attachment-previews { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 1px; } .prayer-pop-messenger .ppm-attachment-previews[hidden] { display: none; } .prayer-pop-messenger .ppm-pending-attachment { position: relative; display: flex; align-items: center; gap: 6px; max-width: 140px; padding: 5px 8px; border: 1px solid #d5d9e0; border-radius: 10px; background: #fff; font-size: 11px; color: #445064; } .prayer-pop-messenger .ppm-pending-attachment.is-uploading { opacity: 0.6; } .prayer-pop-messenger .ppm-pending-attachment img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; } /* Image attachments show as a bare thumbnail with a small corner badge to remove them, matching the compact preview pattern of other chat widgets — no border/name chip needed since the image itself is the identification. */ .prayer-pop-messenger .ppm-pending-attachment--image { max-width: none; padding: 0; border: 0; border-radius: 10px; background: transparent; overflow: visible; } .prayer-pop-messenger .ppm-pending-attachment--image img { width: 48px; height: 48px; border-radius: 10px; } .prayer-pop-messenger .ppm-pending-attachment .dashicons { font-size: 18px; width: 18px; height: 18px; color: #6b7280; flex: 0 0 auto; } .prayer-pop-messenger .ppm-pending-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prayer-pop-messenger .ppm-pending-attachment-remove { flex: 0 0 auto; margin-left: 2px; border: 0; background: none; color: #6b7280; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; } .prayer-pop-messenger .ppm-pending-attachment--image .ppm-pending-attachment-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #445064; font-size: 13px; box-shadow: 0 1px 4px rgba(23, 32, 51, 0.25); opacity: 0.85; } .prayer-pop-messenger .ppm-pending-attachment--image .ppm-pending-attachment-remove:hover { opacity: 1; color: #172033; } /* The chat-screen layout's blanket "any button inside .ppm-composer" rules (sized/colored for the send button) also match this remove control since it lives in the same form — pin it back down to a small, quiet control. */ .prayer-pop-messenger .ppm-chat-screen .ppm-composer .ppm-pending-attachment-remove, .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen .ppm-composer .ppm-pending-attachment-remove { display: grid !important; place-items: center !important; flex: 0 0 auto !important; width: 18px !important; height: 18px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; color: #6b7280 !important; font-size: 14px !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer .ppm-pending-attachment--image .ppm-pending-attachment-remove, .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen .ppm-composer .ppm-pending-attachment--image .ppm-pending-attachment-remove { position: absolute !important; top: -6px !important; right: -6px !important; background: #fff !important; color: #445064 !important; font-size: 13px !important; box-shadow: 0 1px 4px rgba(23, 32, 51, 0.25) !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer .ppm-pending-attachment-remove:hover, .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen .ppm-composer .ppm-pending-attachment-remove:hover { background: rgba(0, 0, 0, 0.06) !important; filter: none !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer .ppm-pending-attachment--image .ppm-pending-attachment-remove:hover, .prayer-pop-messenger[data-layout="messenger"] .ppm-chat-screen .ppm-composer .ppm-pending-attachment--image .ppm-pending-attachment-remove:hover { background: #fff !important; color: #172033 !important; } .prayer-pop-messenger .ppm-attach-error { margin: 0; font-size: 12px; color: #b91c1c; } .prayer-pop-messenger .ppm-attach-error[hidden] { display: none; } /* The composer field is one shared pill holding the textarea and the attach/send controls together (matching the grouped-controls pattern real chat products use), rather than a separate button outside it. */ .prayer-pop-messenger .ppm-composer-field { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 6px; border: 1px solid #d5d9e0; border-radius: 14px; background: #fff; padding: 5px 5px 5px 12px; box-sizing: border-box; } .prayer-pop-messenger .ppm-composer-input-row { display: flex; align-items: center; gap: 4px; } .prayer-pop-messenger .ppm-composer-field textarea, .prayer-pop-messenger .ppm-composer-field input:not([type="file"]) { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 6px 0 !important; resize: none; box-shadow: none !important; outline: none !important; } /* One focus ring, on the pill itself, never on the textarea it contains. */ .prayer-pop-messenger .ppm-composer-field:focus-within { border-color: var(--pp-bubble-bg-color, var(--pp-bg-color, #173ee8)); } .prayer-pop-messenger .ppm-composer-ctas { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .prayer-pop-messenger .ppm-composer-ctas .ppm-attach-trigger .dashicons { font-size: 14px; width: 14px; height: 14px; } .prayer-pop-messenger .ppm-composer-ctas .ppm-attach-trigger[hidden] { display: none; } /* The real file input is never meant to be visible — only the paperclip trigger button is, which opens it programmatically via input.click(). Reinforced explicitly (as the trigger's own [hidden] rule already is) because some themes carry a global input[type="file"] { display: ... } reset that outranks the browser's native [hidden] default. */ .prayer-pop-messenger .ppm-composer-ctas .ppm-attach-input { display: none !important; } .prayer-pop-messenger .ppm-composer-ctas .ppm-send-button { width: 34px; height: 34px; flex: 0 0 auto; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--pp-bubble-bg-color, var(--pp-bg-color, #173ee8)); color: #fff; font-size: 18px; cursor: pointer; } .prayer-pop-messenger .ppm-composer-ctas .ppm-send-button:disabled { opacity: 0.45; cursor: default; } /* The messenger/classic-footer composer bar styles the textarea itself as the pill with its own !important border/background; relocate that look to the shared field wrapper instead, at matching specificity. */ .prayer-pop-messenger .ppm-chat-screen .ppm-composer-field { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; gap: 4px !important; margin: 0 !important; padding: 5px 5px 5px 13px !important; border: 1px solid #d9dde4 !important; border-radius: 15px !important; /* The pill has to read as a distinct control against the thread behind it. It previously used the thread's own #f7f8fa, so the two had no colour boundary at all: the only thing describing the pill was its 1px border, and at the rounded corners that identical grey carried on past the curve, looking like the field's fill leaking into a square corner. White is what the shared .ppm-composer-field rule already uses. */ background: #fff !important; box-sizing: border-box !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer-input-row { display: flex !important; align-items: center !important; gap: 4px !important; } /* The composer sits ON the conversation, not in a row beneath it. .ppm-messages is its own scroll box in a separate grid row, so it clips its content at its bottom edge. When that edge met the pill's top edge, nothing could ever render behind the pill's rounded corners and they showed flat background instead of the conversation carrying on underneath. A negative top margin lifts the composer over the message list (the grid gives the list back the 20px), so messages scroll under the pill and stay visible around its corners. The list still clips before the composer's bottom padding, so nothing shows below the pill. The pill itself is opaque, and .ppm-messages carries 20px of extra bottom padding so the last message still comes to rest above the pill rather than under it. */ .prayer-pop-messenger .ppm-chat-screen .ppm-composer { position: relative !important; z-index: 2 !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer-field textarea, .prayer-pop-messenger .ppm-chat-screen .ppm-composer-field input:not([type="file"]) { display: block !important; flex: 1 1 auto !important; width: auto !important; /* 6px top/bottom padding + a 20px line-height need 32px to show one full line without clipping; 30px was 2px short of that, so the box was already overflowing at rest and the auto-grow script (which reads this height back) jumped to its own hardcoded value the moment anything was typed. Matching the padding/line-height math here is what makes typing a short line no longer visibly resize the box. */ height: 32px !important; min-height: 32px !important; max-height: 100px !important; margin: 0 !important; padding: 6px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #172033 !important; font: inherit !important; font-size: 14px !important; line-height: 20px !important; resize: none !important; box-shadow: none !important; outline: none !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer-field:focus-within { border-color: var(--pp-bubble-bg-color, var(--pp-bg-color, #365bb2)) !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer-ctas .ppm-send-button { display: grid !important; place-items: center !important; flex: 0 0 30px !important; width: 30px !important; height: 30px !important; min-width: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--pp-bubble-bg-color, var(--pp-bg-color, #365bb2)) !important; color: var(--pp-font-color, #fff) !important; font-size: 16px !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer !important; } .prayer-pop-messenger .ppm-send-icon { display: block; line-height: 1; transform: translateY(-1px); } .prayer-pop-messenger .ppm-chat-screen .ppm-composer-ctas .ppm-attach-trigger { display: grid !important; place-items: center !important; flex: 0 0 22px !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--pp-label-color, #6b7280) !important; box-shadow: none !important; cursor: pointer !important; outline: none !important; } /* The sizing rule above needs !important to beat the theme resets this widget lands in, and that also beats the plain [hidden] guard further up the file — a tie on specificity that source order decided the wrong way. So the hidden state has to be restated here, at the same weight. Without it the paperclip stayed clickable while attachments were switched off, and the upload it started was correctly refused by the REST route with a 404 the visitor had no way to understand. */ .prayer-pop-messenger .ppm-chat-screen .ppm-composer-ctas .ppm-attach-trigger[hidden] { display: none !important; } .prayer-pop-messenger .ppm-chat-screen .ppm-composer-ctas .ppm-attach-trigger:hover, .prayer-pop-messenger .ppm-chat-screen .ppm-composer-ctas .ppm-attach-trigger:focus-visible { background: rgba(0, 0, 0, 0.06) !important; } .prayer-pop-messenger .ppm-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .prayer-pop-messenger .ppm-message-text + .ppm-attachments { margin-top: 8px; } .prayer-pop-messenger .ppm-attachment-image img { display: block; max-width: 180px; max-height: 180px; border-radius: 12px; cursor: zoom-in; object-fit: cover; } .prayer-pop-messenger .ppm-attachment-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.05); color: inherit; text-decoration: none; max-width: 220px; } .prayer-pop-messenger .ppm-message-visitor .ppm-attachment-file { background: rgba(255, 255, 255, 0.18); } .prayer-pop-messenger .ppm-attachment-file .dashicons { flex: 0 0 auto; font-size: 20px; } .prayer-pop-messenger .ppm-attachment-file-copy { min-width: 0; display: grid; gap: 1px; } .prayer-pop-messenger .ppm-attachment-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .prayer-pop-messenger .ppm-attachment-file-meta { font-size: 11px; opacity: 0.75; } .ppm-lightbox { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.82); padding: 24px; box-sizing: border-box; } .ppm-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .ppm-lightbox-close { position: absolute; top: 18px; right: 22px; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; }