/* Battle Plan Web Design — AI Chat widget (Phase 1)
 *
 * Self-contained, scoped to .bp-chat-*. Brand color pulls from the
 * site's CSS variables when present, with sensible fallbacks. Sizing
 * in em so it scales with the site's root font.
 */

/* ---------------------------------------------------------------
   Theme tokens — the widget inherits the site's brand with zero
   config. Defined on :root (low specificity) so a per-site override
   in style-site.css under  #bp-chat-root { … }  always wins,
   regardless of stylesheet load order.

   • ACCENT (launcher, header, send button, the visitor's bubbles)
     pulls the site's BUTTON styling — the one brand-carrying token
     set present on every Battle Plan site — so the widget matches
     the site's calls-to-action automatically, hover states and all.
   • The PANEL stays a readable light card built from the CONSTANT
     neutral scale (--white / greys). It deliberately does NOT use
     --text-color, which dark-themed sites flip to white (that would
     be white text on the white panel).
   --------------------------------------------------------------- */
:root {
	--chatbot-launcher-border:                                 var(--button-border);
	--chatbot-launcher-border-radius:                          100%;
	--chatbot-launcher-background:                             var(--button-background);
	--chatbot-launcher-color:                                  var(--button-color);
	--chatbot-launcher-border-hover:                           var(--button-border-hover);
	--chatbot-launcher-border-radius-hover:                    100%;
	--chatbot-launcher-background-hover:                       var(--button-background-hover);
	--chatbot-launcher-color-hover:                            var(--button-color-hover);
	--chatbot-shadow:                                          -5px 5px 10px var(--black);

	--chatbot-header-font-family:                              var(--font-text);
	--chatbot-header-bg:                                       var(--dark-grey);
	--chatbot-header-color:                                    var(--lightest-grey);
	--chatbot-consent-bg:                                      var(--chatbot-header-bg);
	--chatbot-consent-color:                                   var(--chatbot-header-color);
	--chatbot-radius:                                          1em;
	--chatbot-bubble-bg:                                       var(--lightest-grey);
	--chatbot-bubble-color:                                    var(--black);
	--chatbot-user-bubble-bg:                                  var(--light-grey);
	--chatbot-user-bubble-color:                               var(--black);
	--chatbot-links:                                           var(--button-color);

	--chatbot-form-padding:                                    1em;
	--chatbot-form-border:                                     2px solid var(--dark-grey);
	--chatbot-form-background:                                 var(--medium-grey);
}

#bp-chat-root {
	font-family:                                               var(--font-test);
}

/* ---- Launcher (circular chat bubble) ---- */
button.bp-chat-launcher {
	position:                                                  fixed;
	right:                                                     1.25em;
	bottom:                                                    1.25em;
	z-index:                                                   99998;
	display:                                                   inline-flex;
	align-items:                                               center;
	justify-content:                                           center;
	width:                                                     3.75em;
	height:                                                    3.75em;
	padding:                                                   0;
	border:                                                    var(--chatbot-launcher-border);
	border-radius:                                             var(--chatbot-launcher-border-radius);
	background:                                                var(--chatbot-launcher-background);
	color:                                                     var(--chatbot-launcher-color);
	line-height:                                               1;
	cursor:                                                    pointer;
	box-shadow:                                                var(--chatbot-shadow);
	transition:                                                all 0.15s ease;
}

button.bp-chat-launcher:hover,
button.bp-chat-launcher.active,
button.bp-chat-launcher.tab-focus,
button.bp-chat-launcher:focus-visible {
	transform:                                                 translateY(-0.1em) scale(1.05);
	box-shadow:                                                var(--chatbot-shadow);
	background:                                                var(--chatbot-launcher-background-hover);
	border-radius:                                             var(--chatbot-launcher-border-radius-hover);
	color:                                                     var(--chatbot-launcher-color-hover);
	border:                                                    var(--chatbot-launcher-border-hover);
}

.bp-chat-launcher-icon { display: inline-flex; width: 1.7em; height: 1.7em; }
.bp-chat-launcher-icon svg { width: 100%; height: 100%; }
/* Closed = bubble only; open = panel only. */
#bp-chat-root.bp-chat-open .bp-chat-launcher { display: none; }

/* ---- Panel ---- */
.bp-chat-panel {
	position:                                                  fixed;
	right:                                                     1.25em;
	bottom:                                                    1.25em;
	z-index:                                                   99999;
	display:                                                   none;
	flex-direction:                                            column;
	width:                                                     min(calc(100vw - 2em), 500px);
	height:                                                    min(calc(100vh - 2.5em), 700px);
	border-radius:                                             var(--chatbot-radius);
	overflow:                                                  hidden;
	box-shadow:                                                var(--chatbot-shadow);
	animation:                                                 bpc-pop 0.18s ease;
}

@keyframes bpc-pop {
	from { opacity: 0; transform: translateY(0.75em); }
	to   { opacity: 1; transform: translateY(0); }
}

#bp-chat-root.bp-chat-open .bp-chat-panel { display: flex; }

/* ---- Header ---- */
.bp-chat-head {
	display:                                                   flex;
	align-items:                                               center;
	justify-content:                                           space-between;
	padding:                                                   0.85em 1em;
	background:                                                var(--chatbot-header-bg);
}

.bp-chat-title {
	font-family:                                               var(--chatbot-header-font-family);
	font-weight:                                               700;
	font-size:                                                 1.05em;
	color:                                                     var(--chatbot-header-color);
}

button.bp-chat-close,
button.bp-chat-send {
	border:                                                    var(--button-border);
	background:                                                var(--button-background);
	color:                                                     var(--button-color);
	font-size:                                                 2em;
	line-height:                                               1;
	padding:                                                   0 15px;
}

button.bp-chat-close:hover,
button.bp-chat-close.active,
button.bp-chat-close.tab-focus,
button.bp-chat-send:hover,
button.bp-chat-send.active,
button.bp-chat-send.tab-focus {
	border:                                                    var(--button-border-hover);
	background:                                                var(--button-background-hover);
	color:                                                     var(--button-color-hover);
	padding:                                                   0 15px;
}

button.bp-chat-send {
	flex:                                                      0 0 auto;
	font-size:                                                 var(--button-font-size);
	padding:                                                   var(--button-padding);
}

button.bp-chat-send:hover,
button.bp-chat-send.active,
button.bp-chat-send.tab-focus {
	padding:                                                   var(--button-padding);
}

button.bp-chat-send:disabled {
	opacity:                                                   0.5;
	cursor:                                                    default;
}

button.bp-chat-close,
button.bp-chat-close:hover,
button.bp-chat-close.active,
button.bp-chat-close.tab-focus {
	padding:                                                   3px 10px 5px 12px;
	font-family:                                               var(--font-text);
}

/* ---- Log ---- */
.bp-chat-log {
	flex:                                                      1 1 auto;
	overflow-y:                                                auto;
	padding:                                                   1em;
	display:                                                   flex;
	flex-direction:                                            column;
	gap:                                                       0.6em;
	background:                                                var(--white);
}

.bp-chat-msg { display: flex; }
.bp-chat-user { justify-content: flex-end; }
.bp-chat-bubble {
	max-width:                                                 85%;
	padding:                                                   0.6em 0.85em;
	border-radius:                                             var(--chatbot-radius);
	font-size:                                                 0.95em;
	line-height:                                               1.4;
	white-space:                                               pre-wrap;
	word-wrap:                                                 break-word;
}

.bp-chat-assistant .bp-chat-bubble {
	background:                                                var(--chatbot-bubble-bg);
	color:                                                     var(--chatbot-bubble-color);
	border-bottom-left-radius:                                 0.25em;
}
.bp-chat-user .bp-chat-bubble {
	background:                                                var(--chatbot-user-bubble-bg);
	color:                                                     var(--chatbot-user-bubble-color);
	border-bottom-right-radius:                                0.25em;
}

/* ---- Typing indicator ---- */
.bp-chat-typing .bp-chat-bubble { display: inline-flex; gap: 0.3em; padding: 0.8em 0.9em; }
.bp-chat-typing-dot {
	width:                                                     0.45em;
	height:                                                    0.45em;
	border-radius:                                             50%;
	background:                                                var(--chatbot-muted);
	animation:                                                 bpc-blink 1.2s infinite ease-in-out both;
}
.bp-chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.bp-chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bpc-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ---- Form ---- */
.bp-chat-form {
	display:                                                   flex;
	align-items:                                               flex-end;
	gap:                                                       0.5em;
	padding:                                                   var(--chatbot-form-padding);
	border-top:                                                var(--chatbot-form-border);
	background:                                                var(--chatbot-form-background);
	align-items:                                               center;
}

.bp-chat-input {
	flex:                                                      1 1 auto;
	resize:                                                    none;
	border:                                                    var(--input-border);
	border-radius:                                             var(--input-border-radius);
	padding:                                                   var(--input-padding);
	font-family:                                               var(--input-font-family);
	font-size:                                                 var(--input-font-size);
	max-height:                                                7.5em;
	height:                                                    32px;
	color:                                                     var(--input-color);
	background:                                                var(--input-background);
}

.bp-chat-input:focus {
	border:                                                    var(--input-border-focus);
	border-radius:                                             var(--input-border-radius-focus);
	padding:                                                   var(--input-padding-focus);
	font-family:                                               var(--input-font-family-focus);
	font-size:                                                 var(--input-font-size-focus);
	color:                                                     var(--input-color-focus);
	background:                                                var(--input-background-focus);
}


/* ---- Consent line ---- */
.bp-chat-consent {
	padding:                                                   0.7em 0.9em;
	font-size:                                                 0.72em;
	line-height:                                               1.3;
	color:                                                     var(--chatbot-consent-color);
	text-align:                                                center;
	background:                                                var(--chatbot-consent-bg);
}

/* ---- Consent card (explicit SMS opt-in) ---- */
.bp-chat-consent-card {
	max-width:                                                 92%;
	padding:                                                   0.85em 0.95em;
	border:                                                    var(--button-border);
	border-radius:                                             var(--chatbot-radius);
	background:                                                var(--white);
}

.bp-chat-consent-disclosure {
	margin:                                                    0 0 0.6em;
	font-size:                                                 0.8em;
	line-height:                                               1.4;
	color:                                                     var(--black);
}

.bp-chat-consent-links {
	margin:                                                    0 0 0.7em;
	font-size:                                                 0.72em;
	line-height:                                               1.3;
}

.bp-chat-consent-links a {
	color:                                                     var(--chatbot-links);
	text-decoration:                                           underline;
}

.bp-chat-consent-btns {
	display:                                                   flex;
	gap:                                                       0.5em;
}

.bp-chat-consent-yes,
.bp-chat-consent-no {
	flex:                                                      1 1 auto;
	border:                                                    none;
	border-radius:                                             0.75em;
	padding:                                                   0.55em 0.8em;
	font:                                                      inherit;
	font-size:                                                 0.9em;
	font-weight:                                               600;
	cursor:                                                    pointer;
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
	.bp-chat-panel {
		right:                                                    0;
		bottom:                                                   0;
		width:                                                    100vw;
		height:                                                   calc(100vh - 120px);
		border-radius:                                            0;
	}
}