/* Production overrides kept in sync with src/styles/widget.css.
 * Loaded after widget.min.css so urgent responsive corrections take effect
 * without shipping a second copy of the full widget stylesheet. */
.es-chat-root:not([data-chat360="1"]) .es-chat-tabs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.es-chat-root:not([data-chat360="1"]) .es-chat-tab span {
	min-width: 0;
}

/* Host themes may force white button text with !important. Keep widget
 * controls readable without changing buttons elsewhere on the site. */
.es-chat-root[data-chat360="1"] #es-chat-panel :is(.es360-header-search,.es-chat-tab,.es360-footer-action,.es360-card) {
	color: var(--text, #243044) !important;
}
.es-chat-root[data-chat360="1"] #es-chat-panel .es-chat-iconbtn {
	color: #fff !important;
}

@media (max-width: 360px) {
	.es-chat-root:not([data-chat360="1"]) .es-chat-tab span {
		display: none;
	}

	.es-chat-root:not([data-chat360="1"]) .es-chat-tab::after {
		content: attr(data-short-label);
		font-size: 10px;
		line-height: 1.1;
		white-space: nowrap;
	}

	/* Covers an already-cached widget script which predates data-short-label. */
	.es-chat-root:not([data-chat360="1"]) .es-chat-tab:nth-child(1)::after { content: 'Chat'; }
	.es-chat-root:not([data-chat360="1"]) .es-chat-tab:nth-child(2)::after { content: 'Ticket'; }
	.es-chat-root:not([data-chat360="1"]) .es-chat-tab:nth-child(3)::after { content: 'Docs'; }
}

@media (max-width: 480px) {
	/* A selected large chatbox preset must not override the full-width mobile
	 * rule and push the third tab outside a 320px viewport. */
	.es-chat-root:not([data-chat360="1"])[data-size] .es-chat-panel,
	.es-chat-root:not([data-chat360="1"])[data-pos="bottom-left"] .es-chat-panel {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.es-chat-root:not([data-chat360="1"]) .es-chat-tabs,
	.es-chat-root:not([data-chat360="1"]) .es-chat-tab {
		width: 100%;
		min-width: 0;
	}
}

/* Isolate public widget controls from host-theme button colors and padding.
 * Keep the composer height; recover horizontal space used by oversized buttons. */
.es-chat-root #es-chat-panel :is(.es-chat-attach,.es-chat-chip,.es-chat-doc,.es-chat-cat,.es-chat-back,.es-chat-docs-retry,.es-chat-search__clear),
.es-chat-root #es-chat-panel .es360-more-menu button,
.es-chat-root #es-chat-panel .es-chat-emoji button {
 color: var(--control-ink, var(--es-text, #243044)) !important;
}
.es-chat-root #es-chat-panel .es-chat-composer {
 gap: 6px;
 align-items: center;
}
.es-chat-root #es-chat-panel .es-chat-composer .es-chat-attach {
 display: inline-grid !important;
 place-items: center;
 flex: 0 0 32px !important;
 width: 32px !important;
 min-width: 32px !important;
 max-width: 32px;
 padding: 0 !important;
 margin: 0;
 background: transparent !important;
}
.es-chat-root #es-chat-panel .es-chat-composer textarea {
 flex: 1 1 0% !important;
 width: 0 !important;
 min-width: 0 !important;
 max-width: none;
 margin-inline: 0;
}
.es-chat-root #es-chat-panel .es-chat-composer .es-chat-send {
 display: inline-grid !important;
 place-items: center;
 flex: 0 0 36px !important;
 width: 36px !important;
 min-width: 36px !important;
 max-width: 36px;
 padding-inline: 6px !important;
 color: var(--control-on-ink, #fff) !important;
}
.es-chat-root #es-chat-panel .es-chat-composer button svg {
 display: block !important;
 flex: none;
 width: 18px;
 height: 18px;
 fill: none !important;
 stroke: currentColor !important;
 opacity: 1;
 visibility: visible;
}

/* Filled actions keep the matching foreground in light and dark presets. */
.es-chat-root[data-chat360="1"] #es-chat-panel :is(.es-chat-chip--primary,.es-chat-prev-actions .es-chat-chip) {
 color: var(--control-on-ink, #fff) !important;
}