/* ============================================================
   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)
   ============================================================ */

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

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

.bfc-launcher {
	position:        fixed;
	bottom:          24px;
	right:           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;
	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-launcher:hover {
	transform:  scale(1.08);
	box-shadow: 0 6px 20px rgba(0,0,0,.28);
	background: var(--bfc-primary-dark);
}

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

.bfc-launcher svg {
	width:      24px;
	height:     24px;
	flex-shrink: 0;
}

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

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

.bfc-window {
	position:      fixed;
	bottom:        calc( var(--bfc-launcher-size) + 32px );
	right:         24px;
	z-index:       var(--bfc-z);
	width:         var(--bfc-window-w);
	max-width:     calc(100vw - 32px);
	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;
}

.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-close-btn:hover { opacity: 1; }

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

.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%;
}

.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;
}

.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: .5em;
}
.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;
}

.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-chip:hover {
	background: var(--bfc-primary);
	color:      #fff;
}

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

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

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

.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:       8px 12px;
	font-size:     .8125rem;
	color:         var(--bfc-text);
	cursor:        pointer;
	margin-bottom: 4px;
	transition:    background .15s, border-color .15s;
}

.bfc-suggestion:hover {
	background:    var(--bfc-surface);
	border-color:  var(--bfc-primary);
}

.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); }

.bfc-send-btn {
	flex-shrink:     0;
	width:           38px;
	height:          38px;
	border-radius:   50%;
	border:          none;
	background:      var(--bfc-primary);
	color:           #fff;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background .15s, transform .15s;
}

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

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

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

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

/* ============================================================
   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);
	}

	.bfc-launcher {
		bottom: 16px;
		right:  16px;
	}
}

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

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