/* ============================================================
   Branike FAQ Chat Widget
   GPU animácie (transform/opacity), WCAG 2.1 AA, nulový CLS
   ============================================================ */

:root {
	--bfc-primary:       #2563EB;
	--bfc-primary-dark:  #1d4ed8;
	--bfc-bg:            #ffffff;
	--bfc-surface:       #f8fafc;
	--bfc-border:        #e2e8f0;
	--bfc-text:          #1e293b;
	--bfc-text-muted:    #64748b;
	--bfc-user-bg:       var(--bfc-primary);
	--bfc-user-color:    #ffffff;
	--bfc-bot-bg:        #f1f5f9;
	--bfc-bot-color:     var(--bfc-text);
	--bfc-radius:        16px;
	--bfc-radius-sm:     8px;
	--bfc-shadow:        0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
	--bfc-z:             9999;
	--bfc-launcher-size: 56px;
	--bfc-window-w:      370px;
	--bfc-window-h:      520px;
}

/* ============================================================
   Reset pre widget (scoped)
   FIX: :where() redukuje špecificitu na 0 — žiadne .bfc-* pravidlo
   nie je prepísané resetom (ID selektor #bfc-root má špecificitu 100,
   čo by porazilo všetky class selektory so špecificitou 10).
   ============================================================ */

:where(#bfc-root, #bfc-root *) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Izolačný reset pre prvky, ktoré WordPress témy agresívne štylizujú.
   Špecificita #bfc-root button = 1,0,1 = porazí väčšinu tém.           */
#bfc-root button {
	-webkit-appearance: none;
	appearance:         none;
	font:               inherit;
	cursor:             pointer;
}

/* SVG — niektoré témy nastavujú display:none na všetky SVG globálne.
   #bfc-root svg = 1,0,1 → bezpečne preváži.                            */
#bfc-root svg {
	display:    block;
	overflow:   visible;
	flex-shrink: 0;
}

/* ============================================================
   Launcher button
   ============================================================ */

/* Scoped launcher — specificity 1,1,0 */
#bfc-root .bfc-launcher {
	position:        fixed;
	bottom:          var(--bfc-launcher-bottom, 24px);
	right:           var(--bfc-launcher-edge, 24px);
	z-index:         var(--bfc-z);
	width:           var(--bfc-launcher-size);
	height:          var(--bfc-launcher-size);
	border-radius:   50%;
	border:          none;
	background:      var(--bfc-primary);
	color:           #fff;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	box-shadow:      0 4px 16px rgba(0,0,0,.22);
	/* GPU animácia */
	transition:      transform .2s ease, box-shadow .2s ease;
	will-change:     transform;
}

#bfc-root .bfc-launcher:hover {
	transform:  scale(1.08);
	box-shadow: 0 6px 20px rgba(0,0,0,.28);
	background: var(--bfc-primary-dark);
}

#bfc-root .bfc-launcher:focus-visible {
	outline:        2px solid var(--bfc-primary);
	outline-offset: 3px;
}

#bfc-root .bfc-launcher svg {
	width:  24px;
	height: 24px;
}

/* Prepínanie ikon */
#bfc-root .bfc-launcher .bfc-icon-close  { display: none; }
#bfc-root .bfc-launcher[aria-expanded="true"] .bfc-icon-chat  { display: none; }
#bfc-root .bfc-launcher[aria-expanded="true"] .bfc-icon-close { display: block; }

/* ============================================================
   Chat okno
   ============================================================ */

.bfc-window {
	position:      fixed;
	bottom:        calc( var(--bfc-launcher-size) + var(--bfc-launcher-bottom, 24px) + 8px );
	right:         var(--bfc-launcher-edge, 24px);
	z-index:       var(--bfc-z);
	width:         var(--bfc-window-w);
	max-width:     calc(100vw - 48px); /* min. 24px medzera na každej strane */
	height:        var(--bfc-window-h);
	max-height:    calc(100dvh - 120px);
	background:    var(--bfc-bg);
	border-radius: var(--bfc-radius);
	box-shadow:    var(--bfc-shadow);
	display:       flex;
	flex-direction: column;
	overflow:      hidden;
	/* Skryté — GPU animácia */
	opacity:       0;
	transform:     translateY(12px) scale(.97);
	pointer-events: none;
	transition:    opacity .22s ease, transform .22s ease;
	will-change:   opacity, transform;
}

.bfc-window--open {
	opacity:        1;
	transform:      translateY(0) scale(1);
	pointer-events: auto;
}

/* ============================================================
   Header
   ============================================================ */

.bfc-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 16px;
	background:      var(--bfc-primary);
	color:           #fff;
	font-weight:     600;
	font-size:       .9375rem;
	flex-shrink:     0;
}

/* Scoped close button */
#bfc-root .bfc-close-btn {
	background:    none;
	border:        none;
	cursor:        pointer;
	color:         #fff;
	display:       flex;
	align-items:   center;
	padding:       4px;
	border-radius: 4px;
	opacity:       .85;
	transition:    opacity .15s;
}

#bfc-root .bfc-close-btn:hover { opacity: 1; }

#bfc-root .bfc-close-btn:focus-visible {
	outline:        2px solid #fff;
	outline-offset: 2px;
}

#bfc-root .bfc-close-btn svg {
	width:  20px;
	height: 20px;
}

/* ============================================================
   Správy
   ============================================================ */

.bfc-messages {
	flex:       1;
	overflow-y: auto;
	padding:    16px 12px;
	display:    flex;
	flex-direction: column;
	gap:        10px;
	scroll-behavior: smooth;
}

.bfc-msg {
	display:    flex;
	max-width:  88%;
}

/* Bot správy s návrhmi dostanú plnú šírku — suggestion tlačidlá
   sa nesmú orezávať v úzkom kontajneri */
.bfc-msg--bot {
	max-width: 96%;
}

.bfc-msg--user {
	align-self:  flex-end;
	flex-direction: row-reverse;
}

.bfc-msg--bot {
	align-self: flex-start;
}

.bfc-bubble {
	padding:       10px 14px;
	border-radius: var(--bfc-radius);
	font-size:     .875rem;
	line-height:   1.55;
	word-break:    break-word;
}

/* Väčší padding pre user bublinu — vizuálne pohodlnejší */
.bfc-msg--user .bfc-bubble {
	padding: 12px 18px;
}

.bfc-msg--user .bfc-bubble {
	background:    var(--bfc-user-bg);
	color:         var(--bfc-user-color);
	border-bottom-right-radius: 4px;
}

/* Zabráni prepisovaniu farby textu témou pri hover/focus na user bublinách */
.bfc-msg--user .bfc-bubble,
.bfc-msg--user .bfc-bubble:hover,
.bfc-msg--user .bfc-bubble *,
.bfc-msg--user .bfc-bubble *:hover {
	color: var(--bfc-user-color);
}

.bfc-msg--bot .bfc-bubble {
	background:    var(--bfc-bot-bg);
	color:         var(--bfc-bot-color);
	border-bottom-left-radius: 4px;
}

/* Obsah odpovede */
.bfc-bubble p {
	margin-bottom: .75em;
}
.bfc-bubble p:last-child { margin-bottom: 0; }

.bfc-bubble strong { font-weight: 600; }

.bfc-bubble a {
	color:           var(--bfc-primary);
	text-decoration: underline;
}

.bfc-bubble a:hover { color: var(--bfc-primary-dark); }

.bfc-bubble a:focus-visible {
	outline:        2px solid var(--bfc-primary);
	outline-offset: 2px;
	border-radius:  2px;
}

/* ============================================================
   Chip buttons (linky + fallback kontakty)
   ============================================================ */

.bfc-chip-wrap {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
	margin-top: 8px !important;
}

/* Scoped chip — pokrýva button aj a elementy */
#bfc-root .bfc-chip {
	display:         inline-flex;
	align-items:     center;
	padding:         5px 12px;
	border-radius:   20px;
	border:          1.5px solid var(--bfc-primary);
	color:           var(--bfc-primary);
	background:      transparent;
	font-size:       .8125rem;
	font-weight:     500;
	text-decoration: none;
	transition:      background .15s, color .15s;
	cursor:          pointer;
	white-space:     nowrap;
}

#bfc-root .bfc-chip:hover {
	background: var(--bfc-primary);
	color:      #fff;
}

#bfc-root .bfc-chip:focus-visible {
	outline:        2px solid var(--bfc-primary);
	outline-offset: 2px;
}

/* ============================================================
   Suggestion buttons (ďalšie návrhy)
   ============================================================ */

/* Správy obsahujúce suggestion tlačidlá majú transparentné pozadie —
   tlačidlá samotné nesú vizuál, wrapper bubble nepotrebuje ďalší box */
.bfc-msg--suggestions {
	max-width: 100%;
}

.bfc-msg--suggestions .bfc-bubble {
	background:  transparent;
	padding:     4px 0;
	border-radius: 0;
}

.bfc-suggestions-label {
	font-size:     .75rem;
	color:         var(--bfc-text-muted);
	margin-bottom: 6px !important;
	padding-left:  2px;
}

/* Scoped suggestion buttons */
#bfc-root .bfc-suggestion {
	display:       block;
	width:         100%;
	text-align:    left;
	background:    var(--bfc-bg);
	border:        1px solid var(--bfc-border);
	border-radius: var(--bfc-radius-sm);
	padding:       9px 14px;
	font-size:     .8125rem;
	color:         var(--bfc-text);
	cursor:        pointer;
	margin-bottom: 5px;
	transition:    background .15s, border-color .15s, box-shadow .15s;
	line-height:   1.45;
}

#bfc-root .bfc-suggestion:last-child { margin-bottom: 0; }

#bfc-root .bfc-suggestion:hover {
	background:   var(--bfc-surface);
	border-color: var(--bfc-primary);
	box-shadow:   0 1px 4px rgba(37,99,235,.12);
}

#bfc-root .bfc-suggestion:focus-visible {
	outline:        2px solid var(--bfc-primary);
	outline-offset: 2px;
}

/* ============================================================
   Input area
   ============================================================ */

.bfc-input-area {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     12px;
	border-top:  1px solid var(--bfc-border);
	flex-shrink: 0;
	background:  var(--bfc-bg);
}

.bfc-input {
	flex:          1;
	border:        1.5px solid var(--bfc-border);
	border-radius: 24px;
	padding:       9px 16px;
	font-size:     .875rem;
	color:         var(--bfc-text);
	background:    var(--bfc-surface);
	outline:       none;
	transition:    border-color .15s;
	min-width:     0;
}

.bfc-input:focus {
	border-color: var(--bfc-primary);
	background:   #fff;
}

.bfc-input::placeholder { color: var(--bfc-text-muted); }

/* Scoped pod #bfc-root — specificity 1,1,0 → poráža tému aj pri .site button {} */
#bfc-root .bfc-send-btn {
	flex-shrink:     0;
	width:           38px;
	height:          38px;
	border-radius:   50%;
	border:          none;
	background:      var(--bfc-primary);
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	transition:      background .15s, transform .15s;
}

#bfc-root .bfc-send-btn:hover { background: var(--bfc-primary-dark); }

#bfc-root .bfc-send-btn:focus-visible {
	outline:        2px solid var(--bfc-primary);
	outline-offset: 2px;
}

#bfc-root .bfc-send-btn:active { transform: scale(.92); }

#bfc-root .bfc-send-btn svg {
	width:  18px;
	height: 18px;
}

/* ============================================================
   Launcher tooltip
   ============================================================ */

.bfc-launcher-tooltip {
	position:      fixed;
	bottom:        calc( var(--bfc-launcher-size) + var(--bfc-launcher-bottom, 24px) + 20px );
	right:         var(--bfc-launcher-edge, 24px);
	z-index:       var(--bfc-z);
	background:    #fff;
	/* Fallback pre staré prehliadače, potom color-mix */
	border:        1px solid rgba(37, 99, 235, 0.6);
	border:        1px solid color-mix(in srgb, var(--bfc-primary) 60%, transparent);
	border-radius: var(--bfc-radius-sm);
	padding:       8px 14px;
	font-size:     .8125rem;
	color:         var(--bfc-text);
	white-space:   nowrap;
	box-shadow:    0 4px 16px rgba(0,0,0,.08);
	pointer-events: none;
	/* GPU animácia — skryté */
	opacity:       0;
	transform:     translateY(4px);
	transition:    opacity .22s ease, transform .22s ease;
	will-change:   opacity, transform;
}

/* Šipka nadol smerujúca k stredu launcher buttonu */
.bfc-launcher-tooltip::after {
	content:    '';
	position:   absolute;
	bottom:     -6px;
	/* Zarovnanie na stred launchers: --bfc-launcher-size / 2 - polovica šipky (5px) */
	right:      calc( var(--bfc-launcher-size) / 2 - 5px );
	width:      10px;
	height:     10px;
	background: #fff;
	border-right:  1px solid rgba(37, 99, 235, 0.6);
	border-right:  1px solid color-mix(in srgb, var(--bfc-primary) 60%, transparent);
	border-bottom: 1px solid rgba(37, 99, 235, 0.6);
	border-bottom: 1px solid color-mix(in srgb, var(--bfc-primary) 60%, transparent);
	transform:  rotate(45deg);
}

.bfc-launcher-tooltip--visible {
	opacity:   1;
	transform: translateY(0);
}

/* ============================================================
   Ľavá strana (.bfc-root--left)
   ============================================================ */

.bfc-root--left .bfc-launcher {
	right: auto;
	left:  var(--bfc-launcher-edge, 24px);
}

.bfc-root--left .bfc-window {
	right: auto;
	left:  var(--bfc-launcher-edge, 24px);
}

.bfc-root--left .bfc-launcher-tooltip {
	right: auto;
	left:  var(--bfc-launcher-edge, 24px);
}

/* Šipka pre ľavú stranu — rovnaká logika, zrkadlovo */
.bfc-root--left .bfc-launcher-tooltip::after {
	right: auto;
	left:  calc( var(--bfc-launcher-size) / 2 - 5px );
}

/* ============================================================
   Screen reader only
   ============================================================ */

.screen-reader-text {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0,0,0,0);
	white-space: nowrap;
	border:     0;
}

/* ============================================================
   Mobilná verzia
   ============================================================ */

@media ( max-width: 480px ) {
	.bfc-window {
		bottom:        0;
		right:         0;
		left:          0;
		width:         100%;
		max-width:     100%;
		max-height:    85dvh;
		border-radius: var(--bfc-radius) var(--bfc-radius) 0 0;
		transform:     translateY(100%);
	}

	.bfc-window--open {
		transform: translateY(0);
	}

	/* Na mobile ignorujeme --bfc-launcher-bottom/edge, pevné hodnoty */
	#bfc-root .bfc-launcher {
		bottom: 16px;
		right:  16px;
	}

	.bfc-root--left .bfc-launcher {
		right: auto;
		left:  16px;
	}
}

/* ============================================================
   Landscape mobil — full-height side panel
   Cieľ: telefón na šírku (max-height ≤ 500px, napr. iPhone landscape).
   max-width: 480px sa tu neaplikuje (telefón je 667–932px široký),
   preto riešime cez orientation + max-height.
   ============================================================ */

@media ( orientation: landscape ) and ( max-height: 500px ) {
	.bfc-window {
		top:           0;
		bottom:        0;
		right:         0;
		left:          auto;
		width:         min(380px, 50vw);
		height:        100dvh;
		max-height:    100dvh;
		border-radius: 0;
		/* Slide z prava namiesto translateY */
		transform:     translateX(calc(100% + 32px));
	}

	.bfc-window--open {
		transform: translateX(0);
	}

	/* Ľavá strana — slide z ľava */
	.bfc-root--left .bfc-window {
		right: auto;
		left:  0;
		transform: translateX(calc(-100% - 32px));
	}

	.bfc-root--left .bfc-window--open {
		transform: translateX(0);
	}

	/* Launcher — nižšie, blíže k rohu */
	#bfc-root .bfc-launcher {
		bottom: 12px;
		right:  12px;
	}

	.bfc-root--left .bfc-launcher {
		right: auto;
		left:  12px;
	}
}

/* ============================================================
   Redukovaný pohyb (prefers-reduced-motion)
   ============================================================ */

@media ( prefers-reduced-motion: reduce ) {
	.bfc-launcher,
	.bfc-window,
	.bfc-launcher-tooltip,
	.bfc-chip,
	.bfc-suggestion,
	.bfc-send-btn {
		transition: none;
	}
}