/* BOOM AI Chat — widget
   Boje i tipografija preuzete iz BOOM dizajn sustava.
   Ako se font na webu razlikuje, promijeni --boom-font ispod. */

:root {
	--boom-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--boom-ink: #0E0E0C;
	--boom-paper: #FAF8F4;
	--boom-paper-warm: #F2EEE5;
	--boom-accent: #E5532A;
	--boom-muted: #6B6962;
	--boom-line: #D9D4C7;
}

/* Tema ne mora imati border-box reset. Bez ovoga inputima s width:100%
   padding i border dodaju 26px pa ispadaju izvan kartice, a stupci u
   gridu ispadnu nejednaki. Ograničeno na widget da ne dira temu. */
#boom-chat-launcher,
#boom-chat-panel,
#boom-chat-panel *,
#boom-chat-panel *::before,
#boom-chat-panel *::after {
	box-sizing: border-box;
}

#boom-chat-launcher {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9998;
	width: 62px;
	height: 62px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--boom-ink);
	color: var(--boom-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	/* Dvoslojna sjena: uska za rub, široka i mekana za odvajanje od podloge. */
	box-shadow: 0 2px 6px rgba(14, 14, 12, .18), 0 12px 28px rgba(14, 14, 12, .22);
	transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), background .22s, box-shadow .22s;
	/* Prvi dolazak: tri diskretna otkucaja pa miruje. */
	animation: boom-launcher-in .5s cubic-bezier(.34, 1.4, .64, 1) both,
	           boom-launcher-pulse 2.4s ease-out .8s 3;
}

#boom-chat-launcher .boom-ico {
	display: block;
	transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}

#boom-chat-launcher:hover {
	background: var(--boom-accent);
	transform: translateY(-3px);
	box-shadow: 0 2px 6px rgba(229, 83, 42, .22), 0 16px 34px rgba(229, 83, 42, .3);
}

#boom-chat-launcher:hover .boom-ico {
	transform: rotate(-6deg) scale(1.06);
}

#boom-chat-launcher:active {
	transform: translateY(-1px) scale(.96);
}

/* Natpis uz gumb — samo na širim ekranima, gdje ima mjesta. */
#boom-chat-launcher::after {
	content: attr(data-tip);
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	white-space: nowrap;
	background: var(--boom-ink);
	color: var(--boom-paper);
	font-family: var(--boom-font);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}

#boom-chat-launcher:hover::after,
#boom-chat-launcher:focus-visible::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

@media (max-width: 600px), (hover: none) {
	#boom-chat-launcher::after { display: none; }
}

@keyframes boom-launcher-in {
	from { opacity: 0; transform: translateY(16px) scale(.85); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes boom-launcher-pulse {
	0%      { box-shadow: 0 2px 6px rgba(14, 14, 12, .18), 0 12px 28px rgba(14, 14, 12, .22), 0 0 0 0 rgba(229, 83, 42, .45); }
	22%     { box-shadow: 0 2px 6px rgba(14, 14, 12, .18), 0 12px 28px rgba(14, 14, 12, .22), 0 0 0 14px rgba(229, 83, 42, 0); }
	100%    { box-shadow: 0 2px 6px rgba(14, 14, 12, .18), 0 12px 28px rgba(14, 14, 12, .22), 0 0 0 0 rgba(229, 83, 42, 0); }
}

#boom-chat-launcher:focus-visible,
#boom-chat-panel button:focus-visible,
#boom-chat-panel input:focus-visible {
	outline: 2px solid var(--boom-accent);
	outline-offset: 2px;
}

#boom-chat-launcher.hidden {
	display: none;
}

#boom-chat-panel {
	position: fixed;
	bottom: 96px;
	right: 24px;
	z-index: 9999;
	/* Odgovori su često po tri odlomka — na 380x540 se skrolalo gotovo stalno.
	   min() drži panel unutar prozora i na manjim ekranima bez media queryja. */
	width: min(440px, calc(100vw - 32px));
	height: min(660px, calc(100vh - 128px));
	background: var(--boom-paper);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
	display: none;
	flex-direction: column;
	overflow: hidden;
	font-family: var(--boom-font);
}

#boom-chat-panel.open {
	display: flex;
}

.boom-head {
	background: var(--boom-ink);
	color: var(--boom-paper);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.boom-head strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
}

.boom-head span {
	font-size: 12px;
	color: #a8a59f;
}

.boom-x {
	background: none;
	border: none;
	color: #a8a59f;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	padding: 0 4px;
}

.boom-x:hover {
	color: var(--boom-paper);
}

.boom-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.boom-msg {
	max-width: 88%;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.6;
	word-wrap: break-word;
}

/* Odlomci unutar odgovora — <br><br> iz linkify() inače slijepi tekst u blok. */
.boom-msg br + br {
	line-height: 2.1;
}

.boom-msg.bot {
	background: var(--boom-paper-warm);
	color: var(--boom-ink);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.boom-msg.user {
	background: var(--boom-ink);
	color: var(--boom-paper);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.boom-msg.typing {
	color: var(--boom-muted);
	font-style: italic;
}

.boom-msg a {
	color: var(--boom-accent);
}

.boom-msg.user a {
	color: #ffb59c;
}

/* forma za kontakt */
.boom-lead {
	position: relative;
	align-self: stretch;
	background: #fff;
	border: 1px solid var(--boom-line);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.boom-lead h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--boom-ink);
}

.boom-lead input[type="text"],
.boom-lead input[type="email"] {
	width: 100%;
	border: 1px solid var(--boom-line);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	background: #fff;
	color: var(--boom-ink);
}

.boom-lead input:focus {
	border-color: var(--boom-accent);
}

.boom-lead input::placeholder {
	color: var(--boom-muted);
	opacity: 1;
}

/* Naslov i legenda dijele jedan red — legenda ne visi usred forme. */
.boom-lead-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.boom-lead-req {
	margin: 0;
	font-size: 11px;
	color: var(--boom-muted);
	white-space: nowrap;
}

/* Pozicija i tvrtka stanu jedno uz drugo — kratke vrijednosti,
   forma ostaje niska i vidljiva bez skrolanja. */
.boom-lead-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* Uski ekrani: dva stupca postaju pretijesna za placeholdere. */
@media (max-width: 360px) {
	.boom-lead-grid {
		grid-template-columns: 1fr;
	}
}

.boom-lead label {
	margin-top: 2px;
}

.boom-lead button {
	margin-top: 2px;
}

.boom-lead label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 12px;
	color: var(--boom-muted);
	line-height: 1.45;
}

.boom-lead label input {
	margin-top: 2px;
	flex-shrink: 0;
}

.boom-lead button {
	background: var(--boom-ink);
	color: var(--boom-paper);
	border: none;
	border-radius: 8px;
	padding: 10px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
}

.boom-lead button:hover {
	background: var(--boom-accent);
}

.boom-lead button:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.boom-lead .boom-err {
	font-size: 12px;
	color: #c0392b;
}

.boom-hp {
	position: absolute;
	left: -9999px;
}

.boom-foot {
	border-top: 1px solid var(--boom-line);
	background: var(--boom-paper);
}

.boom-row {
	display: flex;
	gap: 8px;
	padding: 12px 14px 6px;
}

.boom-row input {
	flex: 1;
	border: 1px solid var(--boom-line);
	border-radius: 20px;
	padding: 10px 16px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	background: #fff;
	color: var(--boom-ink);
}

.boom-row input:focus {
	border-color: var(--boom-accent);
}

.boom-row button {
	background: var(--boom-ink);
	color: var(--boom-paper);
	border: none;
	border-radius: 20px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
}

.boom-row button:hover {
	background: var(--boom-accent);
}

.boom-row button:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.boom-note {
	font-size: 11px;
	color: var(--boom-muted);
	padding: 0 16px 12px;
	line-height: 1.4;
}

.boom-note a {
	color: var(--boom-muted);
}

@media (max-width: 480px) {
	#boom-chat-panel {
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#boom-chat-launcher,
	#boom-chat-launcher .boom-ico,
	#boom-chat-launcher::after {
		transition: none;
		animation: none;
	}
	#boom-chat-launcher:hover {
		transform: none;
	}
	#boom-chat-launcher:hover .boom-ico {
		transform: none;
	}
}

/* Odgovor koji upravo stiže — treptajući kursor na kraju. */
.boom-msg.streaming::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -2px;
	background: var(--boom-accent);
	animation: boom-caret 1s steps(2, start) infinite;
}

@keyframes boom-caret { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
	.boom-msg.streaming::after { animation: none; }
}