/*! B4P Messenger 4.0 - two-pane messenger on every screen. Uses BuddyNext's own colour tokens (--bn-*), so light and dark follow your site. */

.b4pm-hide{display:none!important}

/* ================= SHELL (desktop / tablet): list | thread (| info) ================= */
html.b4pm-on .b4pm-shell{
	display:grid!important;
	grid-template-columns:var(--b4pm-list-w,clamp(300px,33%,400px)) minmax(0,1fr) auto!important;
	grid-auto-flow:column;
	height:var(--b4pm-h,640px)!important;
	min-height:0!important;max-height:none!important;
	position:relative;overflow:hidden!important;
	background:var(--bn-surface,#fff);color:var(--bn-ink,#1d2327);
	border:1px solid var(--bn-line,rgba(0,0,0,.12));
	border-radius:var(--bn-r-lg,12px);
	box-shadow:0 0 0 1px rgba(0,0,0,.02),0 6px 20px rgba(0,0,0,.05);
}
html.b4pm-on .b4pm-shell>*{min-width:0!important;min-height:0!important;box-sizing:border-box}

/* conversation list (left) */
html.b4pm-on .b4pm-list{
	display:flex;flex-direction:column;
	height:100%!important;max-height:none!important;width:auto!important;max-width:none!important;
	overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
	border:0!important;border-right:1px solid var(--bn-line,rgba(0,0,0,.12))!important;border-radius:0!important;
	background:var(--bn-surface,#fff);
}
html.b4pm-on .b4pm-list [aria-current="true"],
html.b4pm-on .b4pm-list [aria-selected="true"],
html.b4pm-on .b4pm-list .is-active,
html.b4pm-on .b4pm-list .is-current,
html.b4pm-on .b4pm-list .is-selected{background:var(--bn-accent-soft,rgba(7,143,203,.10));box-shadow:inset 3px 0 0 var(--b4psp-blue,#078FCB)}
html.b4pm-on .b4pm-list li:hover,
html.b4pm-on .b4pm-list [role="option"]:hover{background:var(--bn-sunken,rgba(0,0,0,.04))}

/* thread (right): header + scrolling log + composer pinned */
html.b4pm-on .b4pm-thread{
	display:flex!important;flex-direction:column;
	height:100%!important;max-height:none!important;width:auto!important;max-width:none!important;
	overflow:hidden!important;border:0!important;border-radius:0!important;
	background:var(--bn-surface,#fff);position:relative;
}
html.b4pm-on .b4pm-thread>*{flex:0 0 auto}
html.b4pm-on .b4pm-chain{display:flex!important;flex-direction:column;flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:hidden!important}
html.b4pm-on .b4pm-chain>*{flex:0 0 auto}
html.b4pm-on .b4pm-chain.b4pm-chain>.b4pm-chain,
html.b4pm-on .b4pm-thread>.b4pm-chain{flex:1 1 auto}
html.b4pm-on .b4pm-log{
	flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;
	overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;scrollbar-color:var(--bn-line-strong,rgba(0,0,0,.25)) transparent;
}
html.b4pm-on .b4pm-log::-webkit-scrollbar{width:8px}
html.b4pm-on .b4pm-log::-webkit-scrollbar-thumb{background:var(--bn-line-strong,rgba(0,0,0,.22));border-radius:8px}
html.b4pm-on .b4pm-list::-webkit-scrollbar{width:8px}
html.b4pm-on .b4pm-list::-webkit-scrollbar-thumb{background:var(--bn-line-strong,rgba(0,0,0,.22));border-radius:8px}

/* info panel (shown by BuddyNext when you open conversation details) */
html.b4pm-on .b4pm-info{height:100%!important;overflow-y:auto!important;width:320px;border-left:1px solid var(--bn-line,rgba(0,0,0,.12));background:var(--bn-surface,#fff)}
html.b4pm-medium .b4pm-info,html.b4pm-narrow .b4pm-info{position:absolute!important;top:0;right:0;bottom:0;z-index:6;width:min(360px,100%);box-shadow:-10px 0 30px rgba(0,0,0,.15)}

/* back bar: phones only */
.b4pm-backbar{display:none}
.b4pm-back{display:inline-flex;align-items:center;gap:4px;margin:0;padding:6px 10px 6px 4px;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--b4psp-blue,#078FCB);font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.b4pm-back:active{background:var(--bn-sunken,rgba(0,0,0,.06))}
.b4pm-back:focus-visible{outline:2px solid var(--b4psp-orange,#F58232);outline-offset:2px}

/* ================= PHONE: one pane at a time ================= */
html.b4pm-narrow.b4pm-on .b4pm-shell{display:block!important;border-radius:var(--bn-r-lg,12px)}
html.b4pm-narrow.b4pm-on .b4pm-list,
html.b4pm-narrow.b4pm-on .b4pm-thread{width:100%!important;height:100%!important;border-right:0!important}
html.b4pm-narrow.b4pm-on .b4pm-shell[data-b4pm-view="list"] .b4pm-thread{display:none!important}
html.b4pm-narrow.b4pm-on .b4pm-shell[data-b4pm-view="thread"] .b4pm-list{display:none!important}
html.b4pm-narrow.b4pm-on .b4pm-backbar{display:flex;align-items:center;flex:0 0 auto;padding:2px 8px;border-bottom:1px solid var(--bn-line,rgba(0,0,0,.1));background:var(--bn-surface,#fff)}
html.b4pm-narrow.b4pm-on .b4pm-own-back{display:none!important}

/* open conversation = full-screen sheet, so the composer is never under the bottom menu or the keyboard */
html.b4pm-narrow.b4pm-in-thread .b4pm-shell[data-b4pm-view="thread"]{
	position:fixed!important;left:0;right:0;
	top:calc(var(--b4pm-vt,0px) + var(--b4pm-ab,0px))!important;
	height:calc(var(--b4pm-vh,100dvh) - var(--b4pm-ab,0px))!important;
	z-index:98000;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
	padding-bottom:env(safe-area-inset-bottom,0px);
}
html.b4pm-lock,html.b4pm-lock body{overflow:hidden!important;overscroll-behavior:none}
html.b4pm-lock .b4psp-top{display:none!important}

/* larger touch targets + no iOS zoom on the composer */
@media (pointer:coarse){
	html.b4pm-on .b4pm-thread textarea,html.b4pm-on .b4pm-thread [contenteditable],html.b4pm-on .b4pm-list input{font-size:16px}
	html.b4pm-on .b4pm-list li,html.b4pm-on .b4pm-list [role="option"]{min-height:56px}
}

/* slide between panes */
@media (prefers-reduced-motion:no-preference){
	@keyframes b4pm-in-r{from{opacity:.0;transform:translateX(22px)}to{opacity:1;transform:none}}
	@keyframes b4pm-in-l{from{opacity:.0;transform:translateX(-22px)}to{opacity:1;transform:none}}
	html.b4pm-narrow.b4pm-on .b4pm-shell[data-b4pm-view="thread"] .b4pm-thread{animation:b4pm-in-r .2s ease}
	html.b4pm-narrow.b4pm-on .b4pm-shell[data-b4pm-view="list"] .b4pm-list{animation:b4pm-in-l .2s ease}
}

/* ================= debug outlines (?b4pm_debug=1, admins) ================= */
html.b4pm-debug .b4pm-shell{outline:3px solid #078FCB!important;outline-offset:-3px}
html.b4pm-debug .b4pm-list{outline:3px solid #1f9d55!important;outline-offset:-3px}
html.b4pm-debug .b4pm-thread{outline:3px solid #F58232!important;outline-offset:-3px}
html.b4pm-debug .b4pm-log{outline:2px dashed #c026d3!important;outline-offset:-2px}
html.b4pm-debug .b4pm-info{outline:3px solid #7c3aed!important;outline-offset:-3px}

.b4pm-badge{position:fixed;left:10px;bottom:10px;z-index:2147483000;max-width:min(92vw,420px);padding:8px 12px;border-radius:10px;background:#142B3B;color:#fff;font:600 12px/1.35 system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.b4pm-badge[data-s="ok"]{background:#1f9d55}.b4pm-badge[data-s="bad"]{background:#c0262d}