/* Host adaptation measured against dn.xj8008.cc and sj.xj8008.cc.
 * Standalone navigation/dialog alignment and user-requested frame removal.
 * Do not target calls, message attachments, or media controls. */
body.support-page .agent-management-dialog {
	--color-primary: #1677ff;
	--color-primary-light: #e6f4ff;
	--color-primary-text: #fff;
	--color-primary-element: #1677ff;
	--color-main-text: #000000e0;
	--color-border: #f0f0f0;
	--border-width-input-focused: 1px;
}

/* Settings tabs use the reference's simple text hover. Keep the selected
 * underline, without painting a blue box across the tab. */
body.support-page .agent-settings-tabs button:not(.active):hover {
	background: transparent !important;
	color: #1677ff;
	border-bottom-color: transparent;
	box-shadow: none !important;
}
body.support-page .agent-settings-tabs button:not(.active):hover .button-vue__icon,
body.support-page .agent-settings-tabs button:not(.active):hover .button-vue__text {
	color: #1677ff;
}
body.support-page .agent-management-dialog .agent-settings-tabs button.active:hover {
	background: #fff !important;
	box-shadow: none !important;
}
body.support-page .agent-details-tabs .button-vue:not(.active):hover {
	background: #f5faff;
	color: #1890ff;
}
body.support-page .agent-details-tabs .button-vue:not(.active):hover .button-vue__icon,
body.support-page .agent-details-tabs .button-vue:not(.active):hover .button-vue__text {
	color: #1890ff;
}
body.support-page .agent-navigation .agent-nav-item:not(.active):hover,
body.support-page .agent-navigation .agent-nav-item:not(.active):focus-visible {
	background: #292929;
	color: #fff;
	box-shadow: none;
}
body.support-page .agent-navigation .agent-nav-item:not(.active):hover .button-vue__icon,
body.support-page .agent-navigation .agent-nav-item:not(.active):hover .button-vue__text,
body.support-page .agent-navigation .agent-nav-item:not(.active):focus-visible .button-vue__icon,
body.support-page .agent-navigation .agent-nav-item:not(.active):focus-visible .button-vue__text {
	color: #fff;
}
body.support-page .agent-navigation .agent-nav-item:not(.active):focus:not(:focus-visible):not(:hover) {
	background: transparent;
}
body.support-page .agent-navigation .agent-nav-item:not(.active):hover .button-vue__wrapper,
body.support-page .agent-navigation .agent-nav-item:not(.active):focus-visible .button-vue__wrapper {
	background: #292929;
}
body.support-page .agent-navigation .agent-nav-item:not(.active):hover,
body.support-page .agent-navigation .agent-nav-item:not(.active):hover .button-vue__wrapper {
	--color-background-hover: #292929;
}
body.support-page .agent-navigation .agent-nav-item:not(.active) .button-vue__wrapper {
	transition: background-color .12s ease;
}

/* The history search input has a flexible sibling button. Give it a real
 * intrinsic starting width so long CJK placeholders remain visible. */
body.support-page .support-app.is-agent .agent-history-search {
	width: 100%;
	box-sizing: border-box;
	gap: 2px;
	padding-right: 8px;
	padding-left: 8px;
}
body.support-page .support-app.is-agent .agent-history-search input {
	flex: 1 1 0%;
	width: 0;
	min-width: 0;
	padding-right: 2px;
	padding-left: 2px;
	font-size: 14px;
	text-overflow: ellipsis;
}
body.support-page .support-app.is-agent .agent-history-search button {
	flex: 0 0 auto;
	padding-right: 4px;
	padding-left: 4px;
}
body.support-page .support-app.is-agent .agent-history-search input::placeholder {
	font-size: 14px;
	letter-spacing: 0;
}

/* The reference uses a compact static emoji grid, seven icons across, without
 * EmojiMart's search/category chrome. Keep the original picker and its event
 * handling, but match the visible emoji grid and popover geometry. */
body.support-page .nc-emoji-picker-container .emoji-mart {
	box-sizing: border-box;
	width: 342px !important;
	height: 420px !important;
	min-height: 0 !important;
	max-height: calc(100vh - 32px);
	padding: 8px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: 0 2px 8px #00000026;
}
body.support-page .nc-emoji-picker-container .emoji-mart-bar-anchors,
body.support-page .nc-emoji-picker-container .emoji-mart-category-label,
body.support-page .nc-emoji-picker-container .emoji-mart-search,
body.support-page .nc-emoji-picker-container .emoji-mart-search-icon,
body.support-page .nc-emoji-picker-container .emoji-mart-preview {
	display: none !important;
}
body.support-page .nc-emoji-picker-container .emoji-mart-category-label * {
	display: none !important;
}
body.support-page .nc-emoji-picker-container .emoji-mart-scroll {
	width: 100%;
	height: 404px !important;
	max-height: 404px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow-y: auto !important;
}
body.support-page .nc-emoji-picker-container .emoji-mart-category {
	display: block;
}
body.support-page .nc-emoji-picker-container .emoji-mart-category .emoji-mart-emoji {
	display: inline-block !important;
	vertical-align: top;
}
body.support-page .nc-emoji-picker-container .emoji-mart-emoji {
	width: 39px !important;
	height: 39px !important;
	margin: 0 !important;
	padding: 6px !important;
	border-radius: 50%;
}

/* Match the compact reference audit window. The generic management dialog
 * uses a flexible 70vh body; the audit view is a fixed-height table. */
@media (min-width: 701px) {
	body.support-page .agent-audit-dialog .modal-wrapper--large .modal-container {
		width: min(1100px, calc(100vw - 48px));
		height: 433.333px !important;
		min-height: 433.333px !important;
		max-height: min(433.333px, calc(100vh - 48px)) !important;
		padding: 20px 24px !important;
		overflow: hidden;
	}
	body.support-page .dialog__modal.agent-audit-dialog .modal-container__content { height: 100%; min-height: 0; }
	body.support-page .dialog__modal.agent-audit-dialog .agent-management-content,
	body.support-page .dialog__modal.agent-audit-dialog .agent-audit-content {
		width: 100%;
		height: 361.333px !important;
		min-height: 0 !important;
		padding: 0;
		overflow: hidden;
	}
	body.support-page .dialog__modal.agent-audit-dialog .agent-table-scroll { height: 252px; max-height: 252px; overflow: auto; }
}

/* Native select focus in the audit toolbar should use the same thin blue
 * focus treatment as the reference, never the browser's thick black ring. */
body.support-page .agent-audit-dialog .agent-audit-controls > select {
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	outline: none;
	box-shadow: none;
}
body.support-page .agent-audit-dialog .agent-audit-controls > select:focus {
	border-color: #1677ff;
	box-shadow: 0 0 0 2px #0591ff1a;
}
body.support-page .agent-audit-dialog .agent-audit-controls > select:focus-visible {
	outline: none;
}

/* NcModal's scrollbar compensation assumes the Nextcloud shell reset.
 * Explicit border-box geometry restores the reference's 24px body inset. */
@media (min-width: 701px) {
	body.support-page .dialog__modal.agent-management-dialog:not(.agent-copy-dialog) .modal-wrapper .modal-container {
		box-sizing: border-box;
		padding: 20px 24px !important;
		max-width: calc(100vw - 32px);
		box-shadow: 0 6px 16px #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
	}
	body.support-page .agent-management-dialog .modal-container__content { min-width: 0; }
	body.support-page .agent-management-dialog .dialog__content { min-width: 0; }
	body.support-page .agent-management-dialog .modal-container__close { top: 12px; right: 12px; }
	body.support-page .agent-navigation { overflow: hidden; scrollbar-width: none; }
	body.support-page .agent-navigation-items { flex: 1 1 0%; min-height: 0; overflow-y: auto; scrollbar-width: none; }
	body.support-page .agent-navigation .agent-nav-item {
		flex: 0 1 50px;
		min-height: 34px;
		height: 50px;
		width: 100%;
		padding: 0 14px;
	}
	body.support-page .agent-navigation .agent-nav-item.active { padding-left: 11px; }
	body.support-page .agent-navigation .agent-nav-item .button-vue__wrapper { gap: 14px; }
	body.support-page .agent-navigation .agent-nav-item .button-vue__icon { width: 22px; min-width: 22px; }
	body.support-page .agent-navigation .agent-nav-item .agent-reference-icon { width: 22px; height: 22px; }
	body.support-page .agent-navigation .agent-nav-item .button-vue__text { padding: 0; }
	body.support-page .agent-navigation-footer { margin-top: auto; flex: 0 0 auto; padding: 8px 0 10px; gap: 4px; }
	body.support-page .agent-navigation-footer>span { line-height: 16px; }
	body.support-page .agent-navigation-footer button { min-height: 40px; height: 40px; }
	body.support-page .agent-template-welcome .agent-editor-tabs button {
		padding: 8px 16px;
		min-width: 110px;
		border: 0;
		border-bottom: 2px solid transparent;
		outline: none;
		box-shadow: none;
		background: transparent;
		color: #000000e0;
	}
	body.support-page .agent-template-welcome .agent-editor-tabs button.button-vue--primary {
		border-bottom-color: #1677ff;
		color: #1677ff;
		background: transparent;
		outline: none;
		box-shadow: none;
	}
	body.support-page .agent-template-quick .agent-template-items { padding-right: 4px; }
	body.support-page .agent-welcome-dialog .modal-container { min-height: 500px; }
	body.support-page .agent-access-dialog .modal-wrapper { padding-top: 100px; }
	body.support-page .agent-access-dialog .modal-wrapper .modal-container {
		width: min(1400px, calc(100vw - 32px));
		height: 472px;
		min-height: 472px;
	}
	body.support-page .agent-access-dialog .agent-access-description { min-width: 0; }
	body.support-page .agent-access-dialog .agent-access-toolbar { flex-wrap: nowrap; }
	body.support-page :is(.agent-access-list-dialog, .agent-rule-editor-dialog, .agent-white-editor-dialog) .modal-wrapper { padding-top: 100px; }
	body.support-page .dialog__modal.agent-template-dialog textarea { resize: vertical; }
}

/* Sizes and offsets measured at the same 1280x720 viewport. Include the
 * dialog root so lazy-loaded component styles cannot override these fixes. */
@media (min-width: 701px) {
	body.support-page .dialog__modal.agent-qr-dialog .modal-wrapper { padding: 6px 0; }
	body.support-page .dialog__modal.agent-qr-dialog .modal-wrapper .modal-container { max-height: calc(100vh - 12px); }
	body.support-page .dialog__modal.agent-qr-dialog .modal-container__content { max-height: calc(100vh - 52px); }
	body.support-page .dialog__modal.agent-qr-dialog .dialog__content {
		overflow: auto;
		scrollbar-width: none;
	}
	body.support-page .dialog__modal.agent-qr-dialog .dialog__content::-webkit-scrollbar { display: none; }
	body.support-page .dialog__modal.agent-qr-dialog .agent-qr-tabs button { min-width: 0; padding: 0; }
	body.support-page .dialog__modal.agent-qr-dialog .agent-qr-image:not(.agent-qr-editable-card img) { border: 1px solid #f5f5f5; border-radius: 8px; }
	body.support-page .support-app.is-agent .visitors .empty-list { margin: 0; padding: 48px 16px; border: 0; }
	body.support-page .support-app.is-agent .chat>.empty { color: #000000e0; font-size: 14px; gap: 24px; }
	body.support-page .support-app.is-agent .chat>.empty>.agent-reference-icon { color: #bfbfbf; }
	body.support-page .support-app.is-agent .chat>.empty p { margin: 0; }
	body.support-page .dialog__modal.agent-quick-dialog .agent-template-summary { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
	body.support-page .dialog__modal.agent-quick-dialog .agent-data-table tbody tr:not(.agent-template-empty-row) { height: 56px; }
	body.support-page .dialog__modal.agent-quick-dialog .agent-data-table tbody td { padding: 12px 16px; }
	body.support-page .dialog__modal.agent-template-quick .agent-template-item>select { appearance: none; padding-left: 29px; padding-right: 28px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%238c8c8c' d='m3 5 4 4 4-4'/%3E%3C/svg%3E") right 9px center / 14px 14px no-repeat; }
	body.support-page .dialog__modal.agent-template-quick .agent-template-item { position: relative; }
	body.support-page .dialog__modal:is(.agent-access-dialog,.agent-access-list-dialog,.agent-rule-editor-dialog,.agent-white-editor-dialog,.agent-announcement-dialog) .modal-wrapper { padding-top: 100px; align-items: flex-start; }
	body.support-page .dialog__modal.agent-access-dialog .modal-wrapper.modal-wrapper--large .modal-container { width: min(1400px, calc(100vw - 32px)); min-height: 472px; height: auto; }
	body.support-page .dialog__modal.agent-access-list-dialog .modal-wrapper .modal-container { width: min(1000px, calc(100vw - 32px)); }
	body.support-page .dialog__modal.agent-announcement-dialog .agent-dialog-actions { margin-right: -24px; }
	body.support-page .dialog__modal.agent-announcement-dialog .agent-dialog-actions button:last-child { min-width: 74px; }
	body.support-page .dialog__modal.agent-announcement-dialog textarea { resize: vertical; }
	body.support-page .dialog__modal.agent-rule-editor-dialog .agent-rule-added { font-size: 12px; line-height: 20px; color: #ff4d4f; background: #fff1f0; border: 1px solid #ffccc7; border-radius: 4px; padding: 0 5px; margin-left: 8px; }
}

/* Table switches use the reference's 44x22 geometry without replacing
 * their existing reactive state, permissions or click handlers. */
body.support-page .dialog__modal:is(.agent-welcome-dialog,.agent-quick-dialog) .checkbox-radio-switch { min-height: 22px; height: 22px; }
body.support-page .dialog__modal:is(.agent-welcome-dialog,.agent-quick-dialog) .checkbox-radio-switch__input { width: 44px; height: 22px; }
body.support-page .dialog__modal:is(.agent-welcome-dialog,.agent-quick-dialog) .checkbox-content { height: 22px; min-height: 22px; width: 44px; min-width: 44px; padding: 0; border-radius: 11px; background: #00000040; position: relative; }
body.support-page .dialog__modal:is(.agent-welcome-dialog,.agent-quick-dialog) .checkbox-radio-switch--checked .checkbox-content { background: #1677ff; }
body.support-page .dialog__modal:is(.agent-welcome-dialog,.agent-quick-dialog) .checkbox-content__icon { display: none; }
body.support-page .dialog__modal:is(.agent-welcome-dialog,.agent-quick-dialog) .checkbox-content::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px #00230b33; transition: transform .2s; }
body.support-page .dialog__modal:is(.agent-welcome-dialog,.agent-quick-dialog) .checkbox-radio-switch--checked .checkbox-content::after { transform: translateX(22px); }
body.support-page .dialog__modal.agent-white-editor-dialog .agent-field-error { margin: 0; color: #ff4d4f; font-size: 14px; line-height: 22px; }
body.support-page .dialog__modal.agent-white-editor-dialog .reference-field-invalid input { border-color: #ff4d4f; }

body.support-page .dialog__modal.agent-visit-dialog .modal-wrapper { align-items: flex-start; padding-top: 100px; }
body.support-page .dialog__modal.agent-visit-dialog .modal-wrapper .modal-container { width: 520px; }
body.support-page .dialog__modal.agent-visit-dialog .dialog__name { margin-bottom: 8px; }
body.support-page .dialog__modal.agent-visit-dialog .agent-management-content { padding: 0; }
.agent-visit-date { display: flex; align-items: center; justify-content: space-between; padding: 16px; min-height: 80px; box-sizing: border-box; border: 1px solid #f0f0f0; border-radius: 8px; background: #f7f8fa; }
.agent-visit-date>div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.agent-visit-date strong { font-size: 18px; font-weight: 600; }
.agent-visit-today { color: #1677ff; background: #e6f4ff; font-size: 12px; line-height: 22px; padding: 0 7px; border-radius: 4px; }
body.support-page .dialog__modal.agent-visit-dialog .agent-visit-date>div button { color: #1677ff; min-height: 22px; height: 22px; padding: 0 7px; font-size: 12px; }
.agent-visit-totals { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; border: 1px solid #e7eaf0; border-radius: 8px; background: linear-gradient(120deg,#f0f5ff,#fafbfc); padding: 20px 16px; }
.agent-visit-totals>div { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.agent-visit-totals>div:first-child { border-right: 1px solid #d9d9d9; }
.agent-visit-totals span { color: #00000073; font-size: 13px; line-height: 20px; }
.agent-visit-totals strong { font-size: 30px; line-height: 38px; color: #1677ff; font-weight: 600; }
.agent-visit-devices-title { font-size: 13px; line-height: 18px; margin: 24px 0 12px; padding-left: 10px; position: relative; font-weight: 600; color: #595959; }
.agent-visit-devices-title::before { content: ''; position: absolute; left: 0; top: 3px; width: 3px; height: 12px; background: #1677ff; border-radius: 2px; }
.agent-visit-devices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.agent-visit-devices>div { display: flex; align-items: center; justify-content: space-between; border: 1px solid #f0f0f0; border-radius: 6px; padding: 12px; min-height: 46px; box-sizing: border-box; background: #fafafa; font-size: 13px; color: #595959; }
.agent-visit-devices strong { font-size: 14px; color: #262626; }
.agent-visit-dialog .agent-dialog-actions { margin-top: 16px; }

/* Ant tabs have a bottom indicator, never an all-around primary outline.
 * Mouse focus stays unobtrusive; keyboard focus remains visible. */
body.support-page .agent-management-dialog .button-vue:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}
body.support-page .agent-management-dialog .button-vue:focus-visible {
	outline: 1px solid #91caff;
	outline-offset: 2px;
	box-shadow: none;
}
body.support-page .agent-management-dialog .input-field:focus-within { outline: none; }
body.support-page .agent-management-dialog .checkbox-content__text { font-weight: 400; }
body.support-page .agent-management-dialog .agent-form-error { overflow-wrap: anywhere; }

/* Reference settings: natural body height, capped at 70% of the viewport. */
@media (min-width: 701px) {
	body.support-page .dialog__modal.agent-settings-dialog .modal-wrapper { padding: 100px 0 24px; align-items: flex-start; overflow-y: auto; }
	body.support-page .dialog__modal.agent-settings-dialog .modal-wrapper .modal-container,
	body.support-page .dialog__modal.agent-settings-dialog .modal-wrapper .modal-container:has(.agent-profile-card) { height: auto; min-height: 0; max-height: none; overflow: visible; }
	body.support-page .dialog__modal.agent-settings-dialog .modal-container__content { max-height: none; overflow: visible; }
	body.support-page .dialog__modal.agent-settings-dialog .agent-settings-scroll { max-height: 70vh; overflow-y: auto; }
	body.support-page .dialog__modal.agent-settings-dialog .agent-settings-footer { margin-top: 12px; }
}
body.support-page .agent-account-table dd { min-width: 0; }
body.support-page .agent-account-table dd>span { overflow-wrap: anywhere; min-width: 0; }
body.support-page .agent-account-table .agent-account-card-text { flex: 1; }
body.support-page .agent-account-table dd>button { flex-shrink: 0; }

/* Icon choices share the same handlers as the original native select. */
body.support-page .agent-content-type { box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 180px; height: 32px; min-height: 32px; padding: 4px 11px; margin: 12px 0 10px; border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; color: #000000e0; font: inherit; font-size: 14px; cursor: pointer; }
body.support-page .agent-content-type:focus { outline: none; border-color: #4096ff; box-shadow: 0 0 0 2px #0591ff1a; }
body.support-page .agent-content-type:disabled { cursor: not-allowed; opacity: .5; }
body.support-page .agent-content-type-arrow { margin-left: auto; color: #00000040; }
body.support-page .agent-content-type-menu { position: fixed; box-sizing: border-box; z-index: 100000; padding: 4px; border-radius: 8px; background: #fff; color: #000000e0; box-shadow: 0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d; font-size: 14px; }
body.support-page .agent-content-type-menu>[role=option] { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px; box-sizing: border-box; border-radius: 4px; cursor: pointer; }
body.support-page .agent-content-type-menu>[role=option].active { background: #0000000a; }
body.support-page .agent-content-type-menu>[role=option].selected { background: #e6f4ff; font-weight: 600; }

body.support-page .agent-template-quick .agent-template-editor>.input-field .input-field__input,
body.support-page .agent-template-quick .agent-template-item textarea { border-radius: 4px; }
body.support-page .agent-template-quick .agent-content-type { padding: 0 11px; }

body.support-page .agent-rule-keywords .checkbox-content { background: transparent !important; }
body.support-page .agent-rule-keywords .checkbox-content__icon { box-sizing: border-box; position: relative; border: 1px solid #f0f0f0; border-radius: 4px; color: #fff; background: #fff; }
body.support-page .agent-rule-keywords .checkbox-content__icon svg { display: none; }
body.support-page .agent-rule-keywords .checkbox-radio-switch--checked .checkbox-content__icon { background: #1677ff; border-color: #1677ff; }
body.support-page .agent-rule-keywords .checkbox-radio-switch--checked .checkbox-content__icon::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.support-page .agent-rule-keywords .checkbox-radio-switch:focus-within .checkbox-content__icon { border-color: #1677ff; }
body.support-page .agent-rule-keywords .checkbox-radio-switch--disabled .checkbox-content__icon { background: #f5f5f5; border-color: #d9d9d9; }
body.support-page .agent-rule-notice { position: fixed; z-index: 100001; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: #fff; box-shadow: 0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d; font-size: 14px; line-height: 22px; color: #000000e0; }

/* Chat surfaces and the text editor have no extra enclosing frame, including
 * NcTextArea's wrapper/focus states. Keep small form fields and separators. */
body.support-page .support-app :is(.workspace, .chat, .messages, .compose-row, .textarea, .textarea__main-wrapper, .visitor-compose-input),
body.support-page .support-app textarea.support-message-input,
body.support-page .support-app .visitor-compose-input textarea {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}
body.support-page .support-app :is(.composer, .visitor-composer) {
	border-inline: 0;
	border-bottom: 0;
	outline: none !important;
	box-shadow: none !important;
}
body.support-page .support-app :is(.visitor-row, .agent-nav-item):focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Match the reference image-code manager: a wide, centered dialog whose
 * table uses the available width instead of the narrow 800px host default. */
@media (min-width: 701px) {
	body.support-page .dialog__modal.agent-image-codes-dialog .modal-wrapper {
		align-items: center;
		justify-content: center;
		padding: 8px 0;
		box-sizing: border-box;
	}
	body.support-page .dialog__modal.agent-image-codes-dialog .modal-wrapper .modal-container {
		box-sizing: border-box;
		width: min(1200px, calc(100vw - 22px));
		max-width: calc(100vw - 22px);
		margin: 0 auto;
	}
	body.support-page .agent-image-codes-dialog .agent-image-codes-content {
		width: 100%;
		box-sizing: border-box;
	}
}

/* The channel number is already shown by the main QR metadata row. Avoid
 * rendering the compatibility channel badge a second time. The service card
 * itself carries its platform footer. */
body.support-page .agent-qr-dialog .agent-qr-number-row > .agent-qr-number { display: none; }

/* Keep the blue domain label centered in the QR card after the compatibility
 * channel badge is hidden.  The flex wrapper also centers it when the mobile
 * validity hint is appended. */
body.support-page .agent-qr-dialog .agent-qr-number-row {
	display: flex;
	justify-content: center;
	width: 100%;
}
body.support-page .agent-qr-dialog .agent-qr-number-row .agent-qr-url {
	box-sizing: border-box;
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	text-align: center;
}

/* The invalid QR state follows the reference alert while keeping the QR card and actions visible. */
body.support-page .agent-qr-invalid-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
	padding: 20px 24px;
	background: #fff1f0;
	color: #333;
}
body.support-page .agent-qr-invalid-icon {
	display: inline-flex;
	flex: 0 0 24px;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 50%;
	background: #ff4d4f;
	color: #fff;
	font: 20px/24px Arial, sans-serif;
}
body.support-page .agent-qr-invalid-copy { min-width: 0; }
body.support-page .agent-qr-invalid-copy strong {
	display: block;
	margin: 0 0 12px;
	color: #333;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
body.support-page .agent-qr-invalid-copy p {
	margin: 0;
	color: #333;
	font-size: 16px;
	line-height: 24px;
}

@media (max-width: 700px) {
	body.support-page .agent-qr-invalid-alert { gap: 10px; margin: 0 12px 10px; padding: 16px; }
	body.support-page .agent-qr-invalid-icon { flex-basis: 24px; width: 24px; height: 24px; }
	body.support-page .agent-qr-invalid-copy strong { margin-bottom: 8px; font-size: 16px; line-height: 24px; }
	body.support-page .agent-qr-invalid-copy p { font-size: 16px; line-height: 24px; }
	body.support-page .support-app.is-agent .visitors :is(.agent-mobile-heading,.search-box) { display: none; }
	body.support-page .support-app.is-agent .visitors .list-filters { padding: 0; gap: 0; height: 42px; min-height: 42px; flex-basis: 42px; background: #f5f5f5; border-bottom: 1px solid #e8e8e8; }
	body.support-page .support-app.is-agent .visitors .list-filters button { flex: 1; height: 41px; min-height: 41px; border-radius: 0; font-size: 16px; padding: 0; background: transparent; position: relative; }
	body.support-page .support-app.is-agent .visitors .list-filters button.selected { color: #1677ff; }
	body.support-page .support-app.is-agent .visitors .list-filters button.selected::after { content: ''; width: 34px; height: 2px; position: absolute; bottom: 0; left: calc(50% - 17px); background: #1677ff; }
	body.support-page .support-app.is-agent .visitors .list-filters .agent-mobile-manage { flex: 0 0 76px; border-left: 1px solid #e8e8e8; color: #666; font-size: 13px; }
	body.support-page .support-app.is-agent .visitors .agent-mobile-manage .button-vue__wrapper { gap: 3px; }
	body.support-page .support-app.is-agent .visitors .empty-list { padding: 56px 16px 50px; margin: 0; color: #999; font-size: 14px; line-height: 20px; border-bottom: 1px solid #fafafa; }
	body.support-page .support-app.is-agent .visitors .empty-list svg { display: none; }
	body.support-page .support-app.is-agent .agent-mobile-navigation { height: 50px; }
	body.support-page .support-app.is-agent .agent-mobile-navigation button { height: 49px; min-height: 49px; font-size: 10px; }
	body.support-page .support-app.is-agent .workspace>.visitors { padding-bottom: 50px; }
	body.support-page .dialog__modal.agent-template-dialog .modal-container__content>.dialog__name { text-align: center !important; }
	body.support-page .agent-mobile-template-row.is-quick { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; position: relative; }
	body.support-page .agent-mobile-template-row.is-quick .agent-mobile-template-copy { width: 100%; padding-right: 16px; }
	body.support-page .agent-mobile-template-row.is-quick .agent-mobile-template-copy>b { font-size: 14px; font-weight: 400; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
	body.support-page .agent-mobile-template-types { display: flex; gap: 4px; flex-wrap: wrap; white-space: normal; }
	body.support-page .agent-mobile-template-types small { font-size: 12px; color: #666; background: #f5f5f5; padding: 0 4px; border-radius: 4px; line-height: 20px; }
	body.support-page .agent-mobile-template-row.is-quick .agent-mobile-template-actions { width: auto; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
	body.support-page .agent-mobile-template-row.is-quick .agent-mobile-template-drag { position: absolute; top: 58px; right: 2px; width: 20px; min-width: 20px; height: 24px; min-height: 24px; padding: 0; background: transparent; border: 0; color: #bbb; touch-action: none; cursor: grab; }
	body.support-page .agent-mobile-template-row.is-dragging { background: #f0f5ff; }
	body.support-page .agent-mobile-template-actions .checkbox-radio-switch { min-height: 32px; height: 32px; }
	body.support-page .agent-mobile-template-actions .checkbox-radio-switch__input { width: 44px; height: 26px; }
	body.support-page .agent-mobile-template-actions .checkbox-content { width: 44px; min-width: 44px; height: 26px; min-height: 26px; padding: 0; border-radius: 13px; background: #ddd; position: relative; }
	body.support-page .agent-mobile-template-actions .checkbox-radio-switch--checked .checkbox-content { background: #1677ff; }
	body.support-page .agent-mobile-template-actions .checkbox-content__icon { display: none; }
	body.support-page .agent-mobile-template-actions .checkbox-content::after { content: ''; width: 22px; height: 22px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 2px #0002; }
	body.support-page .agent-mobile-template-actions .checkbox-radio-switch--checked .checkbox-content::after { transform: translateX(18px); }
	body.support-page .support-app.is-agent .agent-mobile-template-actions button { border-color: #e8e8e8; color: #595959; min-height: 32px; height: 32px; font-size: 14px; }
	body.support-page .support-app.is-agent .agent-mobile-template-actions button:last-child { background: #ff2648; color: #fff; border-color: #ff2648; }
	body.support-page .dialog__modal.agent-template-welcome .agent-mobile-welcome-type .checkbox-radio-switch { width: auto; min-width: 0; flex: 0 0 auto; }
	body.support-page .dialog__modal.agent-template-welcome .agent-mobile-welcome-type .checkbox-content { gap: 8px; padding: 0 0 0 5px; }
	body.support-page .dialog__modal.agent-template-welcome .agent-mobile-welcome-type .checkbox-content__icon { position: relative; width: 14px; min-width: 14px; height: 14px; border: 1px solid #999; border-radius: 50%; box-sizing: border-box; }
	body.support-page .dialog__modal.agent-template-welcome .agent-mobile-welcome-type .checkbox-content__icon svg { display: none; }
	body.support-page .dialog__modal.agent-template-welcome .agent-mobile-welcome-type .checkbox-radio-switch--checked .checkbox-content__icon { border-color: #1677ff; }
	body.support-page .dialog__modal.agent-template-welcome .agent-mobile-welcome-type .checkbox-radio-switch--checked .checkbox-content__icon::after { content: ''; position: absolute; width: 6px; height: 6px; top: 3px; left: 3px; border-radius: 50%; background: #1677ff; }
	body.support-page .dialog__modal.agent-template-welcome .agent-mobile-welcome-type .checkbox-content__text { white-space: nowrap; }
	body.support-page .dialog__modal.agent-template-welcome .agent-mobile-welcome-type .checkbox-radio-switch__input { width: 100%; }
	body.support-page .agent-mobile-contact-batch { display: flex; align-items: center; flex-shrink: 0; height: 40px; padding: 0 16px; border-bottom: 1px solid #e8e8e8; background: #fafafa; color: #999; font-size: 13px; }
	body.support-page .agent-mobile-contact-batch>span { flex: 1; }
	body.support-page .agent-mobile-contact-batch button { font-size: 14px; min-height: 32px; height: 32px; padding: 0 8px; color: #1677ff; }
	body.support-page .agent-mobile-contact-batch button:disabled { color: #ddd; }
	body.support-page .dialog__modal.agent-management-dialog .modal-container {
		box-sizing: border-box;
		padding-inline: 0 !important;
		max-width: calc(100vw - 32px);
	}
	body.support-page .agent-management-dialog .modal-container__content { min-width: 0; }
	body.support-page .agent-template-dialog .agent-template-editor { min-width: 0; }
	body.support-page .agent-mobile-page-content { overscroll-behavior: contain; }
	body.support-page .agent-mobile-page .agent-management-content { min-width: 0; }
}