/*
 * Einna contact dock (2.3.0; launcher skin 2.4.0; WhatsApp hover 2.5.0). Loaded only when the dock is active.
 *
 * Every colour and layer is a custom property on .einna-dock so a host theme
 * can remap it with a more specific selector (e.g. `body .einna-dock{…}`).
 * Inline style on the root carries the Settings → Einna values
 * (--einna-dock-bg/-fg/-bg-open, --einna-dock-bg-hover when set, and the
 * offsets as --einna-dock-x-set/-y-set so a media query can cap them).
 *
 * Position and layer per state — one explicit selector each (order matters):
 *   chat, no JS                .einna-dock[data-einna-dock-mode=chat]:not(.is-ready)        band   --einna-dock-z
 *   chat, head script ran      html.einna-js .einna-dock[data-einna-dock-mode=chat]:not(.is-local) band --einna-dock-z-live
 *   chat, waiting / live       .einna-dock[data-einna-dock-mode=chat].is-ready:not(.is-local) band  --einna-dock-z-live
 *   chat fallback, silent chat .einna-dock.is-local.is-local-beside                          band   --einna-dock-z-live
 *   local beside the chat      .einna-dock.einna-dock--beside-chat                           band   --einna-dock-z-live
 *   local / no-iframe fallback .einna-dock.is-local:not(…), [data-einna-dock-mode=local]:not(…) corner --einna-dock-z
 * "band" = left of the chat launcher (--einna-dock-clear) and under the chat
 * window (--einna-dock-bottom), so the pill never covers the chat or its X.
 */

.einna-dock{
	--einna-dock-z:9990;
	--einna-dock-z-live:2147483647;
	--einna-dock-clear:96px;
	--einna-dock-bottom:20px;
	--einna-dock-pill-bg:rgba(17,24,39,.85);
	--einna-dock-pill-border:rgba(255,255,255,.14);
	--einna-dock-btn-fg:#f9fafb;
	--einna-dock-btn-border:rgba(255,255,255,.18);
	--einna-dock-shadow:0 10px 26px rgba(0,0,0,.35);
	--einna-dock-bg-hover:var(--einna-dock-bg);
	--einna-dock-focus:currentColor;
	--einna-dock-focus-toggle:#fff;
	--einna-dock-x:var(--einna-dock-x-set,18px);
	--einna-dock-y:var(--einna-dock-y-set,18px);
	position:fixed;bottom:var(--einna-dock-y);z-index:var(--einna-dock-z);
	display:flex;align-items:center;gap:10px;
	margin:0;padding:0;line-height:1;font-size:16px;
}
.einna-dock,.einna-dock *,.einna-dock *::before,.einna-dock *::after{box-sizing:border-box}
.einna-dock--right{right:var(--einna-dock-x);flex-direction:row-reverse}
.einna-dock--left{left:var(--einna-dock-x);flex-direction:row}

/* ── Toggle (local mode and the chat fallback only) ───────────────── */
.einna-dock__toggle{
	display:none;position:relative;flex:0 0 54px;width:54px;height:54px;margin:0;padding:0;
	align-items:center;justify-content:center;border:0;border-radius:50%;
	background:var(--einna-dock-bg,#1f2937);color:var(--einna-dock-fg,#fff);
	box-shadow:var(--einna-dock-shadow);cursor:pointer;-webkit-appearance:none;appearance:none;
	transition:background-color .2s ease,transform .2s ease;
}
.einna-dock.is-ready.is-local .einna-dock__toggle{display:inline-flex}
.is-on .einna-dock__toggle{background:var(--einna-dock-bg-open,var(--einna-dock-bg,#1f2937))}
.einna-dock__toggle:hover{background:var(--einna-dock-bg-hover)}
.einna-dock__i{display:inline-flex;width:24px;height:24px}
.einna-dock__i--open{display:none}
.einna-dock.is-on .einna-dock__i--closed{display:none}
.einna-dock.is-on .einna-dock__i--open{display:inline-flex}
.einna-dock__svg{display:block;width:100%;height:100%}

/* ── Launcher skin (2.4.0, chat mode, opt-in) ─────────────────────────
   Painted over E-INNA's launcher. A child of the root, so it shares the root's
   --einna-dock-z-live layer (2147483647) and paints above the iframe, which is
   lowered to 2147483646 below. position:fixed against the VIEWPORT (the root
   has no transform) — it must not follow --einna-dock-x/-y or the ≤820px caps,
   because E-INNA's button does not. pointer-events:none: the click lands on
   E-INNA's real button underneath.
   Geometry measured 2026-10-06 on a live site (frame portal.einna.net/chat/…):
   BUBBLE button 56×56 at 24px from the right/bottom edges, circle
   (ChatBubbleLauncher.tsx `fixed bottom-6 right-6 h-14 w-14`); MASCOT 80×80 at
   8px (`fixed bottom-2 right-2 h-20 w-20`). The skin bleeds 1px past the button
   on every side (58@23 / 82@7) so E-INNA's antialiased rim never shows. */
.einna-dock{--einna-dock-skin-size:58px;--einna-dock-skin-inset:23px}
.einna-dock--skin-mascot{--einna-dock-skin-size:82px;--einna-dock-skin-inset:7px}
.einna-dock__skin{
	display:none;position:fixed;right:var(--einna-dock-skin-inset);bottom:var(--einna-dock-skin-inset);
	width:var(--einna-dock-skin-size);height:var(--einna-dock-skin-size);margin:0;padding:0;
	align-items:center;justify-content:center;border-radius:50%;pointer-events:none;
	background:var(--einna-dock-bg,#1f2937);color:var(--einna-dock-fg,#fff);box-shadow:var(--einna-dock-shadow);
	transition:background-color .2s ease;
}
/* Shown from FIRST PAINT (2.4.1) whenever the head script ran (html.einna-js):
   the visitor sees the site's button at once, never E-INNA's launcher first.
   Still shown once the chat is live, so a page where einna-js was dropped at
   `load` (dock script held back) gets the skin as soon as the chat talks.
   Hidden after the fallback (.is-local): our own toggle takes over with the
   same colours. */
html.einna-js .einna-dock--skin[data-einna-dock-mode=chat]:not(.is-local) .einna-dock__skin,
.einna-dock--skin[data-einna-dock-mode=chat].is-live:not(.is-local) .einna-dock__skin{display:inline-flex}
.einna-dock.is-on .einna-dock__skin{background:var(--einna-dock-bg-open,var(--einna-dock-bg,#1f2937))}
/* E-INNA's own focus ring is under the skin: draw the toggle's two-tone ring
   when the iframe holds keyboard focus (einna-dock.js sets .is-skin-focus). */
.einna-dock.is-skin-focus .einna-dock__skin{outline:3px solid var(--einna-dock-focus-toggle);outline-offset:3px;box-shadow:0 0 0 6px #111}

/* Two-tone toggle ring: a #111 band 0–3px out, the outline 3–6px out — one of
   the two clears 3:1 on any page colour. Links keep currentColor: their ring
   sits on the pill's own dark fill. */
.einna-dock__btn:focus-visible{outline:3px solid var(--einna-dock-focus);outline-offset:3px}
.einna-dock__toggle:focus-visible{outline:3px solid var(--einna-dock-focus-toggle);outline-offset:3px;box-shadow:0 0 0 6px #111}

/* ── Pill ────────────────────────────────────────────────────────── */
.einna-dock__list{
	display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;
	margin:0;padding:7px 10px;border:1px solid var(--einna-dock-pill-border);border-radius:999px;
	background:var(--einna-dock-pill-bg);box-shadow:var(--einna-dock-shadow);
	max-width:calc(100vw - 2*var(--einna-dock-x) - 64px);overflow-x:auto;overscroll-behavior-x:contain;
	scrollbar-width:none;
	transition:opacity .2s ease,transform .2s ease,visibility 0s linear 0s;
}
.einna-dock__list::-webkit-scrollbar{display:none}
.einna-dock__btn{
	position:relative;display:inline-flex;align-items:center;justify-content:center;
	flex:0 0 42px;width:42px;height:42px;margin:0;padding:0;
	border:1px solid var(--einna-dock-btn-border);border-radius:50%;
	background:transparent;color:var(--einna-dock-btn-fg);text-decoration:none;
	scroll-snap-align:start;
	transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.einna-dock__btn .einna-dock__svg{width:20px;height:20px}
.einna-dock__btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);color:var(--einna-dock-btn-fg)}
/* Generic brand hovers — the channels' own brands, not a site brand. */
.einna-dock__btn--facebook:hover,.einna-dock__btn--messenger:hover{background:#1877f2;border-color:#1877f2;color:#fff}
.einna-dock__btn--youtube:hover{background:#ff0033;border-color:#ff0033;color:#fff}
.einna-dock__btn--instagram:hover{background:#c13584;border-color:#c13584;color:#fff}
.einna-dock__btn--tiktok:hover{background:#fff;border-color:#fff;color:#000}
.einna-dock__btn--zalo:hover{background:#0068ff;border-color:#0068ff;color:#fff}
/* WhatsApp (2.5.0): white on #25d366 is 1.98:1, black 10.59:1 — dark ink, as for tiktok. */
.einna-dock__btn--whatsapp:hover{background:#25d366;border-color:#25d366;color:#000}
.einna-dock__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Collapsed (JS ran, not open): hidden and out of the tab order (+ inert in JS),
   sliding 10px towards the toggle. With no JS the pill simply stays visible. */
.einna-dock.is-ready:not(.is-on) .einna-dock__list,
html.einna-js .einna-dock:not(.is-on) .einna-dock__list{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.einna-dock--right.is-ready:not(.is-on) .einna-dock__list,
html.einna-js .einna-dock--right:not(.is-on) .einna-dock__list{transform:translateX(10px)}
.einna-dock--left.is-ready:not(.is-on) .einna-dock__list,
html.einna-js .einna-dock--left:not(.is-on) .einna-dock__list{transform:translateX(-10px)}

/* First paint with JS (2.4.1). The head script adds html.einna-js before the
   body is parsed, so the states einna-dock.js will set apply from the first
   frame instead of after a visible no-JS → JS switch:
   - the pill is collapsed (above);
   - local mode shows its toggle;
   - chat mode sits in the band at --einna-dock-z-live, so the skin (a child of
     the root) paints above the chat iframe from the moment it is injected.
   html.einna-dock-init (also from the head script, removed by einna-dock.js
   two frames after it initialises) suppresses every transition, so nothing
   animates on load; user-triggered open/close still animates. */
html.einna-js .einna-dock[data-einna-dock-mode=local] .einna-dock__toggle{display:inline-flex}
html.einna-js .einna-dock[data-einna-dock-mode=chat]:not(.is-local){right:var(--einna-dock-clear);bottom:var(--einna-dock-bottom);z-index:var(--einna-dock-z-live)}
html.einna-dock-init .einna-dock,
html.einna-dock-init .einna-dock *{transition:none!important}

/* ── Position and layer per state (see header) ───────────────────── */
.einna-dock[data-einna-dock-mode=chat]:not(.is-ready){right:var(--einna-dock-clear);bottom:var(--einna-dock-bottom);z-index:var(--einna-dock-z)}
.einna-dock[data-einna-dock-mode=chat].is-ready:not(.is-local){right:var(--einna-dock-clear);bottom:var(--einna-dock-bottom);z-index:var(--einna-dock-z-live)}
.einna-dock.is-local.is-local-beside{right:var(--einna-dock-clear);bottom:var(--einna-dock-bottom);z-index:var(--einna-dock-z-live)}
.einna-dock.einna-dock--beside-chat{right:var(--einna-dock-clear);bottom:var(--einna-dock-bottom);z-index:var(--einna-dock-z-live)}
.einna-dock.is-local:not(.is-local-beside):not(.einna-dock--beside-chat),
.einna-dock[data-einna-dock-mode=local]:not(.einna-dock--beside-chat){bottom:var(--einna-dock-y);z-index:var(--einna-dock-z)}

/* In the band the pill must stop short of the launcher area; with our toggle
   beside it, also leave room for the toggle. */
.einna-dock[data-einna-dock-mode=chat] .einna-dock__list,
.einna-dock.einna-dock--beside-chat .einna-dock__list{max-width:calc(100vw - var(--einna-dock-clear) - 12px)}
.einna-dock.is-local .einna-dock__list{max-width:calc(100vw - 2*var(--einna-dock-x) - 64px)}
.einna-dock.is-local.is-local-beside .einna-dock__list,
.einna-dock.einna-dock--beside-chat.is-ready .einna-dock__list{max-width:calc(100vw - var(--einna-dock-clear) - 76px)}

/* The chat iframe one below the dock while they share a corner. The class is
   on <html> from the wp_head script (2.4.1, before the iframe can exist) and on
   <body> from PHP; einna-dock.js adds it to <html> again for pages where the
   head script did not run.
   A host !important beats the loader's non-important inline z-index. */
:is(html,body).einna-dock-chat #einna-chatbox-iframe{z-index:2147483646!important}

/* ── ≤820px ──────────────────────────────────────────────────────── */
@media(max-width:820px){
	.einna-dock{--einna-dock-x:min(var(--einna-dock-x-set,18px),12px);--einna-dock-y:min(var(--einna-dock-y-set,18px),12px)}

	/* Local mode (JS or no JS) and the chat fallback: toggle at the bottom,
	   two-column grid above it. */
	.einna-dock.is-local,
	.einna-dock[data-einna-dock-mode=local]{flex-direction:column-reverse;align-items:flex-end}
	.einna-dock--left.is-local,
	.einna-dock--left[data-einna-dock-mode=local]{align-items:flex-start}
	.einna-dock.is-local .einna-dock__list,
	.einna-dock[data-einna-dock-mode=local] .einna-dock__list{display:grid;grid-template-columns:repeat(2,42px);border-radius:26px;max-width:none;overflow:visible}
	.einna-dock.is-local .einna-dock__toggle,
	html.einna-js .einna-dock[data-einna-dock-mode=local] .einna-dock__toggle{flex-basis:48px;width:48px;height:48px}
	.einna-dock--right.is-local.is-ready:not(.is-on) .einna-dock__list,
	.einna-dock--left.is-local.is-ready:not(.is-on) .einna-dock__list{transform:translateY(10px)}

	/* Live chat mode: one horizontally scrolling row, ≤58px tall, so it never
	   grows into the chat window that starts 96px above the bottom. */
	.einna-dock[data-einna-dock-mode=chat].is-ready:not(.is-local) .einna-dock__list{overflow-x:auto;scroll-snap-type:x mandatory;max-width:calc(100vw - var(--einna-dock-clear) - 12px)}
	.einna-dock[data-einna-dock-mode=chat].is-ready:not(.is-local) .einna-dock__btn{width:40px;height:40px;flex:0 0 40px}

	/* Local mode beside the chat — never the grid (the pill and the chat
	   window can be open together). AFTER the is-local block on purpose:
	   equal specificity, so source order makes this win. */
	.einna-dock.einna-dock--beside-chat{flex-direction:row-reverse;align-items:center}
	.einna-dock.einna-dock--beside-chat .einna-dock__list{
		display:flex;grid-template-columns:none;border-radius:999px;
		overflow-x:auto;scroll-snap-type:x mandatory;
		max-width:calc(100vw - var(--einna-dock-clear) - 12px)}
	.einna-dock.einna-dock--beside-chat .einna-dock__btn{width:40px;height:40px;flex:0 0 40px}
	.einna-dock.einna-dock--beside-chat.is-ready .einna-dock__list{max-width:calc(100vw - var(--einna-dock-clear) - 70px)}
	.einna-dock--right.einna-dock--beside-chat.is-ready:not(.is-on) .einna-dock__list{transform:translateX(10px)}
	/* same row for the no-JS chat row, which also sits in the band */
	.einna-dock[data-einna-dock-mode=chat]:not(.is-ready){flex-direction:row-reverse}
	.einna-dock[data-einna-dock-mode=chat]:not(.is-ready) .einna-dock__list{
		display:flex;grid-template-columns:none;border-radius:999px;
		overflow-x:auto;scroll-snap-type:x mandatory;
		max-width:calc(100vw - var(--einna-dock-clear) - 12px)}
	.einna-dock[data-einna-dock-mode=chat]:not(.is-ready) .einna-dock__btn{width:40px;height:40px;flex:0 0 40px}
}

@media(prefers-reduced-motion:reduce){
	.einna-dock__toggle,.einna-dock__list,.einna-dock__btn,.einna-dock__skin{transition:none!important}
	.einna-dock__btn:hover,
	.einna-dock.is-ready:not(.is-on) .einna-dock__list,
	html.einna-js .einna-dock:not(.is-on) .einna-dock__list{transform:none!important}
}