/* Chat button */
#ezChatButton {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #da0000;
	color: white;
	border: none;
	padding: 0.5em;
	border-radius: 100%;
	line-height: 1em;
	height: 2em;
	width: 2em;
	text-align: center;
	cursor: pointer;
	font-size: 1.4em;
	z-index: 40;
	transition: background-color 0.3s ease;
}

#ezChatButton:before {
	margin: 0;
	padding: 0;
}

#ezChatButton:hover {
	background-color: #1a1a1a;
	animation: growShrinkMedium 0.4s ease-in-out;
}

#ezChatButton:after {
	display:block;
	content: "Ask AI";
	position:absolute;
	left:-3.2em;
	top:50%;
	margin-top:-0.5em;
	color:#da0000;
	text-align:right;
	width:auto;
	padding-right:2em;
}

/* Keyframe animation for the button attention-drawing effect */
@keyframes pulseAnimationTwice {
	0% {
		transform: scale(1);
		background-color: #da0000;
	}
	25% {
		transform: scale(1.3);
		background-color: #ff4747;
	}
	50% {
		transform: scale(0.8);
		background-color: #da0000;
	}
	70% {
		transform: scale(1.2);
		background-color: #ff4747;
	}
	85% {
		transform: scale(0.9);
		background-color: #da0000;
	}
	100% {
		transform: scale(1);
		background-color: #da0000;
	}
}

#ezChatButton.attention {
	animation: pulseAnimationTwice 1s ease-in-out 2; /* Runs twice */
}
#ezChatButton.attention.showing {
	animation:none;
}
#ezChatButton.showing { 
	background-color:#1a1a1a;
}

/* Chat window */
#ezChat {
	position: fixed;
	bottom: 80px;
	right: 20px;
	width: 420px;
	height: 70vh; /* Make the height responsive to viewport height */
	max-height: 80vh; /* Prevent the chat window from exceeding the screen height */
	border: 1px solid #ccc;
	border-radius: 1.8em;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	display: none;
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.3s ease, transform 0.3s ease;
	overflow: hidden; /* Prevent content overflow */
	background:rgba(34, 34, 34, 1);
	border:0;
}

#ezChat.show {
	display: flex;
	opacity: 1;
	animation: growShrink 0.4s ease-in-out;
}

/* Keyframes for chat box animation */
@keyframes growShrink {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

/* Keyframes for chat box animation */
@keyframes growShrinkMedium {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

#ezChat input[type=email] {
	display:none;
}

/* Close button */
#ezChat .close-btn {
	position: absolute;
	top: 10px;
	right: 15px;
	background: none;
	border: none;
	font-size: 2rem;
	color: #ccc;
	cursor: pointer;
	z-index: 1001;
	padding:0;
	margin:0;
}

#ezChat .close-btn:hover {
	color: #da0000;
}

/* Header */
#ezChat .header {
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	margin: 0.5em 0.5em 1em 0.5em;
	color:#FFF;
}

/* Chat content */
#ezChat .messages {
	flex-grow: 1;
	overflow-y: auto;
	padding: 1em;
	background: rgba(255,255,255,0.9);
	border-radius:1.2em;
	height: 200px;
	line-height: 1.4em;
	padding-bottom: 2em;
	transition: background 0.3s ease; /* Add transition for smooth background change */
}
#ezChat:hover .messages {
	background: rgba(255,255,255,1);
}


/* Media query for smaller screens */
@media (max-height: 600px) {
	#ezChat {
		bottom: 10px; /* Bring the chat window closer to the bottom */
		right: 10px;  /* Adjust right padding for smaller screens */
		width: 80vw;  /* Reduce the width for smaller screens */
		height: 70vh; /* Make height smaller to fit smaller screens */
	}
}

/* Responsive Design: Mobile-friendly adjustments */
@media screen and (max-width: 500px) {
	#ezChat {
		width: 100%;
		height: 70%;
		bottom: 0;
		right: 0;
		left: 0;
		border-radius: 0;
		padding: 1em 1em 1em;
	}
}


/* Header */
#ezChat .header {
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	margin: 0.5em 0.5em 1em 0.5em;
}

/* Loading spinner */
#ezChat #loading {
	position:absolute;
	right:10px;
	top:50%;
	margin-top:-8px;
	border: 2px solid #dfd5c8;
	border-top: 2px solid #da0000;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: spin 2s linear infinite;
	display: none;
}

#ezChat form button.send-message {
	position:absolute;
	right:0.6em;
	top:auto;
	bottom:0.6em;
	height:2em;
	line-height:2em;
	width:2em;
	margin:0;
	margin-top:-0.5em;
	cursor:pointer;
	z-index:10;
	background:#e6e6e6;
	border-radius: 100%;
	color:#FFF;
	padding:0;
	font-size:1rem;
	
}
#ezChat form button.send-message.enabled {
	background:#da0000;
}
#ezChat form button.send-message.loading {
	background:#1a1a1a;
}
#ezChat form button.send-message.enabled:hover,
#ezChat form button.send-message.loading:hover {
	background:#f31919;
}
#ezChat form button.send-message.loading:before {
	content: '\e80a';
	animation: pulse 2s infinite ease-in-out;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Input box */
/* Textarea behaves like a single-line input until it grows */
#ezChat #query {
  width: 100%;
  resize: none;           /* user can't drag */
  overflow: hidden;       /* we control growth */
  height: 48px;           /* single-line height */
  min-height: 48px;
  max-height: 160px;      /* cap growth (tweak as you want) */
  line-height: 1.4em;    /* normal line height */
  padding: 0.75em 3em 0.75em 1em;
  border: 1px solid #ccc;
  background-color:#FFF;
  border-radius: 1.5em;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
}

#ezChat .query-wrap {
  position: relative;
  width: 100%;
}

/* Your textarea stays as-is */
#ezChat .query-wrap #query {
  position: relative;
}

/* Fake placeholder overlay */
/* Overlay placeholder */
#ezChat .query-ph {
  position: absolute;
  left: 2px;
  right: 3em;
  top: 2px;
  bottom: 0;
  z-index: 1;
  pointer-events: none;

  padding: 0.75em 0 calc(0.75em + 2px) 1em; /* descender buffer */
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: #8c8c8c;
}

/* Hide overlay when focused or when textarea has content */
#ezChat .query-wrap.has-text .query-ph,
#ezChat .query-wrap.is-focus .query-ph {
  opacity: 0;
  z-index: -1;
}

/* Chat message */
#ezChat .chat-message {
	margin-bottom: 1.6em;
	padding-left:2.2em;
	padding-right:1em;
	position:relative;
}
#ezChat .chat-message:before {
	content:" ";
	display: block;
	position:absolute;
	left:0;
	top:0;
	border-radius:100%;
	height:1.6em;
	width:1.6em;
	background:#da0000;
}

#ezChat .chat-message.has-avatar:before {
	display:none;
}

#ezChat .chat-message .avatar {
	display: block;
	position:absolute;
	left:0;
	top:0;
	border-radius:100%;
	height:1.6em;
	width:1.6em;
}

#ezChat .chat-message.agent:before {
	background:url("https://static.intercomassets.com/avatars/7567461/square_128/ezurio-avatar-1721941651.jpg");
	background-position: center center;
	background-size: contain;
}

#ezChat .chat-message.loading:before {
	animation: pulse 2s infinite ease-in-out;
}
#ezChat .chat-message.loading-message:after {
	content: "Thinking...";
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(0.6);
		opacity: 0.5;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

#ezChat .chat-message.user {
 font-weight: bold;
}
#ezChat .chat-message.user:before {
	background:#1a1a1a;
}

#ezChat form { 
	padding:0;
	padding-top:0.5em;
	position:relative;
}

#ezChat .chat-status {
	font-size:0.8em;
	text-align:center;
	margin: 1em 1em 2em 1em;
	font-weight:bold;
	padding:0.5em;
}
#ezChat .chat-status.with-break {
	border-bottom:1px solid #da0000;
	border-top:1px solid #da0000;
}

#ezChat .thumbs-up, #ezChat .thumbs-down {
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	opacity:0.3;
}
#ezChat .thumbs-up:hover,
#ezChat .thumbs-down:hover {
	opacity:1;
}

#ezChat .thumbs-up {
	background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'1\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'tabler-icon tabler-icon-thumb-up\' opacity=\'1\'%3E%3Cpath d=\'M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3\'/%3E%3C/svg%3E');
}
#ezChat .thumbs-up.active {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 28.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cpath d='M18.1,10.5h-2.5V6c0-1.4-1.1-2.5-2.5-2.5c-1.4,0-2.5,1.1-2.5,2.5v1c0,1.9-1.6,3.5-3.5,3.5h-3c-0.8,0-1.5,0.7-1.5,1.5v7 c0,0.8,0.7,1.5,1.5,1.5h2c0.7,0,1.3-0.5,1.4-1.1c0.6,0.7,1.5,1.1,2.6,1.1l7,0c0.1,0,0.1,0,0.2,0c1.1,0,2-1,2.4-2.4l1-5.1 C20.6,11.6,19.5,10.5,18.1,10.5z'/%3E%3C/svg%3E%0A");
	opacity:1;
	background-color:transparent;
}

#ezChat .thumbs-down {
	background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'1\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'tabler-icon tabler-icon-thumb-down\' opacity=\'1\'%3E%3Cpath d=\'M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3\'/%3E%3C/svg%3E');
}
#ezChat .thumbs-down.active {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 28.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cpath d='M19.6,5.9c-0.4-1.5-1.4-2.5-2.5-2.4h-7c-1,0-1.9,0.4-2.6,1.1C7.4,4,6.8,3.5,6.1,3.5h-2C3.3,3.5,2.6,4.2,2.6,5v7 c0,0.8,0.7,1.5,1.5,1.5h3c1.9,0,3.5,1.6,3.5,3.5v1c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5v-4.5h2.5c1.4,0,2.5-1.1,2.5-2.6 L19.6,5.9z'/%3E%3C/svg%3E%0A");
	opacity:1;
	background-color:transparent;
}

#ezChat code {
  display: inline-block !important;
  vertical-align: middle;
  background-color: rgba(150,150,150,0.2);
  border-radius: 0.5em !important;
  font-family: 'Roboto Mono', 'Courier New', Courier, monospace;
  padding:0.25em 0.5em !important;
  font-size:0.9em;
  overflow-x:auto;
  margin:0 !important;
}

#ezChat pre code {
  padding:2em !important;
  display:block !important; 
  width:100%;
  margin:0.5em 0 !important;
}
#ezChat p {
	margin: 1em auto 0.25em !important;
}
#ezChat .chat-message a {
	color:#da0000;
	font-weight: initial;
}
#ezChat .chat-message a:hover {
	text-decoration: underline;
}

#ezChat .chat-message ul,
#ezChat .chat-message ol {
	margin: 0.5em 0 1em 2em;
	padding-left:0;
}

#ezChat .chat-message h1 { font-size:1.6em; padding-top:0.5em; }
#ezChat .chat-message h2 { font-size:1.4em; padding-top:0.5em; }
#ezChat .chat-message h3 { padding-top:0.5em; font-size:1.2em; }
#ezChat .chat-message h4 { padding-top:0.5em; font-size:1.1em; }


/* === Inline / Minimal mode for integration mount === */
#ezChatIntegration {
  padding-top: 1em;
  max-width: 800px;
  margin: auto;
}

/* Fluid, background-free chat root */
#ezChatIntegration #ezChat {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  opacity:1;
  display:block;
  bottom:auto;
  right:auto;
  z-index:0;
}

/* Hide non-essential UI in inline mode */
#ezChatIntegration #ezChat .header,
#ezChatIntegration #ezChat .close-btn {
  display: none !important;
}

/* Form: capsule input with embedded circular send button */
#ezChatIntegration #ezChat form {
  position: relative;
  margin: 0;
  padding: 0;
}

#ezChatIntegration #ezChat #query {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 160px;
  height: 48px;                 /* starting height */
  padding: 12px 56px 12px 16px; /* room for button */
  border: 2px solid #ccc;
  border-radius:1.5em;
  background: #fff;
  box-shadow: none;
  outline: none;
  overflow: hidden;
  resize: none;
}
#ezChatIntegration #ezChat #query:focus {
	border-color:#da0000;
}
/* Hide email in inline mode */
#ezChatIntegration #ezChat input[type="email"] {
  display: none !important;
}

/* Circular send button inside the input */
#ezChatIntegration #ezChat form button.send-message {
  position: absolute !important;
  right: 6px;
  top:auto;
  bottom: 6px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* default (idle) */
  background: #e6e6e6 !important;
  color: #1a1a1a;
  box-shadow: none;
}

/* Icon glyph (adjust size to your font) */
#ezChatIntegration #ezChat form button.send-message:before {
  display: inline-block;
  line-height: 1;
  font-size: 16px;
}

/* Enabled / hover / loading color states */
#ezChatIntegration #ezChat form button.send-message.enabled {
  background: #da0000 !important; /* Ezurio red */
  color: #fff;
}
#ezChatIntegration #ezChat form button.send-message.enabled:hover {
  background: #f31919 !important;
}
#ezChatIntegration #ezChat form button.send-message.loading {
  background: #1a1a1a !important;
  color: #fff;
}
/* relies on your existing @keyframes pulse */
#ezChatIntegration #ezChat form button.send-message.loading:before {
  animation: pulse 2s infinite ease-in-out;
}

/* Messages panel — collapsed by default (no display:none so transitions work) */
#ezChatIntegration #ezChat .messages {
  display: block !important;
  overflow: hidden;                     /* hide while sliding */
  max-height: 0;                        /* collapsed */
  padding: 0 2em;                      /* horizontal padding only while closed */
  border-radius: 1.6em;
  background-color: rgba(255,255,255,0);/* start transparent */
  border: 1px solid rgba(0,0,0,0);      /* fade in with bg */
  box-shadow: none;
  transition:
	max-height 800ms ease,
	background-color 800ms ease,
	border-color 800ms ease,
	padding 800ms ease,
	box-shadow 800ms ease,
	margin-bottom 800ms ease;
}

/* Expanded state when the host gets .open */
#ezChatIntegration.open #ezChat .messages {
  height: 50vh;                     /* slide-down limit */
  max-height:1000px;
  padding: 2em;                         /* vertical padding eases in */
  background-color: #fff;                /* fade to white */
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  overflow-y: auto;                      /* scroll once opened */
  color:#1a1a1a;
  margin-bottom:1em;
  z-index:1;
}

/* Mobile guards */
@media (max-width: 500px), (max-height: 600px) {
  #ezChatIntegration #ezChat {
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	border-radius: 0 !important;
  }
  #ezChatIntegration.open #ezChat .messages {
	max-height: 80vh; /* same cap on small screens */
  }
}




/* =========================
   Dark Mode — ezChatIntegration
   ========================= */
body.dark-mode #ezChatIntegration {
  /* keep layout the same; override only colors/effects */
}

/* Root (stay fluid, just neutralize any accidental light effects) */
body.dark-mode #ezChatIntegration #ezChat {
  background: none !important;
  box-shadow: none;
}

/* Input (capsule) */
body.dark-mode #ezChatIntegration #ezChat #query {
  background: #121212;                 /* deep dark */
  color: #e6e6e6;                      /* light text */
  border-color: #2a2a2a;               /* subtle dark border */
  caret-color: #e6e6e6;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
body.dark-mode #ezChatIntegration #ezChat #query::placeholder {
  color: #8c8c8c;                      /* muted placeholder */
}
body.dark-mode #ezChatIntegration #ezChat #query:focus {
  border-color: #da0000;               /* Ezurio red accent on focus */
  outline: none;
}

/* Send button (inside input) */
body.dark-mode #ezChatIntegration #ezChat form button.send-message {
  background: #2a2a2a !important;      /* neutral dark idle */
  color: #e6e6e6;                       /* icon/text */
  box-shadow: none;
  border: 0;
}
body.dark-mode #ezChatIntegration #ezChat form button.send-message.enabled {
  background: #da0000 !important;      /* Ezurio red */
  color: #fff;
}
body.dark-mode #ezChatIntegration #ezChat form button.send-message.enabled:hover {
  background: #f31919 !important;
}
body.dark-mode #ezChatIntegration #ezChat form button.send-message.loading {
  background: #000 !important;
  color: #fff;
}

/* Messages panel — collapsed (transparent, but dark-friendly borders) */
body.dark-mode #ezChatIntegration #ezChat .messages {
  background-color: rgba(0,0,0,0);     /* stay transparent while closed */
  border-color: rgba(255,255,255,0);   /* fade in later */
  box-shadow: none;
  color: #e6e6e6;                      /* text color when opened */
}

/* Messages panel — OPEN */
body.dark-mode #ezChatIntegration.open #ezChat .messages {
  background-color: #0e0e0e;           /* card-like dark surface */
  border-color: rgba(255,255,255,0.08);
  color: #e6e6e6;
}

/* Message items (strip any light bullets/avatars you hid earlier) */
body.dark-mode #ezChatIntegration #ezChat .chat-message,
body.dark-mode #ezChatIntegration #ezChat .messages .chat-message {
  color: #e6e6e6;
}
body.dark-mode #ezChatIntegration #ezChat .chat-message a {
  color: #dfd5c8;                      /* readable link on dark */
  text-decoration: underline;
}
body.dark-mode #ezChatIntegration #ezChat .chat-message a:hover {
  color: #fff;
}

/* Status bars if any sneak in later */
body.dark-mode #ezChatIntegration #ezChat .chat-status {
  color: #cfcfcf;
  border-color: rgba(255,255,255,0.12);
}

/* Scrollbar (WebKit) inside messages for dark mode polish */
body.dark-mode #ezChatIntegration.open #ezChat .messages::-webkit-scrollbar {
  width: 10px;
}
body.dark-mode #ezChatIntegration.open #ezChat .messages::-webkit-scrollbar-track {
  background: #0a0a0a;
  border-radius: 10px;
}
body.dark-mode #ezChatIntegration.open #ezChat .messages::-webkit-scrollbar-thumb {
  background: #2b2b2b;
  border-radius: 10px;
}
body.dark-mode #ezChatIntegration.open #ezChat .messages::-webkit-scrollbar-thumb:hover {
  background: #3a3a3a;
}

/* High-contrast tweak for tiny screens */
@media (max-width: 500px), (max-height: 600px) {
  body.dark-mode #ezChatIntegration.open #ezChat .messages {
	background-color: #0b0b0b;
	box-shadow: 0 8px 18px rgba(0,0,0,0.4);
  }
}