/**
 * Digii Website Chatbot — styles
 *
 * Independent overlay: every selector is scoped under #digii-chatbot-root
 * so nothing here can leak into or be affected by the existing site theme.
 *
 * IMPORTANT — specificity note (found during QA on the live Digiicampus
 * theme, "Hello Elementor"): that theme's reset.css ships a sitewide
 * `[type="button"], [type="submit"], button { color: ...; border-radius:
* 3px; ... }` rule. Because our buttons (correctly) carry type="button",
 * the theme's `[type="button"]` attribute selector has the SAME
 * specificity as a bare class selector like `.digii-pill`, and — being
 * enqueued later in the page — wins the cascade tie. Every selector below
 * is therefore written as `#digii-chatbot-root .foo` (ID + class) rather
 * than `.foo` alone, which outranks any class/attribute/element selector
 * a host theme or plugin could throw at it, regardless of load order.
 * Do not "simplify" these back to bare class selectors.
 */

#digii-chatbot-root {
  	/* Sampled directly from the live site, not invented. Navy (section/
  	   announcement-bar background) is rgb(12,0,60) on the venue-booking
  	   page and rgb(11,8,56) on the production careers page — the same
  	   brand navy within rounding, so one value is kept. Red was
  	   re-checked against https://digiicampus.com/careers/ specifically
  	   (per request): its header "Open roles" CTA and in-page buttons all
  	   use rgb(230,0,0), so that's the value here now (previously a
  	   slightly-off rgb(255,0,0) sampled from a different page/button).
  	   Keep these in sync with the live site's palette rather than
  	   picking new brand colors here. */
  	--digii-navy: #0c003c;
  	--digii-navy-2: #130060;
  	--digii-red: #e60000;
  	--digii-red-dark: #cc0000;
  	--digii-grey-bubble: #f1f1f4;
  	--digii-text: #1d1a2e;
  	--digii-text-muted: #6b6878;
  	--digii-white: #ffffff;
  	--digii-border: #e7e6ec;
  	--digii-radius: 18px;
  	--digii-shadow: 0 12px 32px rgba(21, 18, 58, 0.18);
  	/* Tracks the panel's current width so the "beside panel" launcher
  	   position (below) can stay in sync with it at every breakpoint
  	   instead of duplicating the number in two places. */
  	--digii-panel-w: 320px;
  	--digii-side-gap: 20px;
  	all: initial;
  	/* "Digii fonts" (Mark Pro) is the brand typeface, already loaded
  	   site-wide by an @font-face rule the active theme enqueues on every
  	   page (confirmed on both the production and QA careers pages — each
  	   host serves its own copy of the same MarkPro*.woff2 files from its
  	   own uploads folder). We deliberately do NOT re-declare @font-face
  	   or hardcode either host's font URL here: since this widget only
  	   ever runs embedded on pages of this same site, it can just reuse
  	   the family name the theme has already loaded, with zero extra
  	   network requests and no QA-vs-production URL to keep in sync. The
  	   system-font stack remains as a fallback for the rare case the
  	   theme's font hasn't loaded yet or isn't present.
  	*/
  	font-family: "Digii fonts", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  	font-size: 15px;
  	line-height: 1.45;
  	color: var(--digii-text);
  	box-sizing: border-box;
}

#digii-chatbot-root *,
#digii-chatbot-root *::before,
#digii-chatbot-root *::after {
  	box-sizing: border-box;
  	font-family: inherit;
}

/* Defensive reset for every interactive element, beating the host theme's
   own [type="button"]/button/a resets via ID-level specificity. */
#digii-chatbot-root button,
#digii-chatbot-root input,
#digii-chatbot-root a {
  	cursor: pointer;
  	border: none;
  	outline: none;
  	background: none;
  	font-family: inherit;
  	font-size: inherit;
  	line-height: inherit;
  	color: inherit;
  	border-radius: 0;
  	text-decoration: none;
  	box-shadow: none;
  	-webkit-appearance: none;
  	appearance: none;
}

#digii-chatbot-root a:hover,
#digii-chatbot-root a:focus,
#digii-chatbot-root button:hover,
#digii-chatbot-root button:focus {
  	text-decoration: none;
}

/* The host theme's own reset.css adds a background-color + color change
   on BOTH :hover and :focus for every button/[type="button"] (its brand
   pink, rgb(204,51,102)). Our earlier fix only neutralized :hover per
   component; on a real phone, tapping a button fires :focus (not
   :hover), so that theme rule still applied unopposed and the close/
   restart icon buttons flashed solid pink on tap. This blanket reset
   kills the theme's background/color on :focus and :active for every
   element here, at the same ID-scoped specificity as the base reset
   above, so each component's own :hover/:focus style (below) is what
   actually shows, never the theme's. */
#digii-chatbot-root button:focus,
#digii-chatbot-root button:active,
#digii-chatbot-root a:focus,
#digii-chatbot-root a:active {
  	background: none;
  	color: inherit;
}

/* ---------------------------------------------------------------- */
/* Floating launcher (desktop: simple circular button, bottom-right) */
/* ---------------------------------------------------------------- */

#digii-chatbot-root .digii-launcher {
  	position: fixed;
  	right: 20px;
  	bottom: 20px;
  	z-index: 999999;
  	width: 58px;
  	height: 58px;
  	border-radius: 50%;
  	background: var(--digii-red);
  	color: var(--digii-white);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	box-shadow: var(--digii-shadow);
  	transition: transform 0.15s ease;
}

#digii-chatbot-root .digii-launcher:hover,
#digii-chatbot-root .digii-launcher:focus {
  	transform: scale(1.05);
  	background: var(--digii-red);
}

/* While the panel is open (desktop/tablet only — see the mobile launcher
   rules below), the round launcher button slides to sit immediately to
   the LEFT of the open chat box instead of underneath it, so it stays
   visible beside the conversation as a one-click close/minimize target. */
#digii-chatbot-root .digii-launcher--desktop.is-beside-panel {
  	right: calc(var(--digii-side-gap) + var(--digii-panel-w) + 12px);
  	bottom: 20px;
}

#digii-chatbot-root .digii-launcher svg {
  	width: 26px;
  	height: 26px;
}

/* ------------------------------------------------------------------ */
/* Mobile: persistent slim bottom bar (CTA pill + red launcher button) */
/* ------------------------------------------------------------------ */

#digii-chatbot-root .digii-mobile-bar {
  	position: fixed;
  	left: 0;
  	right: 0;
  	/* --digii-vv-bottom-gap (set in JS via the VisualViewport API) is the
  	   space an open on-screen keyboard currently covers at the bottom of
  	   the layout viewport this is `fixed` to; adding it keeps the bar
  	   pinned above the keyboard instead of hidden underneath it. It's
  	   0px whenever no keyboard is open (or in browsers without the API),
  	   so this is a no-op the rest of the time. */
  	bottom: var(--digii-vv-bottom-gap, 0px);
  	z-index: 999998;
  	display: none;
  	gap: 10px;
  	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  	background: var(--digii-white);
  	border-top: 1px solid var(--digii-border);
  	box-shadow: 0 -4px 16px rgba(21, 18, 58, 0.08);
}

#digii-chatbot-root .digii-mobile-bar .digii-cta-pill {
  	flex: 1;
  	background: var(--digii-navy);
  	color: var(--digii-white);
  	border-radius: 999px;
  	padding: 12px 18px;
  	font-weight: 600;
  	font-size: 14px;
  	text-align: center;
  	text-decoration: none;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

#digii-chatbot-root .digii-mobile-bar .digii-cta-pill:hover,
#digii-chatbot-root .digii-mobile-bar .digii-cta-pill:focus {
  	background: var(--digii-navy-2);
  	color: var(--digii-white);
}

#digii-chatbot-root .digii-mobile-bar .digii-launcher {
  	position: static;
  	width: 46px;
  	height: 46px;
  	flex: 0 0 auto;
  	box-shadow: none;
}

@media (max-width: 680px) {
  #digii-chatbot-root .digii-mobile-bar { display: flex; }
  #digii-chatbot-root .digii-launcher--desktop { display: none; }
}

/* ---------------------------------------------------------------- */
/* Chat panel                                                        */
/* ---------------------------------------------------------------- */

#digii-chatbot-root .digii-panel {
  	position: fixed;
  	right: var(--digii-side-gap);
  	bottom: calc(86px + var(--digii-vv-bottom-gap, 0px));
  	z-index: 999999;
  	width: var(--digii-panel-w);
  	max-width: calc(100vw - 24px);
  	height: 460px;
  	max-height: calc(100vh - 110px);
  	background: var(--digii-white);
  	border-radius: var(--digii-radius);
  	box-shadow: var(--digii-shadow);
  	display: flex;
  	flex-direction: column;
  	overflow: hidden;
  	opacity: 0;
  	transform: translateY(16px) scale(0.98);
  	pointer-events: none;
  	transition: opacity 0.18s ease, transform 0.18s ease;
}

#digii-chatbot-root .digii-panel.is-open {
  	opacity: 1;
  	transform: translateY(0) scale(1);
  	pointer-events: auto;
}

/* Tablets (portrait iPad and similar: ~681px-1024px). Between phone and
   desktop, the floating desktop panel is kept but scaled down a touch
   further so it never crowds tablet-width viewports. */
@media (min-width: 681px) and (max-width: 1024px) {
  	#digii-chatbot-root {
      		--digii-side-gap: 20px;
  }
  
  	#digii-chatbot-root .digii-panel {
      		bottom: calc(82px + var(--digii-vv-bottom-gap, 0px));
      		/* Per request: 20px of left AND right spacing on tablet (was a
      		   narrow 300px box anchored only to the right, with no gap on the
      		   left). `left`/`right` both set with no explicit width makes the
      		   panel size itself to fill the space between them. */
      		left: var(--digii-side-gap);
      		right: var(--digii-side-gap);
      		width: auto;
      		max-width: none;
      		/* Single source of truth for sizing — see the matching, more
      		   heavily-commented mobile rule below for the full reasoning.
      		   `height: auto` + this one `max-height` is the only sizing rule
      		   now; there is no second competing height/max-height declaration
      		   to keep in sync. */
      		height: auto;
      		max-height: min(
              			calc(var(--digii-vvh, 100dvh) * 0.8),
              			calc(var(--digii-vvh, 100dvh) - 82px - var(--digii-vv-bottom-gap, 0px) - 8px)
              		);
  }
  
  	#digii-chatbot-root .digii-launcher--desktop {
      		right: 16px;
      		bottom: 16px;
  }
  
  	/* The panel now spans (almost) the full tablet width, so there's no
  	   room left of it for the round launcher to slide beside — it stays
  	   put and is simply hidden behind/under the panel while open instead
  	   (same idea as the mobile bar, just without a visible CTA strip). */
  	#digii-chatbot-root .digii-launcher--desktop.is-beside-panel {
      		display: none;
  }
}

@media (max-width: 680px) {
  	#digii-chatbot-root .digii-panel {
      		/* Per request: 10px of left AND right spacing on mobile (was
      		   edge-to-edge, flush with both screen edges). `width`/`max-width`
      		   are left to `auto`/`none` so the 10px `left`/`right` offsets are
      		   what actually sizes the panel, rather than a hardcoded 100%. */
      		right: 10px;
      		left: 10px;
      		width: auto;
      		max-width: none;
      		/* --digii-vv-bottom-gap (JS, via VisualViewport) is the space an
      		   open on-screen keyboard covers at the bottom of the layout
      		   viewport this is `fixed` to. Without it, the panel stayed
      		   "72px from the bottom" of the full, un-shrunk layout
      		   viewport/dvh (Android Chrome doesn't shrink those when the
      		   keyboard opens) — i.e. still mostly behind the keyboard —
      		   which is the bug: the header/messages ended up pushed off the
      		   top of the visible area, leaving only the input row visible
      		   just above the keyboard. 0px whenever no keyboard is open. */
      		bottom: calc(72px + var(--digii-vv-bottom-gap, 0px));
      		/* Single source of truth for sizing (previously three layered
      		   `height` fallbacks plus two layered `max-height` fallbacks —
      		   consolidated to one declaration each, so there's exactly one
      		   place to read/change the sizing logic):
      		   - `height: auto` — never a fixed/computed px height. The panel
      		     sizes to its content (greeting + quick replies + input), up to
      		     the cap below. This is also what kills the old "large empty
      		     area below the input" symptom: a computed height could land
      		     taller than the content needed, auto never does.
      		   - `max-height` — two bounds, the smaller one wins:
      		     1. 80% of the REAL visible viewport height. --digii-vvh is
      		        window.visualViewport.height, kept live by chatbot.js;
      		        unlike vh/dvh it actually shrinks when the on-screen
      		        keyboard opens (Android Chrome's default keyboard mode does
      		        NOT shrink vh/dvh), and also tracks mobile browser-chrome
      		        (address bar) changes. Falls back to 100dvh (then the
      		        browser's own vh if dvh is unknown) before that JS has run
      		        or on a browser without the VisualViewport API.
      		     2. the full remaining space above this panel's own `bottom`
      		        offset (72px + any keyboard/chrome gap), minus 8px of
      		        breathing room — a hard backstop so the panel can never be
      		        tall enough to push its own top off the visible screen,
      		        whatever the 80% figure above works out to.
      		   `overflow: hidden` on this element (already set above) plus
      `.digii-panel__body{overflow-y:auto}` below mean only the
      		   message list ever scrolls internally — the panel itself never
      		   grows past this cap, so it can't end up behind the keyboard,
      		   run off-screen, or overflow horizontally. */
      		height: auto;
      		max-height: min(
              			calc(var(--digii-vvh, 100dvh) * 0.8),
              			calc(var(--digii-vvh, 100dvh) - 72px - var(--digii-vv-bottom-gap, 0px) - 8px)
              		);
      		/* Now that it floats 10px off both edges instead of sitting flush
      		   against them, it reads as a floating card, so all four corners
      		   round the same as desktop/tablet (was top corners only, flat on
      		   the bottom, which suited the old edge-to-edge sheet look). */
      		border-radius: var(--digii-radius);
  }
}

#digii-chatbot-root .digii-panel__header {
  	display: flex;
  	align-items: center;
  	gap: 12px;
  	padding: 16px 16px;
  	background: var(--digii-white);
  	border-bottom: 1px solid var(--digii-border);
  	/* With the panel now `height: auto` + `max-height`-capped, the flex
  	   column can be forced to shrink when content doesn't fit. Without
  	   this, the header (a flex item with no explicit height) would be a
  	   candidate for the shrink algorithm right along with the message
  	   body, and could get visually squeezed. Pin it to its natural size
  	   always — only `.digii-panel__body` (flex: 1 1 auto, overflow-y:
  	   auto, below) is meant to absorb that pressure, via internal scroll. */
  	flex-shrink: 0;
}

#digii-chatbot-root .digii-panel__avatar {
  	flex: 0 0 auto;
  	width: 36px;
  	height: 36px;
  	border-radius: 10px;
  	background: var(--digii-red);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	color: var(--digii-white);
}

#digii-chatbot-root .digii-panel__avatar svg { width: 18px; height: 18px; }

#digii-chatbot-root .digii-panel__titles {
  	flex: 1 1 auto;
  	min-width: 0;
}

#digii-chatbot-root .digii-panel__title {
  	font-weight: 700;
  	font-size: 15px;
  	color: var(--digii-text);
  	margin: 0;
}

#digii-chatbot-root .digii-panel__subtitle {
  	font-size: 12px;
  	color: var(--digii-text-muted);
  	margin: 2px 0 0;
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

#digii-chatbot-root .digii-panel__actions { display: flex; gap: 4px; flex: 0 0 auto; }

#digii-chatbot-root .digii-icon-btn {
  	width: 28px;
  	height: 28px;
  	border-radius: 8px;
  	background: transparent;
  	color: var(--digii-text-muted);
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

#digii-chatbot-root .digii-icon-btn:hover,
#digii-chatbot-root .digii-icon-btn:focus { background: var(--digii-grey-bubble); color: var(--digii-text); }
#digii-chatbot-root .digii-icon-btn svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- */
/* Message stream                                                    */
/* ---------------------------------------------------------------- */

#digii-chatbot-root .digii-panel__body {
  	flex: 1 1 auto;
  	overflow-y: auto;
  	padding: 16px;
  	display: flex;
  	flex-direction: column;
  	gap: 10px;
  	background: var(--digii-white);
}

#digii-chatbot-root .digii-msg {
  	max-width: 86%;
  	padding: 10px 14px;
  	border-radius: 14px;
  	font-size: 14px;
  	word-wrap: break-word;
  	white-space: pre-wrap;
}

#digii-chatbot-root .digii-msg--bot {
  	align-self: flex-start;
  	background: var(--digii-grey-bubble);
  	color: var(--digii-text);
  	border-bottom-left-radius: 4px;
}

#digii-chatbot-root .digii-msg--user {
  	align-self: flex-end;
  	background: var(--digii-navy);
  	color: var(--digii-white);
  	border-bottom-right-radius: 4px;
}

#digii-chatbot-root .digii-msg--typing {
  	display: inline-flex;
  	gap: 4px;
  	padding: 12px 14px;
}
#digii-chatbot-root .digii-msg--typing span {
  	width: 6px; height: 6px; border-radius: 50%;
  	background: var(--digii-text-muted);
  	animation: digii-blink 1.2s infinite ease-in-out;
}
#digii-chatbot-root .digii-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
#digii-chatbot-root .digii-msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes digii-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

#digii-chatbot-root .digii-quick-replies {
  	align-self: flex-start;
  	display: flex;
  	flex-wrap: wrap;
  	gap: 8px;
  	max-width: 100%;
  	margin-top: 2px;
}

#digii-chatbot-root .digii-pill {
  	background: var(--digii-white);
  	border: 1px solid var(--digii-border);
  	color: var(--digii-text);
  	border-radius: 999px;
  	padding: 9px 14px;
  	font-size: 13px;
  	font-weight: 600;
  	text-align: left;
  	transition: border-color 0.15s ease, background 0.15s ease;
}

#digii-chatbot-root .digii-pill:hover,
#digii-chatbot-root .digii-pill:focus {
  	border-color: var(--digii-red);
  	background: #fff5f6;
  	color: var(--digii-text);
}

#digii-chatbot-root .digii-pill:disabled {
  	opacity: 0.5;
  	cursor: default;
}

#digii-chatbot-root .digii-cta-button {
  	align-self: flex-start;
  	display: inline-flex;
  	align-items: center;
  	gap: 6px;
  	background: var(--digii-red);
  	color: var(--digii-white);
  	border-radius: 999px;
  	padding: 10px 18px;
  	font-size: 13px;
  	font-weight: 700;
  	text-decoration: none;
  	margin-top: 2px;
}

#digii-chatbot-root .digii-cta-button:hover,
#digii-chatbot-root .digii-cta-button:focus {
  	background: var(--digii-red-dark);
  	color: var(--digii-white);
}

/* ---------------------------------------------------------------- */
/* Input row                                                          */
/* ---------------------------------------------------------------- */

#digii-chatbot-root .digii-panel__input-row {
  	display: flex;
  	align-items: center;
  	gap: 8px;
  	padding: 12px 14px;
  	border-top: 1px solid var(--digii-border);
  	background: var(--digii-white);
  	/* Same reasoning as `.digii-panel__header` above: never a shrink
  	   candidate, so the input row (and send button) always stays fully
  	   visible and tappable, even when the panel's height is capped tight
  	   by the keyboard. */
  	flex-shrink: 0;
}

#digii-chatbot-root .digii-panel__input {
  	flex: 1 1 auto;
  	border: 1px solid var(--digii-border);
  	background: var(--digii-grey-bubble);
  	border-radius: 999px;
  	padding: 11px 16px;
  	/* 16px, not 14px: anything smaller makes iOS Safari auto-zoom the
  	   whole page in when this input is focused, which is the main
  	   reason the panel can feel "broken" on phones. */
  	font-size: 16px;
  	color: var(--digii-text);
  	outline: none;
}

#digii-chatbot-root .digii-panel__input:focus { border-color: var(--digii-red); }

#digii-chatbot-root .digii-send-btn {
  	flex: 0 0 auto;
  	width: 40px;
  	height: 40px;
  	border-radius: 50%;
  	background: var(--digii-red);
  	color: var(--digii-white);
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

#digii-chatbot-root .digii-send-btn:hover,
#digii-chatbot-root .digii-send-btn:focus { background: var(--digii-red-dark); }
#digii-chatbot-root .digii-send-btn svg { width: 17px; height: 17px; }
#digii-chatbot-root .digii-send-btn:disabled { opacity: 0.5; cursor: default; }

#digii-chatbot-root .digii-panel__body::-webkit-scrollbar { width: 6px; }
#digii-chatbot-root .digii-panel__body::-webkit-scrollbar-thumb { background: var(--digii-border); border-radius: 3px; }