/**
 * Yoko Betty Chat — vendor widget overrides for Betty.AI's <betty-bot>.
 * Everything here targets internal markup we don't own (ids/classes chosen
 * by Betty's script, not by us), so !important shows up more than in
 * launcher.css — each use carries a WHY comment explaining what vendor
 * default it's fighting. Loads after launcher.css (see class-frontend.php).
 */

#yca-root betty-bot {
	--betty-accent: var(--yca-accent);
}

/* Structural pass-through wrappers between .bettyContainer and the real
   content sections (#header-wrapper/#chat-wrapper/#bottom-wrapper).
   WHY: none of these scroll — #chat-wrapper is the vendor's own designated
   scroll region (see its "chat-scroll" class in the rendered markup), so
   everything above it just needs to be a plain flex column at full height
   so #chat-wrapper's flex-grow has real space to size against.
   #side-menu-and-betty is a real vendor id; Angular also inserts an
   anonymous wrapper div directly inside .bettyContainer with no stable
   class name, which display:contents removes from the box model entirely
   so it can't add an untamed link in the height chain. */
#yca-root betty-bot .bettyContainer > div {
	display: contents;
}

#yca-root betty-bot #betty-wrapper,
#yca-root betty-bot .betty-wrapper,
#yca-root betty-bot #side-menu-and-betty,
#yca-root betty-bot #content-wrapper,
#yca-root betty-bot #main-wrapper,
#yca-root betty-bot .content-wrapper,
#yca-root betty-bot .main-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
	flex: 1 1 auto;
	min-height: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
}

/* Container — NOT the scroll region (that's #chat-wrapper below); this is
   just the outermost flex column spanning the panel's full height. */
#yca-root betty-bot .bettyContainer {
	font-family: inherit;
	height: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: visible;
	padding-bottom: 0;
	position: relative;
}

/* Header / Intro section.
   WHY: this wrapper holds Betty's entire intro screen (hero image, greeting,
   quick-reply buttons) and is tall. On short viewports (small laptops) it
   exceeds the panel height, and as a non-shrinking flex item it pushed
   #bottom-wrapper (the input bar) off the bottom of the panel — the intended
   scroll region (#chat-wrapper below) is empty on the intro screen, so nothing
   else absorbed the overflow. Letting this section shrink and scroll keeps the
   input bar in view at any viewport height, and stays a no-op on tall screens
   (it only scrolls when it genuinely can't fit). DEBUG: reproduce by opening
   the panel at a ~560px-tall viewport; the input row must stay visible without
   needing to close/reopen. */
#yca-root betty-bot #header-wrapper {
	flex: 0 1 auto;
	min-height: 0;
	padding: 24px 20px 16px;
	background: #ffffff;
	overflow-y: auto;
	overflow-x: hidden;
}

#yca-root betty-bot #intro-text {
	text-align: center;
}

#yca-root betty-bot .hero-image {
	margin-bottom: 16px;
}

#yca-root betty-bot .hero-image img {
	max-width: 120px;
	max-height: 120px;
	border-radius: 50%;
	object-fit: contain;
}

#yca-root betty-bot #intro-text h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--yca-accent);
	margin: 0 0 16px;
	line-height: 1.3;
}

/* Chat bubbles in intro */
#yca-root betty-bot .answerRow {
	margin-bottom: 8px;
}

#yca-root betty-bot .chatBubble {
	background: #f3f4f6;
	border-radius: 12px;
	padding: 12px 16px;
	max-width: 100%;
	margin: 0 auto;
}

#yca-root betty-bot .chatBubbleText {
	font-size: 14px;
	line-height: 1.6;
	color: #374151;
}

#yca-root betty-bot .chatBubbleText p {
	margin: 0;
}

/* Static question buttons */
#yca-root betty-bot .static-question {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 14px;
	color: #1f2937;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#yca-root betty-bot .static-question:hover {
	border-color: var(--yca-accent);
	background: #f9fafb;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#yca-root betty-bot .static-question:last-child {
	margin-bottom: 0;
}

/* Chat area — the vendor's own scroll region (its rendered markup carries
   a "chat-scroll" class). flex:1 1 auto (not 1 0 auto) lets it shrink
   below its content size — required for overflow-y:auto to ever kick in
   inside a flex column instead of just growing the whole panel taller. */
#yca-root betty-bot #chat-wrapper,
#yca-root betty-bot .chat-wrapper {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px 20px;
	background: #ffffff;
}

#yca-root betty-bot #chat-content {
	margin: 0;
}

/* Input area — always visible at bottom.
   WHY: !important on flex fights vendor default flex-basis values on this
   element. No position:sticky here (deliberately removed) — #bottom-wrapper
   is a plain flex sibling AFTER #chat-wrapper, not a descendant of it, so
   once #chat-wrapper (not .bettyContainer) owns the scrolling, this is
   simply always visible without needing to stick to anything. */
#yca-root betty-bot #bottom-wrapper {
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	width: 100%;
	padding: 12px 16px;
	background: #f8f9fa;
	border-top: 1px solid #e5e7eb;
	box-sizing: border-box;
	margin-bottom: 0;
	z-index: 10;
}

#yca-root betty-bot .form-group {
	margin: 0;
	width: 100%;
}

#yca-root betty-bot #input-group {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 24px;
	padding: 6px 8px 6px 16px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#yca-root betty-bot #input-group:focus-within {
	border-color: var(--yca-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

#yca-root betty-bot #input,
#yca-root betty-bot textarea#input,
#yca-root betty-bot .search-box {
	flex: 1;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-size: 15px;
	line-height: 1.4;
	padding: 6px 0 !important;
	margin: 0 !important;
	resize: none;
	min-height: 24px;
	max-height: 120px;
	box-shadow: none !important;
	font-family: inherit;
}

#yca-root betty-bot #input::placeholder,
#yca-root betty-bot textarea#input::placeholder {
	color: #9ca3af;
}

/* WHY: filled accent circle + white icon (not the transparent/gray default)
   since these buttons almost always sit on a colored background — white
   stays legible regardless of the client's configured accent color, where
   a fixed dark or gray icon color might not. */
#yca-root betty-bot #btnSend,
#yca-root betty-bot #downloadChat,
#yca-root betty-bot button.icons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	background: var(--yca-accent);
	color: var(--yca-accent-text);
	cursor: pointer;
	border-radius: 50%;
	transition: filter 0.15s ease;
}

/* WHY: filter:brightness rather than a fixed hover color — it darkens
   whatever accent color the client configured without needing to know
   its value. */
#yca-root betty-bot #btnSend:hover,
#yca-root betty-bot #downloadChat:hover,
#yca-root betty-bot button.icons:hover {
	filter: brightness(0.88);
}

#yca-root betty-bot #btnSend svg,
#yca-root betty-bot #downloadChat svg,
#yca-root betty-bot button.icons svg {
	width: 18px;
	height: 18px;
}

/* Hide print frame */
#yca-root betty-bot #print-frame {
	display: none;
}

/* Scrollbar styling */
#yca-root betty-bot ::-webkit-scrollbar {
	width: 6px;
}

#yca-root betty-bot ::-webkit-scrollbar-track {
	background: transparent;
}

#yca-root betty-bot ::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 3px;
}

#yca-root betty-bot ::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

/* Force bottom wrapper flush — override any vendor padding */
#yca-root betty-bot #bottom-wrapper:last-child,
#yca-root betty-bot .form-group:last-child {
	margin-bottom: 0;
	padding-bottom: 12px;
}

/* Ensure no footer/wrapper adds extra space */
#yca-root betty-bot #footer,
#yca-root betty-bot .footer,
#yca-root betty-bot footer {
	display: none;
}

/* Reset padding on generic wrappers but NOT bottom-wrapper.
   WHY: !important + attribute-substring selectors are a deliberate
   defensive net against vendor wrapper element names we can't predict —
   any current or future "*wrapper*" id/class gets its bottom spacing
   zeroed except the one wrapper that must keep its own padding. */
#yca-root betty-bot [class*="wrapper"]:not(#bottom-wrapper),
#yca-root betty-bot [id*="wrapper"]:not(#bottom-wrapper) {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}