/* Fungolf Chat – widgetin tyylit.
   Kaikki säännöt on ankkuroitu #fungolf-chat-id:hen, jotta sivuston teeman ja
   dark mode -CSS:n yleiset säännöt (p, li, span, textarea …) eivät vuoda widgettiin.
   Tumma ulkoasu seuraa sivuston html[data-color-scheme="dark"]-tilaa. */

#fungolf-chat {
	--fgc-accent: #f7931e;
	--fgc-accent-dark: #d97a0c;
	--fgc-header: #1f2937;
	--fgc-header-hover: rgba(255, 255, 255, 0.12);
	--fgc-open-btn: #1f2937;
	--fgc-open-btn-hover: #0f172a;
	--fgc-panel: #ffffff;
	--fgc-log: #f3f4f6;
	--fgc-text: #111827;
	--fgc-muted: #6b7280;
	--fgc-border: #e5e7eb;
	--fgc-bubble: #ffffff;
	--fgc-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	--fgc-link: #b45309;
	--fgc-chip-bg: #ffffff;
	--fgc-chip-border: #d1d5db;
	--fgc-chip-hover: #fff7ed;
	--fgc-input-bg: #ffffff;
	--fgc-input-border: #d1d5db;
	--fgc-error-bg: #fef2f2;
	--fgc-error-text: #991b1b;
	--fgc-error-border: #fecaca;
	--fgc-preview-bg: #fef3c7;
	--fgc-preview-text: #92400e;
	--fgc-send-disabled: #d1d5db;
	position: fixed;
	bottom: calc(24px + var(--fgc-bottom-offset, 0px)); /* offset = kiinteän alapalkin korkeus (JS) */
	z-index: 99990;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--fgc-text);
	-webkit-text-size-adjust: 100%;
}

/* Tumma tila (sivuston oma kytkin asettaa attribuutin <html>-elementtiin) */
html[data-color-scheme="dark"] #fungolf-chat {
	--fgc-header: #111827;
	--fgc-open-btn: #111827;
	--fgc-open-btn-hover: #0b1220;
	--fgc-panel: #1f2937;
	--fgc-log: #171c24;
	--fgc-text: #e5e7eb;
	--fgc-muted: #9ca3af;
	--fgc-border: #374151;
	--fgc-bubble: #263141;
	--fgc-bubble-shadow: none;
	--fgc-link: #fdba74;
	--fgc-chip-bg: #263141;
	--fgc-chip-border: #4b5563;
	--fgc-chip-hover: #374151;
	--fgc-input-bg: #263141;
	--fgc-input-border: #4b5563;
	--fgc-error-bg: #3b1d1d;
	--fgc-error-text: #fecaca;
	--fgc-error-border: #7f1d1d;
	--fgc-preview-bg: #3b2f0b;
	--fgc-preview-text: #fde68a;
	--fgc-send-disabled: #4b5563;
}

#fungolf-chat.fgc-left { left: 20px; }
#fungolf-chat.fgc-right { right: 20px; }
#fungolf-chat *, #fungolf-chat *::before, #fungolf-chat *::after { box-sizing: border-box; }
#fungolf-chat button { font: inherit; cursor: pointer; }
#fungolf-chat p, #fungolf-chat li, #fungolf-chat span { color: inherit; }

/* Kelluva kaksiosainen nappi: "Varaa aika" + chat-kuvake. Korvaa sivuston
   aiemman kelluvan Varaa aika -napin. */
#fungolf-chat .fgc-launcher {
	display: flex;
	align-items: stretch;
	border-radius: 999px;
	overflow: hidden;
	background: var(--fgc-open-btn);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
#fungolf-chat.fgc-open .fgc-launcher { display: none; }
/* Evästebannerin ollessa näkyvissä kelluva nappi piilotetaan (paneeli saa jäädä auki) */
#fungolf-chat.fgc-hidden:not(.fgc-open) { display: none; }
#fungolf-chat .fgc-book {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 0 18px 0 20px;
	background: var(--fgc-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
}
#fungolf-chat .fgc-book span { color: #fff; }
#fungolf-chat .fgc-book:hover, #fungolf-chat .fgc-book:focus { background: var(--fgc-accent-dark); color: #fff; text-decoration: none; }
#fungolf-chat .fgc-book:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
#fungolf-chat .fgc-book svg { width: 20px; height: 20px; display: block; }
#fungolf-chat .fgc-open-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 56px;
	border: 0;
	border-radius: 0;
	background: var(--fgc-open-btn);
	color: #fff;
	padding: 0;
	margin: 0;
}
#fungolf-chat .fgc-open-btn:hover { background: var(--fgc-open-btn-hover); }
#fungolf-chat .fgc-open-btn:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
#fungolf-chat .fgc-open-btn svg { width: 26px; height: 26px; display: block; }

/* Paneeli */
#fungolf-chat .fgc-panel {
	display: none;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 40px);
	height: 600px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	background: var(--fgc-panel);
	color: var(--fgc-text);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
#fungolf-chat.fgc-open .fgc-panel { display: flex; }
/* Avoinna ollessaan paneeli peittää muut kelluvat elementit (esim. Varaa aika -napin mobiilissa) */
#fungolf-chat.fgc-open { z-index: 2147483000; }

#fungolf-chat .fgc-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 12px 16px;
	background: var(--fgc-header);
	color: #fff;
}
#fungolf-chat .fgc-header-text { flex: 1; min-width: 0; }
#fungolf-chat .fgc-title { font-weight: 700; font-size: 16px; margin: 0; line-height: 1.3; color: #fff; }
#fungolf-chat .fgc-subtitle { font-size: 12px; opacity: 0.8; margin: 0; color: #fff; }
#fungolf-chat .fgc-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	padding: 0;
	margin: 0;
}
#fungolf-chat .fgc-icon-btn:hover { background: var(--fgc-header-hover); }
#fungolf-chat .fgc-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#fungolf-chat .fgc-icon-btn svg { width: 22px; height: 22px; display: block; }

/* Varaa aika -nappi paneelin yläpalkissa */
#fungolf-chat .fgc-header-book {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--fgc-accent);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}
#fungolf-chat .fgc-header-book:hover, #fungolf-chat .fgc-header-book:focus { background: var(--fgc-accent-dark); color: #fff; text-decoration: none; }
#fungolf-chat .fgc-header-book:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

#fungolf-chat .fgc-preview {
	font-size: 11px;
	text-align: center;
	padding: 4px 8px;
	background: var(--fgc-preview-bg);
	color: var(--fgc-preview-text);
}

/* Viestit */
#fungolf-chat .fgc-log {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px;
	background: var(--fgc-log);
	display: flex;
	flex-direction: column;
	gap: 10px;
	overscroll-behavior: contain;
}
#fungolf-chat .fgc-msg {
	max-width: 88%;
	padding: 10px 13px;
	border-radius: 14px;
	white-space: normal;
	overflow-wrap: anywhere;
	font-size: 15px;
	line-height: 1.45;
}
#fungolf-chat .fgc-msg p { margin: 0; padding: 0; font: inherit; }
#fungolf-chat .fgc-msg p + p, #fungolf-chat .fgc-msg p + ul, #fungolf-chat .fgc-msg ul + p { margin-top: 8px; }
#fungolf-chat .fgc-msg ul { margin: 0; padding: 0 0 0 18px; list-style: disc; }
#fungolf-chat .fgc-msg li { margin: 2px 0; padding: 0; font: inherit; list-style: disc; }
#fungolf-chat .fgc-msg a { color: var(--fgc-link); text-decoration: underline; }
#fungolf-chat .fgc-msg a:hover { color: var(--fgc-link); text-decoration: none; }
#fungolf-chat .fgc-msg strong { font-weight: 700; color: inherit; }
#fungolf-chat .fgc-msg.fgc-assistant {
	align-self: flex-start;
	background: var(--fgc-bubble);
	color: var(--fgc-text);
	border-bottom-left-radius: 4px;
	box-shadow: var(--fgc-bubble-shadow);
}
#fungolf-chat .fgc-msg.fgc-assistant p, #fungolf-chat .fgc-msg.fgc-assistant li { color: var(--fgc-text); }
#fungolf-chat .fgc-msg.fgc-user {
	align-self: flex-end;
	background: var(--fgc-accent);
	color: #fff;
	border-bottom-right-radius: 4px;
}
#fungolf-chat .fgc-msg.fgc-user a { color: #fff; }
#fungolf-chat .fgc-msg.fgc-error {
	background: var(--fgc-error-bg);
	color: var(--fgc-error-text);
	border: 1px solid var(--fgc-error-border);
}
#fungolf-chat .fgc-msg.fgc-error p, #fungolf-chat .fgc-msg.fgc-error li { color: var(--fgc-error-text); }
#fungolf-chat .fgc-msg.fgc-error a { color: var(--fgc-error-text); }
#fungolf-chat .fgc-msg.fgc-typing { color: var(--fgc-muted); font-style: italic; }

#fungolf-chat .fgc-feedback {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	font-size: 12px;
	color: var(--fgc-muted);
}
#fungolf-chat .fgc-feedback span { color: var(--fgc-muted); }
#fungolf-chat .fgc-feedback button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--fgc-muted);
	padding: 0;
	margin: 0;
}
#fungolf-chat .fgc-feedback button:hover { background: var(--fgc-log); color: var(--fgc-text); }
#fungolf-chat .fgc-feedback button:focus-visible { outline: 2px solid var(--fgc-accent); }
#fungolf-chat .fgc-feedback button svg { width: 16px; height: 16px; display: block; }

/* Pikakysymykset */
#fungolf-chat .fgc-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-self: flex-start;
	max-width: 100%;
}
#fungolf-chat .fgc-quick button {
	border: 1px solid var(--fgc-chip-border);
	border-radius: 999px;
	background: var(--fgc-chip-bg);
	color: var(--fgc-text);
	padding: 6px 12px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}
#fungolf-chat .fgc-quick button:hover { background: var(--fgc-chip-hover); border-color: var(--fgc-accent); color: var(--fgc-text); }
#fungolf-chat .fgc-quick button:focus-visible { outline: 2px solid var(--fgc-accent); }

/* Syöttö */
#fungolf-chat .fgc-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 10px 6px 12px;
	margin: 0;
	border-top: 1px solid var(--fgc-border);
	background: var(--fgc-panel);
}
/* !important: sivuston dark mode -CSS asettaa textarea-taustan ja -tekstin !important-säännöillä */
#fungolf-chat .fgc-input {
	flex: 1;
	resize: none;
	border: 1px solid var(--fgc-input-border) !important;
	border-radius: 12px !important;
	padding: 9px 12px !important;
	font: inherit !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--fgc-text) !important;
	background: var(--fgc-input-bg) !important;
	box-shadow: none !important;
	min-height: 42px;
	max-height: 120px;
	margin: 0;
	overflow-y: hidden;
	width: auto;
}
#fungolf-chat .fgc-input::placeholder { color: var(--fgc-muted) !important; opacity: 1; }
#fungolf-chat .fgc-input:focus { outline: 2px solid var(--fgc-accent); outline-offset: 0; border-color: transparent !important; }
#fungolf-chat .fgc-input:disabled { opacity: 0.7; }
#fungolf-chat .fgc-send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--fgc-accent);
	color: #fff;
	padding: 0;
	margin: 0;
	flex: 0 0 auto;
}
#fungolf-chat .fgc-send:hover { background: var(--fgc-accent-dark); }
#fungolf-chat .fgc-send:disabled { background: var(--fgc-send-disabled); cursor: default; }
#fungolf-chat .fgc-send:focus-visible { outline: 2px solid var(--fgc-header); outline-offset: 2px; }
#fungolf-chat .fgc-send svg { width: 20px; height: 20px; display: block; }

#fungolf-chat .fgc-note {
	font-size: 11px;
	line-height: 1.4;
	color: var(--fgc-muted);
	padding: 0 14px 10px;
	background: var(--fgc-panel);
	margin: 0;
}
#fungolf-chat .fgc-note a { color: var(--fgc-muted); text-decoration: underline; }

/* Mobiili: koko ruutu */
@media (max-width: 600px) {
	#fungolf-chat.fgc-open {
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	#fungolf-chat .fgc-panel {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}
	#fungolf-chat .fgc-input { font-size: 16px !important; } /* estää iOS:n zoomauksen */
}

@media print {
	#fungolf-chat { display: none; }
}