/*!
 * [ZINN] PBN Chat widget - the whole look of the bubble and the panel.
 * Scoped under #pbn-chat-root so a theme cannot bleed into it and it cannot bleed into a theme.
 * Colours come from CSS variables the script sets from the dashboard's settings.
 * License: GPL-2.0-or-later
 */
#pbn-chat-root {
	--pbn-brand: #2f6fed;
	--pbn-on-brand: #ffffff;
	--pbn-radius: 16px;
	--pbn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#pbn-chat-root *,
#pbn-chat-root *::before,
#pbn-chat-root *::after { box-sizing: border-box; }

#pbn-chat-root .pbn-bubble {
	position: fixed; bottom: 20px; z-index: 2147483000;
	width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--pbn-brand); color: var(--pbn-on-brand);
	box-shadow: 0 6px 22px rgba(20, 30, 60, .28);
	display: flex; align-items: center; justify-content: center; padding: 0;
	transition: transform .15s ease, box-shadow .15s ease;
}
#pbn-chat-root .pbn-bubble:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 30, 60, .32); }
#pbn-chat-root .pbn-bubble:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#pbn-chat-root .pbn-bubble svg { width: 26px; height: 26px; fill: currentColor; flex: 0 0 auto; }
#pbn-chat-root .pbn-right { right: 20px; }
#pbn-chat-root .pbn-left { left: 20px; }
#pbn-chat-root .pbn-dot {
	position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px;
	background: #e2453f; color: #fff; font: 700 12px/20px var(--pbn-font); text-align: center; padding: 0 5px;
}

#pbn-chat-root .pbn-panel {
	position: fixed; bottom: 88px; z-index: 2147483000;
	width: 374px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 120px);
	background: #fff; border-radius: var(--pbn-radius); overflow: hidden;
	box-shadow: 0 18px 50px rgba(20, 30, 60, .26); border: 1px solid #e4e6ee;
	display: flex; flex-direction: column;
	font: 15px/1.5 var(--pbn-font); color: #1d2130;
	animation: pbn-in .16s ease-out;
}
@keyframes pbn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	#pbn-chat-root .pbn-panel { animation: none; }
	#pbn-chat-root .pbn-bubble { transition: none; }
}

#pbn-chat-root .pbn-head { background: var(--pbn-brand); color: var(--pbn-on-brand); padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
#pbn-chat-root .pbn-head h3 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; color: inherit; line-height: 1.3; }
#pbn-chat-root .pbn-head .pbn-sub { display: block; font-size: 12px; font-weight: 400; opacity: .85; }
#pbn-chat-root .pbn-head button { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
#pbn-chat-root .pbn-head button:hover { background: rgba(255, 255, 255, .16); }

#pbn-chat-root .pbn-body { flex: 1; overflow-y: auto; padding: 14px 14px 4px; background: #f7f8fb; -webkit-overflow-scrolling: touch; }
#pbn-chat-root .pbn-msg { margin: 0 0 10px; display: flex; }
#pbn-chat-root .pbn-msg .pbn-b { max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 14.5px; word-wrap: break-word; overflow-wrap: anywhere; }
#pbn-chat-root .pbn-msg.pbn-them { justify-content: flex-start; }
#pbn-chat-root .pbn-msg.pbn-them .pbn-b { background: #fff; border: 1px solid #e4e6ee; border-bottom-left-radius: 4px; }
#pbn-chat-root .pbn-msg.pbn-me { justify-content: flex-end; }
#pbn-chat-root .pbn-msg.pbn-me .pbn-b { background: var(--pbn-brand); color: var(--pbn-on-brand); border-bottom-right-radius: 4px; }
#pbn-chat-root .pbn-msg.pbn-me .pbn-b a { color: inherit; }
#pbn-chat-root .pbn-msg .pbn-who { display: block; font-size: 11px; color: #8a8fa3; margin: 0 4px 3px; }
#pbn-chat-root .pbn-b p { margin: 0 0 8px; }
#pbn-chat-root .pbn-b p:last-child { margin-bottom: 0; }
#pbn-chat-root .pbn-b ol, #pbn-chat-root .pbn-b ul { margin: 6px 0 8px; padding-left: 20px; }
#pbn-chat-root .pbn-b li { margin-bottom: 4px; }
#pbn-chat-root .pbn-b a { color: var(--pbn-brand); text-decoration: underline; }
#pbn-chat-root .pbn-b code { background: rgba(0, 0, 0, .06); border-radius: 4px; padding: 1px 4px; font-size: .92em; }
#pbn-chat-root .pbn-sys { text-align: center; font-size: 12px; color: #9096a8; margin: 8px 0; }

#pbn-chat-root .pbn-typing { display: flex; gap: 4px; padding: 10px 13px; }
#pbn-chat-root .pbn-typing i { width: 7px; height: 7px; border-radius: 50%; background: #b9bfd0; display: block; animation: pbn-bounce 1.1s infinite; }
#pbn-chat-root .pbn-typing i:nth-child(2) { animation-delay: .15s; }
#pbn-chat-root .pbn-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pbn-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }

#pbn-chat-root .pbn-foot { border-top: 1px solid #e9ebf2; background: #fff; padding: 10px 12px 12px; }
#pbn-chat-root .pbn-row { display: flex; gap: 8px; align-items: flex-end; }
#pbn-chat-root .pbn-foot textarea {
	flex: 1; resize: none; border: 1px solid #d5d9e4; border-radius: 12px; padding: 9px 12px;
	font: inherit; font-size: 14.5px; max-height: 110px; min-height: 40px; color: #1d2130; background: #fff;
}
#pbn-chat-root .pbn-foot textarea:focus { outline: 2px solid var(--pbn-brand); outline-offset: -1px; }
#pbn-chat-root .pbn-send { border: 0; background: var(--pbn-brand); color: var(--pbn-on-brand); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
#pbn-chat-root .pbn-send svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }  /* the button is a flex row, so the icon needs flex:0 0 auto or it shrinks to 0 wide */
#pbn-chat-root .pbn-send:disabled { opacity: .45; cursor: default; }
#pbn-chat-root .pbn-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#pbn-chat-root .pbn-chip { border: 1px solid #d5d9e4; background: #fff; border-radius: 14px; padding: 5px 12px; font-size: 13px; cursor: pointer; color: #29304a; font-family: inherit; }
#pbn-chat-root .pbn-chip:hover { border-color: var(--pbn-brand); color: var(--pbn-brand); }
#pbn-chat-root .pbn-note { font-size: 11.5px; color: #8a8fa3; margin: 8px 2px 0; text-align: center; }
#pbn-chat-root .pbn-note a { color: #8a8fa3; }
#pbn-chat-root .pbn-error { background: #fdecec; border: 1px solid #f3c2c2; color: #8f2020; border-radius: 10px; padding: 8px 11px; font-size: 13px; margin: 0 0 8px; }
#pbn-chat-root .pbn-form { display: grid; gap: 8px; }
#pbn-chat-root .pbn-form input, #pbn-chat-root .pbn-form textarea { border: 1px solid #d5d9e4; border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; width: 100%; color: #1d2130; background: #fff; }
#pbn-chat-root .pbn-form button { border: 0; background: var(--pbn-brand); color: var(--pbn-on-brand); border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 600; cursor: pointer; }
#pbn-chat-root .pbn-form button.pbn-ghost { background: #fff; color: #5b6480; border: 1px solid #d5d9e4; font-weight: 500; }
#pbn-chat-root .pbn-consent { font-size: 11.5px; color: #8a8fa3; margin: 0 2px 8px; }
/* [ZINN] 1.1.0 L-chatstaff: who-is-asking step, account code, e-mail me this chat */
#pbn-chat-root [hidden] { display: none !important; }
/* flex, not grid: a theme clearfix (::before/::after with content) becomes a grid ITEM and pushed the two
   options onto separate rows on pbn.ltd (browser test 2026-09-21) */
#pbn-chat-root .pbn-choice { display: flex !important; gap: 6px; }
#pbn-chat-root .pbn-choice::before, #pbn-chat-root .pbn-choice::after { display: none !important; }
#pbn-chat-root .pbn-choice > button { flex: 1 1 0; min-width: 0; width: auto; margin: 0; float: none; }
#pbn-chat-root .pbn-form button.pbn-opt { background: #fff; color: #29304a; border: 1px solid #d5d9e4; font-weight: 500; padding: 9px 8px; font-size: 13px; }
#pbn-chat-root .pbn-form button.pbn-opt.pbn-on { border-color: var(--pbn-brand); box-shadow: inset 0 0 0 1px var(--pbn-brand); color: var(--pbn-brand); font-weight: 700; }
#pbn-chat-root .pbn-ok { background: #eaf7ee; border: 1px solid #bfe3c9; color: #1d5a2e; border-radius: 10px; padding: 8px 11px; font-size: 13px; }
#pbn-chat-root .pbn-form button:disabled { opacity: .6; cursor: default; }

#pbn-chat-root .pbn-inline-open,
.pbn-chat-inline-open { background: #2f6fed; color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 600; cursor: pointer; }

@media (max-width: 480px) {
	#pbn-chat-root .pbn-panel {
		bottom: 0; left: 0; right: 0; top: 0;
		width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: 0;
	}
	#pbn-chat-root .pbn-bubble { bottom: 16px; }
	#pbn-chat-root .pbn-right { right: 16px; }
	#pbn-chat-root .pbn-left { left: 16px; }
}