/* Help chat bot (inc/chatbot.php, assets/js/chatbot.js). Sits under the mobile menu (z-index 190+). */
.chatbot { position: fixed; right: 24px; bottom: 24px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--font); pointer-events: none; }
.chatbot > * { pointer-events: auto; }
.chatbot svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Launcher */
.chatbot__launcher { position: relative; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, #3b7bf6, var(--accent) 60%, var(--accent-ink)); color: #fff; cursor: pointer; box-shadow: 0 10px 28px rgba(31, 91, 216, .42), 0 2px 6px rgba(17, 26, 43, .18); transition: transform .25s var(--ease), box-shadow .25s; }
.chatbot__launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 34px rgba(31, 91, 216, .5), 0 2px 6px rgba(17, 26, 43, .18); }
.chatbot__launcher:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.chatbot__launcher::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: chatbot-ring 2.6s ease-out infinite; }
.chatbot__launcher::after { content: ""; position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #22c55e; }
.chatbot.is-open .chatbot__launcher::before, .chatbot.is-open .chatbot__launcher::after { display: none; }
.chatbot.has-notif .chatbot__launcher { animation: chatbot-nudge .9s var(--ease) 2; }
.chatbot.has-notif .chatbot__launcher::after { content: "1"; top: -3px; right: -3px; display: grid; place-items: center; width: 22px; height: 22px; background: #ef4444; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; }
@keyframes chatbot-nudge { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg) scale(1.06); } 40% { transform: rotate(10deg) scale(1.06); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.chatbot__launcher span { grid-area: 1 / 1; display: grid; transition: transform .25s var(--ease), opacity .2s; }
.chatbot__launcher svg { width: 28px; height: 28px; }
.chatbot__launcher-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.chatbot.is-open .chatbot__launcher-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.chatbot.is-open .chatbot__launcher-close { opacity: 1; transform: none; }
@keyframes chatbot-ring { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.45); opacity: 0; } }

/* Teaser bubble */
.chatbot__teaser { position: relative; max-width: 240px; margin-right: 4px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; background: #fff; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 700; text-align: left; cursor: pointer; box-shadow: var(--sh-lg); animation: chatbot-in .35s var(--ease) both; }
.chatbot__teaser:hover { border-color: var(--accent-2); }

/* Panel */
.chatbot__panel { display: flex; flex-direction: column; width: 370px; max-height: min(600px, calc(100vh - 130px)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: 0 4px 12px rgba(17, 26, 43, .08), 0 30px 70px rgba(17, 26, 43, .2); transform-origin: bottom right; animation: chatbot-in .28s var(--ease) both; }
.chatbot__panel[hidden] { display: none; }
@keyframes chatbot-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

.chatbot__head { display: flex; align-items: center; gap: 12px; padding: 16px 12px 16px 18px; background: linear-gradient(135deg, var(--midnight), var(--blue-dark)); color: #fff; }
.chatbot__avatar { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; }
.chatbot__avatar svg { width: 26px; height: 26px; stroke: none; }
.chatbot__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chatbot__who strong { font-family: var(--serif); font-size: 1rem; font-weight: 800; }
.chatbot__who small { display: flex; align-items: center; gap: 6px; color: #b9c6dd; font-size: .78rem; font-weight: 600; }
.chatbot__who small i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.chatbot__icon-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #cfd8e8; cursor: pointer; transition: background .2s, color .2s; }
.chatbot__icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.chatbot__icon-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.chatbot__icon-btn svg { width: 18px; height: 18px; }
.chatbot__body { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 14px; background: var(--bg); }
.chatbot__log { display: flex; flex-direction: column; gap: 10px; }
.chatbot__msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; animation: chatbot-in .25s var(--ease) both; }
.chatbot__msg--bot { align-self: flex-start; border: 1px solid var(--line); border-bottom-left-radius: 4px; background: #fff; color: var(--text); }
.chatbot__msg--user { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--accent); color: #fff; font-weight: 600; }
.chatbot__msg a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.chatbot__msg ul { margin: 8px 0 0; padding-left: 18px; }
.chatbot__msg li + li { margin-top: 4px; }
.chatbot__typing { display: flex; gap: 4px; padding: 14px 16px; }
.chatbot__typing i { width: 7px; height: 7px; border-radius: 50%; background: #a3adbf; animation: chatbot-dot 1s infinite ease-in-out; }
.chatbot__typing i:nth-child(2) { animation-delay: .15s; }
.chatbot__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatbot-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* "Talk to our team" form */
.chatbot-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 100%; padding: 14px; }
.chatbot-form__row { display: flex; flex-direction: column; gap: 4px; }
.chatbot-form label { color: var(--ink); font-size: .8rem; font-weight: 700; }
.chatbot-form label > span[aria-hidden], .chatbot-form__terms span[aria-hidden] { color: var(--danger); }
.chatbot-form input[type="text"], .chatbot-form input[type="email"], .chatbot-form textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; }
.chatbot-form textarea { min-height: 76px; resize: vertical; }
.chatbot-form input:focus, .chatbot-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chatbot-form [aria-invalid="true"] { border-color: var(--danger) !important; }
.chatbot-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chatbot-form__terms { display: flex; align-items: flex-start; gap: 9px; font-weight: 600 !important; line-height: 1.45; cursor: pointer; }
.chatbot-form__terms input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.chatbot-form__terms input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 1px; }
.chatbot-form__error { margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: #fdecea; color: var(--danger); font-size: .82rem; font-weight: 700; }
.chatbot-form__error[hidden] { display: none; }
.chatbot-form__actions { display: flex; align-items: center; gap: 10px; }
.chatbot .chatbot-form__submit { flex: 1; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--orange); color: #fff; font: inherit; font-size: .92rem; font-weight: 800; cursor: pointer; transition: background .2s; }
.chatbot .chatbot-form__submit:hover { background: var(--orange-2); }
.chatbot .chatbot-form__submit:disabled { opacity: .7; cursor: progress; }
.chatbot-form__cancel { padding: 8px 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.chatbot-form__cancel:hover { color: var(--ink); }

.chatbot__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.chatbot__chips:empty { display: none; }
.chatbot__chip { padding: 7px 12px; border: 1px solid #c9d8f8; border-radius: 999px; background: #fff; color: var(--accent-ink); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.chatbot__chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.chatbot__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chatbot__chip--team { display: inline-flex; align-items: center; gap: 6px; border-color: var(--midnight); background: var(--midnight); color: #fff; }
.chatbot__chip--team:hover { border-color: var(--blue-dark); background: var(--blue-dark); color: #fff; }
.chatbot__chip--team::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }


@media (max-width: 600px) {
	.chatbot { right: 16px; bottom: 16px; }
	.chatbot__launcher { width: 56px; height: 56px; }
	.chatbot.is-open .chatbot__launcher { display: none; }
	.chatbot__panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 88vh; max-height: 88dvh; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; transform-origin: bottom center; }
	.chatbot__teaser { max-width: 210px; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
	.chatbot__launcher::before, .chatbot__typing i, .chatbot.has-notif .chatbot__launcher { animation: none; }
	.chatbot__panel, .chatbot__msg, .chatbot__teaser { animation: none; }
}

@media print { .chatbot { display: none; } }