/* Odduel site-wide widgets: language switcher, assistant panel, back to top, cookie consent. */

:root {
	--od-w-edge: var(--od-gutter, 20px);
	--od-w-bottom: max(20px, env(safe-area-inset-bottom));
	--od-w-launcher: 56px;
	--od-w-shadow: 0 24px 64px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ---------- Language switcher ---------- */
.od-lang { position: relative; display: inline-flex; align-items: center; }
.od-lang__toggle {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 44px; padding: 0 4px;
	font-size: var(--od-fs-b3); font-weight: 500; line-height: 1; color: var(--od-brand);
}
.od-lang__toggle svg { flex: none; width: 20px; height: 20px; }
.od-lang__menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 5;
	width: min(360px, calc(100vw - 2 * var(--od-gutter))); padding: 18px;
	background: var(--od-white); border: 1px solid var(--od-grey-200);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
	color: var(--od-black); transform-origin: top right;
}
.od-lang__menu:not([hidden]) { animation: od-lang-in 0.45s var(--od-ease); }
@keyframes od-lang-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }
.od-lang__cap { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--od-grey-500); }
.od-lang__cap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--od-brand); }
.od-lang__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.od-lang__menu:not([hidden]) .od-lang__grid li { animation: od-lang-tile 0.5s var(--od-ease) backwards; }
.od-lang__grid li:nth-child(2) { animation-delay: 0.05s; }
.od-lang__grid li:nth-child(3) { animation-delay: 0.1s; }
.od-lang__grid li:nth-child(4) { animation-delay: 0.15s; }
@keyframes od-lang-tile { from { opacity: 0; transform: translateY(12px); } }
.od-lang__item {
	display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
	aspect-ratio: 1.25; padding: 14px; border: 1px solid var(--od-grey-200); color: var(--od-grey-400);
	transition: border-color 0.3s var(--od-ease), transform 0.3s var(--od-ease), color 0.3s var(--od-ease);
}
.od-lang__code { font-size: 44px; font-weight: 700; line-height: 0.9; letter-spacing: var(--od-track-display); }
.od-lang__name { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.od-lang__state { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--od-grey-500); }
.od-lang__item[aria-current="true"] { background: var(--od-brand); border-color: var(--od-brand); color: var(--od-white); }
.od-lang__item[aria-current="true"] .od-lang__state { color: var(--od-white); }
.od-lang__item[aria-disabled="true"] { cursor: default; }
.od-lang__item[aria-disabled="true"]:hover { border-color: var(--od-black); color: var(--od-grey-600); transform: translateY(-2px); }
.od-lang__item:focus-visible { outline: 2px solid var(--od-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .od-lang__menu:not([hidden]), .od-lang__menu:not([hidden]) .od-lang__grid li { animation: none; } }

/* ---------- Assistant: launcher ---------- */
.od-chat__launcher {
	position: fixed; right: var(--od-w-edge); bottom: var(--od-w-bottom); z-index: 92;
	display: grid; place-items: center;
	width: var(--od-w-launcher); height: var(--od-w-launcher); border-radius: 50%;
	background: var(--od-brand); color: var(--od-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: background-color 0.2s, transform 0.25s var(--od-ease);
}
.od-chat__launcher:hover { background: var(--od-black); }
.od-chat__launcher:active { transform: scale(0.96); }
.od-chat__launcher svg { grid-area: 1 / 1; width: 26px; height: 26px; transition: opacity 0.2s, transform 0.25s var(--od-ease); }
.od-chat__launcher .od-chat__icon-close,
.od-chat__launcher[aria-expanded="true"] .od-chat__icon-open { opacity: 0; transform: scale(0.6) rotate(-45deg); }
.od-chat__launcher[aria-expanded="true"] .od-chat__icon-close { opacity: 1; transform: none; }

/* ---------- Assistant: panel ---------- */
.od-chat__panel {
	position: fixed; right: var(--od-w-edge); bottom: calc(var(--od-w-bottom) + var(--od-w-launcher) + 12px); z-index: 93;
	display: flex; flex-direction: column;
	width: 384px; max-width: calc(100vw - 2 * var(--od-w-edge));
	max-height: min(680px, calc(100vh - var(--od-header-h, 72px) - var(--od-w-launcher) - 44px));
	max-height: min(680px, calc(100dvh - var(--od-header-h, 72px) - var(--od-w-launcher) - 44px));
	background: var(--od-white); color: var(--od-black);
	border: 1px solid var(--od-grey-200); box-shadow: var(--od-w-shadow);
	opacity: 0; transform: translateY(12px);
	transition: opacity 0.25s var(--od-ease), transform 0.25s var(--od-ease);
}
.od-chat__panel.is-open { opacity: 1; transform: none; }
.od-chat__panel:focus { outline: 0; }
.od-chat__head {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none;
	padding: 16px 12px 16px 20px; background: var(--od-black); color: var(--od-white);
}
.od-chat__title { display: flex; align-items: center; gap: 10px; font-size: var(--od-fs-b2); font-weight: 500; line-height: 1.4; }
.od-chat__title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--od-brand); }
.od-chat__close { display: grid; place-items: center; width: 40px; height: 40px; color: var(--od-white); transition: color 0.2s; }
.od-chat__close:hover { color: var(--od-brand); }
.od-chat__close svg { width: 20px; height: 20px; }
.od-chat__close:focus-visible { outline-offset: -2px; }
.od-chat__body { display: flex; flex-direction: column; gap: 16px; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.od-chat__bubble {
	align-self: flex-start; max-width: 300px; padding: 12px 16px;
	background: var(--od-grey-40); font-size: var(--od-fs-b4); line-height: 1.6; color: var(--od-grey-800);
}
.od-chat__label { font-size: var(--od-fs-b5); font-weight: 500; line-height: 1.6; color: var(--od-grey-500); }
.od-chat__choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.od-chat__choice {
	display: inline-flex; align-items: center; min-height: 36px; padding: 5px 14px;
	border: 1px solid var(--od-grey-200); border-radius: 100px;
	font-size: var(--od-fs-b4); font-weight: 500; line-height: 1.5; color: var(--od-black);
	transition: border-color 0.2s, color 0.2s;
}
.od-chat__choice:hover { border-color: var(--od-brand); color: var(--od-brand); }
.od-chat__choice:focus-visible, .od-chat__link:focus-visible { outline-offset: 2px; }
.od-chat__form {
	display: flex; align-items: center; gap: 12px; flex: none;
	margin: 0 20px; border-bottom: 1px solid var(--od-grey-200); transition: border-color 0.2s;
}
.od-chat__form:focus-within { border-bottom-color: var(--od-brand); }
.od-chat__input {
	flex: 1 1 0; min-width: 0; padding: 12px 0; margin: 0;
	border: 0; border-radius: 0; background: transparent; appearance: none; -webkit-appearance: none;
	font-size: 16px; line-height: 1.6; color: var(--od-black);
}
.od-chat__input::placeholder { color: var(--od-grey-300); opacity: 1; }
.od-chat__input:focus { outline: 0; }
.od-chat__send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--od-brand); transition: transform 0.25s var(--od-ease); }
.od-chat__send:hover { transform: translateX(4px); }
.od-chat__send svg { width: 24px; height: 24px; }
.od-chat__direct { flex: none; padding: 16px 20px 20px; }
.od-chat__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; }
.od-chat__link {
	display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px;
	border: 1px solid var(--od-grey-200);
	font-size: var(--od-fs-b5); font-weight: 500; line-height: 1.3; text-align: center; color: var(--od-black);
	transition: border-color 0.2s, color 0.2s;
}
.od-chat__link:hover { border-color: var(--od-brand); color: var(--od-brand); }
.od-chat__link svg { width: 22px; height: 22px; color: var(--od-brand); }

/* ---------- Back to top ---------- */
.od-top {
	position: fixed; right: calc(var(--od-w-edge) + (var(--od-w-launcher) - 44px) / 2);
	bottom: calc(var(--od-w-bottom) + var(--od-w-launcher) + 12px); z-index: 91;
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--od-white); color: var(--od-black); border: 1px solid var(--od-grey-200);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 0.25s var(--od-ease), transform 0.25s var(--od-ease), visibility 0s linear 0.25s, border-color 0.2s, color 0.2s;
}
.od-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.od-top:hover { border-color: var(--od-brand); color: var(--od-brand); }
.od-top svg { width: 22px; height: 22px; }
.od-chat-open .od-top { opacity: 0; visibility: hidden; }

/* ---------- Cookie consent ---------- */
.od-consent {
	position: fixed; left: var(--od-w-edge); bottom: var(--od-w-bottom); z-index: 90;
	display: flex; flex-direction: column; gap: 16px;
	width: 420px; max-width: calc(100vw - 2 * var(--od-w-edge) - var(--od-w-launcher) - 12px);
	padding: 20px; background: var(--od-white); color: var(--od-black);
	border: 1px solid var(--od-grey-200); box-shadow: var(--od-w-shadow);
}
.od-consent__text { font-size: var(--od-fs-b4); line-height: 1.6; color: var(--od-grey-600); }
.od-consent__text a { color: var(--od-black); font-weight: 500; text-decoration: underline; text-decoration-color: var(--od-brand); text-underline-offset: 0.25em; }
.od-consent__text a:hover { color: var(--od-brand); }
.od-consent__actions { display: flex; gap: 8px; }
.od-consent__button {
	flex: 1 1 0; min-height: 44px; padding: 8px 16px;
	background: var(--od-black); color: var(--od-white); border: 1px solid var(--od-black);
	font-size: var(--od-fs-b4); font-weight: 500; line-height: 1.5;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.od-consent__button:hover { background: var(--od-brand); border-color: var(--od-brand); }
.od-consent__button--ghost { background: transparent; color: var(--od-black); border-color: var(--od-grey-200); }
.od-consent__button--ghost:hover { background: transparent; border-color: var(--od-brand); color: var(--od-brand); }
.od-consent__button:focus-visible { outline-offset: 2px; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
	.od-chat__panel { left: 12px; right: 12px; width: auto; max-width: none; }
	.od-chat__body { padding: 16px; }
	.od-chat__form { margin: 0 16px; }
	.od-chat__direct { padding: 14px 16px 16px; }
	.od-chat__links { gap: 6px; }
	.od-consent { gap: 12px; padding: 14px; }
	.od-consent__button { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.od-chat__panel, .od-top, .od-chat__launcher, .od-chat__launcher svg, .od-chat__send { transition: none; transform: none; }
}
@media print {
	.od-chat, .od-top, .od-consent { display: none !important; }
}
@media (max-width: 600px) {
	.od-chat-open .od-consent { visibility: hidden; }
}