/*
 * FleetDesk chat widget.
 *
 * Palette is taken from the existing storefront, not invented: #0D0B68 is the
 * plugin's deep navy and #0275ea its action blue (both already the most-used
 * colours in frontend.css). font-family:inherit throughout so the widget picks
 * up the site's brand face rather than shipping its own.
 *
 * Everything is scoped under .fr-chat and every property is explicit — an
 * Elementor theme will otherwise reach in and restyle buttons, inputs and
 * textareas from its own global rules.
 *
 * ⚠️ THE BRAND NAVY IS A TOKEN, NOT A LITERAL. The plugin ships BYTE-IDENTICAL
 * to vaikebussirent24.ee and aaarent.ee, so "a different colour on AAA only"
 * can never be a second copy of this file. FR_Chat_Widget::enqueue() overrides
 * --fr-chat-brand per site with wp_add_inline_style().
 *
 * ⚠️ TWO tokens, and they must be kept in step: the box-shadows need the SAME
 * navy as an rgb triplet, because rgba() cannot take a hex var. Change one
 * without the other and the panel glows in the OLD brand colour — visible on a
 * light page, and the exact kind of half-done restyle nobody notices in review.
 */

.fr-chat{position:fixed;right:18px;bottom:18px;z-index:99999;font-family:inherit;line-height:1.45;
	--fr-chat-brand:#0D0B68;--fr-chat-brand-rgb:13,11,104;}

/* ---- launcher ---------------------------------------------------------- */
/* ⚠️ !important throughout, and the selector is doubled for specificity.
   This is a <button> dropped into somebody else's theme: Elementor and the
   VBR24 stylesheet both style bare `button` with their own padding and corner
   radius, and they won a normal single-class rule — the launcher rendered as a
   66px rounded SQUARE instead of a 56px circle. Width/height/padding are all
   pinned because a theme adding padding is what changed the measured size, and
   box-sizing alone cannot save a circle once padding lands. */
.fr-chat .fr-chat-fab,
.fr-chat button.fr-chat-fab{position:relative!important;display:flex!important;
	align-items:center!important;justify-content:center!important;
	width:56px!important;height:56px!important;min-width:0!important;max-width:none!important;
	min-height:0!important;max-height:none!important;
	border-radius:50%!important;border:0!important;padding:0!important;margin:0!important;
	background:var(--fr-chat-brand)!important;color:#fff!important;cursor:pointer;
	box-shadow:0 6px 22px rgba(var(--fr-chat-brand-rgb),.32);
	font-size:0!important;line-height:0!important;text-transform:none!important;
	transition:transform .16s ease, box-shadow .16s ease;}
.fr-chat-fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--fr-chat-brand-rgb),.4);}
.fr-chat-fab:focus-visible{outline:3px solid #0275ea;outline-offset:3px;}

/* Unread marker: staff replied while the panel was shut. */
.fr-chat-dot{position:absolute;top:11px;right:11px;width:11px;height:11px;border-radius:50%;
	background:#e5484d;border:2px solid var(--fr-chat-brand);}

/* ---- panel ------------------------------------------------------------- */
.fr-chat-panel{position:absolute;right:0;bottom:70px;width:352px;max-width:calc(100vw - 32px);
	display:flex;flex-direction:column;overflow:hidden;
	background:#fff;border:1px solid #e3e5ee;border-radius:14px;
	box-shadow:0 18px 50px rgba(16,22,48,.22);}
.fr-chat-panel[hidden]{display:none;}

.fr-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
	padding:14px 16px;background:var(--fr-chat-brand);color:#fff;}
.fr-chat-head strong{display:block;font-size:.95rem;font-weight:600;}
.fr-chat-sub{display:block;font-size:.78rem;opacity:.75;margin-top:2px;}
.fr-chat-x{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
	padding:0 2px;opacity:.8;}
.fr-chat-x:hover{opacity:1;}

/* Fixed height so the panel does not jump as messages arrive. */
.fr-chat-body{height:320px;max-height:52vh;overflow-y:auto;padding:14px;background:#f7f8fb;}
.fr-chat-empty{color:#6a6a76;font-size:.85rem;text-align:center;padding:26px 10px;}

.fr-chat-msg{display:flex;margin-bottom:8px;}
.fr-chat-msg.me{justify-content:flex-end;}
.fr-chat-bubble{max-width:78%;padding:9px 12px;border-radius:14px;font-size:.88rem;
	background:#fff;color:#16162e;border:1px solid #e6e8f0;
	/* A pasted booking reference or URL must not blow the panel open. */
	overflow-wrap:anywhere;}
.fr-chat-msg.me .fr-chat-bubble{background:#0275ea;color:#fff;border-color:#0275ea;}

.fr-chat-err{margin:6px 0 0;padding:7px 10px;border-radius:8px;font-size:.8rem;
	background:#fbeaea;color:#b32020;}

/* ---- typing indicator ---------------------------------------------------- */
/* Three dots in a normal reply bubble while an answer is outstanding. The bot
   answers off-request (a live quote, sometimes an AI round trip), so a few
   seconds of silence is normal — this makes the wait read as "someone is
   typing" rather than "nothing happened". */
.fr-chat-typing{display:inline-flex;align-items:center;gap:4px;padding:11px 12px;}
.fr-chat-typing span{width:6px;height:6px;border-radius:50%;background:#9aa0ad;
	animation:fr-chat-blink 1.3s infinite ease-in-out both;}
.fr-chat-typing span:nth-child(2){animation-delay:.18s;}
.fr-chat-typing span:nth-child(3){animation-delay:.36s;}
@keyframes fr-chat-blink{0%,80%,100%{opacity:.25;transform:translateY(0);}
	40%{opacity:1;transform:translateY(-2px);}}
/* Someone who has asked for less motion still needs to see it is working. */
@media (prefers-reduced-motion:reduce){
	.fr-chat-typing span{animation:none;opacity:.55;}
}

/* ---- WhatsApp hand-off -------------------------------------------------- */
.fr-chat-wa{display:flex;align-items:center;justify-content:center;gap:7px;
	padding:9px 12px;border-top:1px solid #edeff5;
	background:#f2fbf4;color:#1f6f33 !important;text-decoration:none !important;
	font-size:.82rem;font-weight:500;}
.fr-chat-wa:hover{background:#e9f6ec;}

/* ---- composer ----------------------------------------------------------- */
.fr-chat-form{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid #edeff5;background:#fff;}
.fr-chat-input{flex:1;resize:none;min-height:38px;max-height:120px;
	padding:9px 11px;border:1px solid #d5d5d5;border-radius:10px;
	font-family:inherit;font-size:.88rem;line-height:1.4;color:#16162e;background:#fff;}
.fr-chat-input:focus{outline:0;border-color:#0275ea;box-shadow:0 0 0 3px rgba(2,117,234,.15);}
.fr-chat .fr-chat-send,
.fr-chat button.fr-chat-send{display:flex!important;align-items:center!important;
	justify-content:center!important;flex:0 0 auto;
	width:38px!important;height:38px!important;min-width:0!important;
	border:0!important;border-radius:10px!important;padding:0!important;margin:0!important;
	background:#0275ea!important;color:#fff!important;cursor:pointer;
	font-size:0!important;line-height:0!important;}
.fr-chat-send:hover{background:#0166cc;}
.fr-chat-send:focus-visible{outline:3px solid var(--fr-chat-brand);outline-offset:2px;}

/* ---- small screens ------------------------------------------------------ */
@media (max-width:480px){
	.fr-chat{right:12px;bottom:12px;}
	/* Anchor to the viewport, not the launcher, so the panel cannot end up
	   partly off-screen on a short phone. */
	.fr-chat-panel{position:fixed;right:12px;left:12px;bottom:78px;width:auto;max-width:none;}
	.fr-chat-body{height:auto;max-height:46vh;}
}

@media (prefers-reduced-motion:reduce){
	.fr-chat-fab{transition:none;}
	.fr-chat-fab:hover{transform:none;}
}