/* Ask ITU AI — floating launcher button + bottom-sheet drawer (vanilla) */

:root {
	--ask-itu-ai-accent: #1ea7e1;
	--ask-itu-ai-duration: 320ms;
	--ask-itu-ai-drawer-radius: 16px;
}

/* ---------------------------------------------------------------- Launcher */

.ask-itu-ai-launcher-wrap {
	position: fixed;
	right: 10px;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 20px;
	max-width: calc(100vw - 20px);
	line-height: 1;
}

/* Round icon button. */
.ask-itu-ai-launcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	padding: 0;
	border: 1px solid var(--ask-itu-ai-accent);
	border-radius: 50%;
	background: var(--ask-itu-ai-accent);
	box-shadow: 0 4px 10px rgba(30, 167, 225, 0.15);
	cursor: pointer;
	transition: box-shadow 200ms ease, transform 200ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.ask-itu-ai-launcher:hover,
.ask-itu-ai-launcher:focus-visible {
	box-shadow: 0 6px 14px rgba(30, 167, 225, 0.22);
	transform: translateY(-2px);
}

.ask-itu-ai-launcher:focus-visible {
	outline: 3px solid var(--ask-itu-ai-accent);
	outline-offset: 3px;
}

/* Spinning 4-point star. */
.ask-itu-ai-launcher__star {
	position: relative;
	z-index: 1;
	width: 40px;
	height: 40px;
	color: #fff;
	animation: ask-itu-ai-spin180 10s linear infinite;
}

/* Label under the button. Being the widest child it sets the wrap's width
   against the right margin/padding; the button centres over it. */
.ask-itu-ai-launcher__label {
	max-width: 100%;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	white-space: nowrap;
}

/* Adaptive colour, toggled from JS based on the background behind the label:
   black over light backgrounds, white over dark or coloured ones. */
.ask-itu-ai-launcher__label,
.ask-itu-ai-launcher__label.is-on-light {
	color: #000;
	text-shadow: none;
}

.ask-itu-ai-launcher__label.is-on-dark {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Busy/mixed backdrop (e.g. a photo blending pale and dark areas): white
   with a stronger dark halo, subtitle-style, so no pixel behind defeats it. */
.ask-itu-ai-launcher__label.is-on-busy {
	color: #fff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.6),
		0 0 10px rgba(0, 0, 0, 0.45);
}

@keyframes ask-itu-ai-spin180 {
	0%   { transform: rotate(0deg); }
	5%   { transform: rotate(180deg); }
	50%  { transform: rotate(180deg); }
	55%  { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}

/* --------------------------------------------------------- Drawer (sheet) */

.ask-itu-ai-drawer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	height: 80vh;
	height: 80dvh;
	max-height: 80vh;
	max-height: 80dvh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--ask-itu-ai-drawer-radius) var(--ask-itu-ai-drawer-radius) 0 0;
	background: #fff;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	transform: translateY(100%);
	transition: transform var(--ask-itu-ai-duration) cubic-bezier(0.32, 0.72, 0, 1);
}

.ask-itu-ai-drawer.is-open {
	transform: none;
}

.ask-itu-ai-drawer::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

/* iframe fills everything below the top bar. */
.ask-itu-ai-drawer__body {
	position: relative;
	flex: 1;
	min-height: 0;
}

.ask-itu-ai-drawer__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Top bar with the action icons, above the iframe (no overlap). The
   background mirrors the assistant UI inside the iframe so the bar reads as
   part of the app rather than as chrome bolted on top of it.

   The iframe is cross-origin, so none of this can be read at runtime — the
   values below are transcribed from the embedded app's own stylesheet and
   must be re-checked if that app is restyled:

     shell + main surface   #e9f4f8
     sidebar                rgba(217, 237, 245, 0.52) over the shell,
                            width clamp(14rem, 23.8%, 22.75rem)
     mobile header          rgba(217, 237, 245, 0.9) over the shell
     layout breakpoint      768px  (at or below: the sidebar turns into an
                            off-canvas drawer and the mobile header appears)

   This assumes the frame renders at the same CSS pixel as the host page. A
   browser-level per-site zoom on the frame (Chrome applies one to a
   cross-origin frame independently of the page embedding it) rescales the
   app's viewport, so it reaches its 768px breakpoint at a different host
   width and its sidebar comes out a different size. Nothing out here can
   detect that, so the bar will not match while such a zoom is in effect. */
.ask-itu-ai-drawer__actions {
	/* The app's own sidebar width, copied verbatim. Resolves to a flat 224px
	   from 769px up to 941px, then grows with the viewport to a 364px cap.
	   Replace with a plain `224px` if only the lower range ever matters. */
	--ask-itu-ai-sidebar-w: clamp(14rem, 23.8%, 22.75rem);
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 48px;
	padding: 0 12px;
	/* Wide layout: the app's main surface, with the sidebar strip below
	   covering the left end. */
	background-color: #e9f4f8;
}

/* Stands in for the app's sidebar, continuing it up through the bar. Taken out
   of flow rather than made a flex item so its width resolves against the bar's
   padding box — the same full-drawer width the app measures its own 23.8%
   against. A flex item would measure the content box and land 24px short. */
.ask-itu-ai-drawer__sidebar-strip {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--ask-itu-ai-sidebar-w);
	background: rgba(217, 237, 245, 0.52);
}

/* Narrow layout: the sidebar has slid off-canvas and the app's full-width
   header sits directly beneath this bar instead. Drop the strip and take the
   header's own tint — rgba(217, 237, 245, 0.9) over #e9f4f8 — so the two fuse
   into a single band. Keep this breakpoint in step with the app's own
   `@media (max-width: 768px)`. */
@media (max-width: 768px) {
	.ask-itu-ai-drawer__actions {
		background-color: #dbeef5;
	}

	.ask-itu-ai-drawer__sidebar-strip {
		display: none;
	}
}

.ask-itu-ai-drawer__newtab,
.ask-itu-ai-drawer__close {
	/* Positioned only so they paint above the sidebar strip, which is out of
	   flow and could otherwise cover them at very narrow widths. */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #1a1a1a;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}

/* Carbon icons: drawn on a 32-grid with built-in padding, meant for 16px UI
   rendering — integer scale, so the strokes stay crisp. Carbon's glyph arms
   are 2 grid units (1px at this size); the stroke thickens them to 4 units
   (2px), matching the weight of the assistant's own header icons. */
.ask-itu-ai-drawer__newtab svg,
.ask-itu-ai-drawer__close svg {
	display: block;
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
}

.ask-itu-ai-drawer__newtab:hover,
.ask-itu-ai-drawer__newtab:focus-visible,
.ask-itu-ai-drawer__close:hover,
.ask-itu-ai-drawer__close:focus-visible {
	background: rgba(0, 0, 0, 0.08);
	color: #000;
}

.ask-itu-ai-drawer__fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background: #fff;
	text-align: center;
	padding: 1em;
}

.ask-itu-ai-drawer__fallback[hidden] {
	display: none;
}

/* Scroll lock while the drawer is open. */
body.ask-itu-ai-open {
	overflow: hidden;
}
@media screen and (max-width: 720px) {
      .ask-itu-ai-launcher {
              max-width: 64px;
              max-height: 64px;
      }
      .ask-itu-ai-launcher__star {
          max-width: 32px;
          max-height: 32px;
      }
}
@media (prefers-reduced-motion: reduce) {
	.ask-itu-ai-launcher,
	.ask-itu-ai-launcher__star,
	.ask-itu-ai-drawer {
		transition: none;
		animation: none;
	}
}