{% if S_CHATBOT_ALLOW %}
{% INCLUDECSS '@dmzx_chatbot/chatbot.css' %}

<div id="dmzx-chatbot-widget-container" style="visibility:hidden;" data-chatbot-username="{CHATBOT_USERNAME}">

<div id="dmzx-chatbot-widget" style="display:none;position:fixed;right:12px;bottom:12px;z-index:10000;width:420px;max-width:calc(100% - 24px);font-family:Arial,Helvetica,sans-serif;">
	<div class="dmzx-chat-shell">
		<div class="dmzx-chat-header">
			<div class="title">{{ lang('DMZX_CHATBOT') }}</div>
			<div class="controls">
				<div id="dmzx-chatbot-greeting-name" style="font-size:12px;color:#e6f5ff;margin-right:6px;">{{ lang('DMZX_CHATBOT_GREETING', CHATBOT_USERNAME) }}</div>
				<button id="dmzx-chatbot-close" title="{{ lang('DMZX_CHATBOT_CLEAR') }}" style="background:transparent;border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;">–</button>
			</div>
		</div>
		<div class="dmzx-chat-body" id="dmzx-chatbot-results" aria-live="polite" role="log">
			<div class="dmzx-chat-row">
				<div class="dmzx-chat-bubble bot" data-initial="1">
					{{ lang('DMZX_CHATBOT_WELCOME', CHATBOT_USERNAME) }}
				</div>
			</div>
		</div>
		<div class="dmzx-chat-footer">
			<div>
				<textarea id="dmzx-chatbot-query" name="query" placeholder="{{ lang('DMZX_CHATBOT_PLACEHOLDER') }}" class="dmzx-chat-input" rows="2" aria-label="{{ lang('DMZX_CHATBOT_PLACEHOLDER') }}"></textarea>
			</div>
			<div class="dmzx-chat-controls">
				<div class="dmzx-chat-suggestions" id="dmzx-chatbot-suggestions">
					<div class="dmzx-chat-suggestion" data-action="compose_pm">{{ lang('DMZX_CHATBOT_SUGGEST_COMPOSE') }}</div>
					<div class="dmzx-chat-suggestion" data-action="faq">{{ lang('DMZX_CHATBOT_SUGGEST_FAQ') }}</div>
					<div class="dmzx-chat-suggestion" data-action="latest">{{ lang('DMZX_CHATBOT_SUGGEST_LATEST') }}</div>
					<div class="dmzx-history-slot" aria-hidden="true"></div>
				</div>
				<div style="flex:1"></div>
				<div style="display:flex;gap:8px;align-items:center">
					<button type="button" id="dmzx-chatbot-clear-conv" class="dmzx-btn dmzx-btn-clear" aria-label="{{ lang('DMZX_CHATBOT_CLEAR') }}">{{ lang('DMZX_CHATBOT_CLEAR') }}</button>
					<button type="button" id="dmzx-chatbot-submit" class="dmzx-btn dmzx-btn-send" aria-label="{{ lang('DMZX_CHATBOT_SEND') }}">{{ lang('DMZX_CHATBOT_SEND') }}</button>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="dmzx-chatbot-minimized" role="button" aria-label="{{ lang('DMZX_CHATBOT') }}" title="{{ lang('DMZX_CHATBOT') }}" tabindex="0" aria-pressed="false">
	<div class="dmzx-min-bg" aria-hidden="true">
		<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
			<g fill="none" fill-rule="evenodd">
				<rect x="3" y="4" width="18" height="12" rx="2" fill="#fff" opacity="0.12"></rect>
				<path d="M7 9a1 1 0 110-2 1 1 0 010 2zm10 0a1 1 0 110-2 1 1 0 010 2z" fill="#fff"></path>
				<rect x="8" y="13" width="8" height="2" rx="1" fill="#fff" opacity="0.9"></rect>
				<rect x="6" y="16" width="12" height="2" rx="1" fill="#fff" opacity="0.9"></rect>
			</g>
		</svg>
	</div>
</div>
</div>

{% INCLUDEJS '@dmzx_chatbot/js/chatbot.js' %}
{% endif %}