/**
 * DANI Chat Widget — floating launcher styles.
 *
 * Positioning notes (see project discussion for the source measurements):
 * - #back-to-top on this site is 50x50, right:10px, visible bottom:10px,
 *   z-index:1000. Our default bottom offset (80px) clears its top edge
 *   (60px) with margin.
 * - The GDPR Cookie Consent (WebToffee) footer banner (#cookie-law-info-bar)
 *   is full-width and can exceed 80px tall on mobile when its buttons wrap.
 *   JS observes that element and raises --dani-cw-bottom-offset while the
 *   bar is visible; this stylesheet only needs to consume the variable.
 */

:root {
	--dani-cw-bottom-offset: 80px;
	--dani-cw-right-offset: 10px;
	--dani-cw-z-toggle: 10000; /* one above #back-to-top's 1000 */
	--dani-cw-z-panel: 1001;
	--dani-cw-accent: #61a229; /* matches existing Accept button color for visual continuity */
	--dani-cw-ink: #007d89; /* matches back-to-top's dark tone */
	--dani-cw-surface: #ffffff;
	--dani-cw-radius: 16px;
}

.dani-cw-root {
	position: fixed;
	right: var(--dani-cw-right-offset);
	bottom: var(--dani-cw-bottom-offset);
	z-index: var(--dani-cw-z-toggle);
	font-family: inherit;
}

/* ---------------------------------------------------------------------
 * Toggle button
 * ------------------------------------------------------------------ */

.dani-cw-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 0 18px 0 12px;
	border: solid 2px #fff;
	border-radius: 999px;
	background-color: var(--dani-cw-ink);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dani-cw-toggle:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.dani-cw-toggle:focus-visible {
	outline: 3px solid var(--dani-cw-accent);
	outline-offset: 2px;
}

.dani-cw-toggle__icon {
	width: 32px;
	height: 32px;
	/*border-radius: 50%;*/
	flex-shrink: 0;
}

.dani-cw-toggle__label {
	font-size: 1.95rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Collapse to icon-only on narrow viewports to save space. */
@media (max-width: 480px) {
	.dani-cw-toggle__label {
		display: none;
	}
	.dani-cw-toggle {
		width: 56px;
		height: 56px;
		padding: 0;
		justify-content: center;
	}
}

/* When the panel is open, the toggle acts as a floating close affordance
   behind the panel header's own close button — keep it out of the way. */
.dani-cw-root[data-state='expanded'] .dani-cw-toggle {
	display: none;
}

/* ---------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------ */

.dani-cw-panel {
	position: absolute;
	right: 0;
	bottom: calc(56px + 12px); /* toggle height + gap, kept in sync via JS class toggle */
	width: min(400px, calc(100vw - 24px));
	height: min(600px, calc(100vh - var(--dani-cw-bottom-offset) - 96px));
	max-height: 70vh;
	background: var(--dani-cw-surface);
	border: 1px solid #fff;
	border-radius: var(--dani-cw-radius);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: var(--dani-cw-z-panel);
}

.dani-cw-panel[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.dani-cw-panel {
		width: calc(100vw - 20px);
		right: -2px;
		height: min(70vh, 600px);
	}
}

.dani-cw-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--dani-cw-ink);
	color: #fff;
	flex-shrink: 0;
}

.dani-cw-panel__title {
	font-size: 1.60rem;
	font-weight: 700;
	margin: 0;
}

.dani-cw-panel__title:focus-visible {
	outline: 2px solid var(--dani-cw-accent);
	outline-offset: 2px;
}

.dani-cw-panel__close {
	border: solid 1px #fff;
	background: transparent;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 4px;
	border-radius: 6px;
}

.dani-cw-panel__close:hover,
.dani-cw-panel__close:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	outline: 2px solid #fff;
	outline-offset: 1px;
}

.dani-cw-panel__body {
	flex: 1 1 auto;
	overflow: auto;
	position: relative;
	min-height: 0;
}

/* Loading / error states rendered by JS while betty-bot assets fetch. */
.dani-cw-panel__status {
	padding: 24px 20px;
	font-size: 0.95rem;
	color: #333;
	text-align: center;
}

.dani-cw-panel__status a {
	color: var(--dani-cw-accent);
	font-weight: 600;
}


.dani-cw-intro {
	padding: 14px 16px 10px;
	flex-shrink: 0; /* don't let flexbox squeeze this out in favor of panel-body */
	max-height: 220px;
	overflow-y: auto; /* safeguard on very short mobile viewports so this never crowds the chat area to nothing */
}

.dani-cw-intro::after {
	content: '';
	display: table;
	clear: both; /* clearfix so .dani-cw-panel__body below doesn't collapse against the float */
}

.dani-cw-intro__image {
	float: left;
	width: 72px;
	height: 72px;
	object-fit: cover; /* crops the 1024x576 source to a centered square — see note above */
	border-radius: 8px;
	margin: 0 12px 6px 0;
}

.dani-cw-intro__text {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.45;
	color: #333;
}

/* ---------------------------------------------------------------------
 * Betty AI info-html static question (scoped to our panel only — do not
 * let these rules leak onto the standalone /dani page, which has its own
 * larger sizing).
 * ------------------------------------------------------------------ */

.dani-cw-panel .dani-cw-info h3 {
	font-size: 1rem;
	margin: 0 0 8px;
}

.dani-cw-panel .dani-cw-info .dani-cw-static-question {
	font-size: 1.5rem;
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 10px;
	cursor: pointer;
}

textarea[_ngcontent-ng-c4177612544]{
	font-size: 1.5rem !important;
}
textarea[_ngcontent-ng-c4177612544] {
    border-color: #4d4d4d !important;
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.dani-cw-toggle {
		transition: none;
	}
}