/**
 * Bootstrap utility shim for the ThinkBot chat widget.
 *
 * The widget's Angular markup is authored against Bootstrap 5 — its header is
 * `<div class="row mx-0"><div class="col-12 chat-main-header">
 *  <div class="header-content d-flex align-items-center h-100">…`.
 * Bootstrap itself ships inside the widget bundle as
 * `styles.7ec29f48e70f1fcdab64.css`, but every integration in this codebase
 * deliberately leaves that <link> commented out: it is a global Bootstrap
 * build and would restyle the entire page around the widget.
 *
 * Legacy templates never noticed, because they load Bootstrap from the theme
 * anyway. The 2026 header (`header.php`) does not load Bootstrap at all, so on
 * the 2026 homepage `.header-content` fell back to `display:block`, grew to
 * 115px inside the 88px `.chat-main-header`, and pushed the Live Chat /
 * minimise / close row 27px down over the chat body — clipping the "Online"
 * status line.
 *
 * This file supplies only the utilities that widget markup actually uses,
 * every selector scoped to `chat-element` so nothing can leak into the host
 * page. Declarations are copied verbatim from the widget's own Bootstrap
 * 5.0.0 build so the result matches what the vendor designed against.
 *
 * Load it only where Bootstrap is absent. Templates that already pull in a
 * Bootstrap build (header-mattercsa.php, the legacy `thinkpalm` theme) render
 * the widget correctly without it and must not load it twice.
 */

/* Grid — `.row.mx-0 > .col-12.chat-main-header` */
chat-element .row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(var(--bs-gutter-y) * -1);
	margin-right: calc(var(--bs-gutter-x) / -2);
	margin-left: calc(var(--bs-gutter-x) / -2);
}

chat-element .row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) / 2);
	padding-left: calc(var(--bs-gutter-x) / 2);
	margin-top: var(--bs-gutter-y);
}

chat-element .col-12 {
	flex: 0 0 auto;
	width: 100%;
}

/* Display */
chat-element .d-block { display: block !important; }
chat-element .d-flex { display: flex !important; }

/* Flex alignment */
chat-element .align-items-center { align-items: center !important; }

/* Sizing */
chat-element .h-100 { height: 100% !important; }
chat-element .w-100 { width: 100% !important; }

/* Position / float / visibility */
chat-element .position-relative { position: relative !important; }
chat-element .float-right { float: right !important; }
chat-element .visible { visibility: visible !important; }

/* Spacing */
chat-element .m-4 { margin: 1.5rem !important; }
chat-element .mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
chat-element .mb-0 { margin-bottom: 0 !important; }
chat-element .mt-1 { margin-top: .25rem !important; }
chat-element .px-0 { padding-right: 0 !important; padding-left: 0 !important; }
chat-element .px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
chat-element .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }

/* Type / border helpers */
chat-element .small,
chat-element small { font-size: .875em; }
chat-element .border { border: 1px solid #dee2e6 !important; }
chat-element .form-label { margin-bottom: .5rem; }

/*
 * Reboot subset. The widget's own component CSS assumes Bootstrap has already
 * zeroed the UA heading margin — without it the bot name/status block is
 * pushed off-centre inside the fixed-height header.
 */
chat-element h1,
chat-element h2,
chat-element h3,
chat-element h4,
chat-element h5,
chat-element h6 {
	margin-top: 0;
}

/*
 * Narrow-viewport guard.
 *
 * The 88px header has no breakpoint: below ~360px the bot logo, the bot
 * name/status, the Live Chat pill and the window controls no longer fit on one
 * line. `.bot-details` is `flex: 1 1 0` so it is the item that gets squeezed,
 * and because "ThinkBot" is a single unbreakable word the <h3> overflows its
 * parent and paints straight over the Live Chat pill at 320px.
 *
 * Clip the name to the space it actually has instead. No effect at 375px and
 * up, where the <h3> is already narrower than its box.
 *
 * `overflow` is deliberately left visible on the nested <p>: the vendor gives
 * it `line-height: 0`, so a zero-height clipping box would erase "Online"
 * entirely. The <h3>'s own `overflow: hidden` still trims it horizontally.
 */
chat-element .bot-details {
	min-width: 0;
}

chat-element .bot-details h3 {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*
 * …and buy the space back on the smallest phones so the name is not actually
 * truncated. The vendor sizes the header's gaps for a 420px window; below
 * 360px the window is 90vw and those gaps are what pushes the name out. The
 * ellipsis above stays as the backstop if a font swap widens the name further.
 *
 * `!important` is required: these override Angular component styles, whose
 * `[_ngcontent-*]` attribute selectors out-specify any practical plain
 * selector scoped to `chat-element`.
 */
@media only screen and (max-width: 360px) {
	chat-element .bot-details .bot-logo {
		width: 42px !important;
	}

	/* Keep a real gap between the bot name and the Live Chat pill. */
	chat-element .bot-details {
		padding-right: 8px;
	}

	chat-element .bot-details h3 {
		margin-left: 8px !important;
	}

	chat-element .header-content .header-actions {
		margin-right: 4px !important;
	}

	chat-element .header-actions .fa-minus {
		margin-right: 8px !important;
	}

	chat-element .live-chat-btn {
		padding-right: 6px !important;
		padding-left: 6px !important;
	}
}