/**
 * Tmářka — vzhled widgetu.
 *
 * Barvy se berou z proměnných tématu (--barva-akcent, --barva-textu…), takže
 * když se změní paleta webu, změní se i chat. Záložní hodnoty jsou tu pro
 * případ, že by se widget zobrazil mimo téma _s.
 *
 * Všechno je position: fixed, takže widget nemůže posunout obsah stránky.
 * Wonderchat na mobilu dělal ~0,42 CLS právě tím, že si za běhu měnil rozměry
 * a vkládal iframe — tady se to stát nemůže.
 */

.tmarka-bublina {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--barva-akcent, #da7c0c);
	color: var(--barva-na-akcentu, #000);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
	cursor: pointer;
}

.tmarka-bublina:hover {
	filter: brightness(1.08);
}

.tmarka-bublina:focus-visible,
.tmarka-zavrit:focus-visible,
.tmarka-odeslat:focus-visible,
.tmarka-vstup:focus-visible {
	outline: 2px solid var(--barva-akcent, #da7c0c);
	outline-offset: 2px;
}

.tmarka-okno {
	position: fixed;
	right: 20px;
	bottom: 88px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100vw - 40px));
	height: min(560px, calc(100vh - 140px));
	overflow: hidden;
	border: 1px solid rgba(176, 141, 87, .35);
	border-radius: var(--lt-radius, 8px);
	background: var(--barva-pozadi, #000);
	color: var(--barva-textu, #f5f1e6);
	font-family: var(--pismo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: 15px;
	line-height: 1.55;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .6);
}

.tmarka-okno[hidden] {
	display: none;
}

.tmarka-hlavicka {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(176, 141, 87, .25);
}

/* „odpovídá AI" je tu schválně a natrvalo — návštěvník má vědět, s čím mluví. */
.tmarka-popisek {
	color: var(--lt-color-accent, #b08d57);
	font-size: 12px;
	letter-spacing: .02em;
}

.tmarka-zavrit {
	margin-left: auto;
	padding: 0 4px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
}

.tmarka-zavrit:hover {
	opacity: 1;
}

.tmarka-zpravy {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overscroll-behavior: contain;
}

.tmarka-zprava {
	max-width: 85%;
	padding: 9px 12px;
	border-radius: var(--lt-radius, 8px);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.tmarka-agent {
	align-self: flex-start;
	background: rgba(245, 241, 230, .07);
	border: 1px solid rgba(176, 141, 87, .2);
}

.tmarka-uzivatel {
	align-self: flex-end;
	background: var(--barva-akcent, #da7c0c);
	color: var(--barva-na-akcentu, #000);
}

/* Formátování uvnitř odpovědi. */
.tmarka-agent ul {
	margin: 6px 0 2px;
	padding-left: 18px;
}

.tmarka-agent li {
	margin-bottom: 3px;
}

.tmarka-agent strong {
	font-weight: 600;
	color: var(--lt-color-accent, #b08d57);
}

.tmarka-odkaz {
	color: var(--barva-akcent, #da7c0c);
	overflow-wrap: anywhere;
}

/* Kurzor, dokud model píše. */
.tmarka-piste::after {
	content: "▍";
	margin-left: 1px;
	animation: tmarka-blik 1s steps(2) infinite;
}

@keyframes tmarka-blik {
	50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tmarka-piste::after {
		animation: none;
	}
}

.tmarka-pata {
	display: flex;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid rgba(176, 141, 87, .25);
}

.tmarka-vstup {
	flex: 1;
	max-height: 110px;
	padding: 8px 10px;
	border: 1px solid rgba(176, 141, 87, .35);
	border-radius: var(--lt-radius, 8px);
	background: rgba(245, 241, 230, .05);
	/* Barva napevno, ne inherit: formulářová pole dědí nespolehlivě a téma
	   navíc nastavuje `body, button, input, select, optgroup, textarea`
	   na tmavě šedou. */
	color: var(--barva-textu, #f5f1e6);
	font: inherit;
	resize: none;
}

/* Placeholder si prohlížeč obarvuje sám — vycházela z toho tmavě šedá
   rgb(117,117,117) na tmavém pozadí, tedy skoro neviditelná vybídka. */
.tmarka-vstup::placeholder {
	color: rgba(245, 241, 230, .45);
	opacity: 1; /* Firefox placeholder ztmavuje průhledností. */
}

/* Past na roboty. Ne display:none — část skriptů skrytá pole přeskakuje,
   tohle je pro ně k nerozeznání od běžného vstupu. */
.tmarka-past {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.tmarka-odeslat {
	padding: 8px 14px;
	border: 0;
	border-radius: var(--lt-radius, 8px);
	background: var(--barva-akcent, #da7c0c);
	color: var(--barva-na-akcentu, #000);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.tmarka-odeslat[disabled] {
	opacity: .5;
	cursor: default;
}

/* Na mobilu ať okno nekoliduje s plovoucím tlačítkem Rezervace a telefonem,
   které už na webu jsou. */
@media (max-width: 921px) {
	.tmarka-bublina {
		right: 16px;
		bottom: 76px;
	}

	.tmarka-okno {
		right: 10px;
		left: 10px;
		bottom: 140px;
		width: auto;
		height: min(70vh, 520px);
	}
}

/* Hláška „co se právě děje“.
 *
 * Blikající čtvereček sám o sobě neříká, jestli se něco děje, nebo to spadlo.
 * Tenhle prvek se maže sám — vykresli() přepisuje celé innerHTML bubliny.
 */
.tmarka-stav {
	display: inline-block;
	color: rgba(245, 241, 230, .6);
	font-size: .9em;
	font-style: italic;
}