/* 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: 9998;
	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: "Chat";
	position:absolute;
	left:-2.75em;
	top:50%;
	margin-top:-0.5em;
	color:#da0000;
	text-align:right;
	width:auto;
	padding-right:1.5em;
}

/* 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: 480px;
	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: 10000;
	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;
}

/* Header buttons */
#ezChat .new-chat-btn {
	position: absolute;
	top: 13px;
	left: 15px;
	background: none;
	border: none;
	font-size: 1.4rem;
	color: #ccc;
	cursor: pointer;
	z-index: 1001;
	padding:0;
	margin:0;
	line-height:1;
}

#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 .new-chat-btn:hover,
#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: #fff;
	border-radius:1.2em;
	height: 200px;
	line-height: 1.4em;
	padding-bottom: 2em;
}


/* 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) {
	#ezChatButton:after {
		display: none;
		content: none;
	}

	#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%;
}

#ezChat #ezChatFile {
  display: none;
}

#ezChat .attachment-preview {
  display:none;
  margin:0 0 8px;
}

#ezChat .attachment-preview.has-attachment {
  display:flex;
  flex-direction:column;
  gap:6px;
}

#ezChat .attachment-preview-card {
  display:flex;
  align-items:center;
  gap:9px;
  max-width:100%;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  background:transparent;
  padding:7px 38px 7px 8px;
  position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}

#ezChat .attachment-preview-card img,
#ezChat .attachment-preview-file {
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:8px;
  object-fit:cover;
  background:#f2f4f7;
}

#ezChat .attachment-preview-file {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#da0000;
  color:#fff;
  font-size:10px;
  font-weight:bold;
}

#ezChat .attachment-preview-card span {
  min-width:0;
}

#ezChat .attachment-preview-card strong,
#ezChat .attachment-preview-card small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#ezChat .attachment-preview-card strong {
  color:#fff;
}

#ezChat .attachment-preview-card small {
  color:rgba(255,255,255,.72);
  font-size:.78em;
}

#ezChat .attachment-preview-remove {
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  border:0;
  background:#333;
  color:#fff;
  cursor:pointer;
  padding:0;
  margin:0;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

#ezChat .attachment-preview-remove:hover {
  background:#da0000;
  color:#fff;
}

#ezChat .attach-file-btn {
  display: none;
  position: absolute;
  left: 0.6em;
  right: auto;
  top: auto;
  bottom: 0.6em;
  z-index: 3;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 0;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  line-height: 2em;
  margin: 0;
  margin-top: -0.5em;
  font-size: 1rem;
}

#ezChat[data-mode="live"] .attach-file-btn {
  display: flex;
}

#ezChat[data-mode="live"] .query-wrap #query {
  padding-left: 52px;
}

#ezChat[data-mode="live"] .query-wrap .query-ph {
  left: 38px;
}

#ezChat .attach-file-btn.loading {
  opacity: .55;
  pointer-events: none;
}

#ezChat .attach-file-btn:disabled,
#ezChat .attach-file-btn.disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* 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: auto;
  bottom: 0;
  height: 48px;
  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 {
	max-width:78%;
	margin:0 34px 12px 34px;
	padding:11px 14px;
	border:1px solid #d4d8df;
	border-radius:18px;
	background:#fff;
	position:relative;
	font-size:14px;
	line-height:1.45;
	font-weight:400;
	overflow-wrap:anywhere;
	white-space:normal;
}
#ezChat .chat-message:before {
	content:attr(data-avatar);
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	bottom:4px;
	border-radius:100%;
	height:24px;
	width:24px;
	background:#da0000;
	color:#fff;
	font-size:10px;
	line-height:1;
	font-weight:800;
	letter-spacing:.02em;
	overflow:hidden;
	text-align:center;
	text-transform:uppercase;
}

#ezChat .chat-message.ai,
#ezChat .chat-message.agent {
	margin-left:34px;
	margin-right:auto;
}

#ezChat .chat-message.agent {
	background:#fff7f7;
	border-color:#ffd7d7;
}

#ezChat .chat-message.ai,
#ezChat .chat-message.agent {
	border-bottom-left-radius:0;
}

#ezChat .chat-message.user {
	margin-left:auto;
	margin-right:0;
	background:#1a1a1a;
	border-color:#1a1a1a;
	color:#fff;
	border-bottom-right-radius:0;
}

#ezChat .chat-message.ai:before,
#ezChat .chat-message.agent:before {
	left:-34px;
}

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

#ezChat .chat-message.user a {
	color:#fff;
	text-decoration:none;
}

#ezChat .chat-message.user .ezchat-attachment-file {
	background:#2a2a2a;
	border-color:#3a3a3a;
	color:#fff;
}

#ezChat .chat-message.user .ezchat-attachment-file:hover {
	background:#363636;
}

#ezChat .chat-message.user .ezchat-attachment-file small,
#ezChat .chat-message.user .ezchat-attachment-image span {
	color:#d6d6d6;
}

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

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

#ezChat .chat-message.ai.avatar-hidden,
#ezChat .chat-message.agent.avatar-hidden {
	border-bottom-left-radius:18px;
}

#ezChat .chat-message .avatar {
	display: block;
	position:absolute;
	left:-34px;
	bottom:4px;
	border-radius:100%;
	height:24px;
	width:24px;
	object-fit:cover;
}

#ezChat .chat-message.agent:before {
	background:#da0000;
	content:"EZ";
}

#ezChat .chat-message.live-transfer-waiting:before {
	content:"";
	background:transparent;
	border:3px solid rgba(218,0,0,.18);
	border-top-color:#da0000;
	box-sizing:border-box;
	animation:ezChatAvatarSpin .8s linear infinite;
}

#ezChat .chat-message.live-transfer-waiting.avatar-hidden:before {
	display:none;
}

@keyframes ezChatAvatarSpin {
	to { transform:rotate(360deg); }
}

#ezChat .chat-message.ai .ai-content {
	position: relative;
	display: block;
}

#ezChat .typing-dots {
	display:inline-flex;
	align-items:center;
	gap:4px;
	min-width:34px;
	height:18px;
	vertical-align:middle;
}

#ezChat .typing-dots span {
	width:6px;
	height:6px;
	border-radius:50%;
	background:#777;
	animation: ezChatTypingDot .9s ease-in-out infinite;
}

#ezChat .typing-dots span:nth-child(2) {
	animation-delay:.14s;
}

#ezChat .typing-dots span:nth-child(3) {
	animation-delay:.28s;
}

#ezChat .chat-message.agent .typing-dots span,
#ezChat .chat-message.ai .typing-dots span {
	background:#da0000;
}

@keyframes ezChatTypingDot {
	0%, 80%, 100% { transform:translateY(0); opacity:.45; }
	40% { transform:translateY(-4px); opacity:1; }
}

#ezChat .chat-message.ai.streaming-mask .ai-content:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: min(200px, 100%);
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 58%, rgba(255,255,255,1) 100%);
	animation: ezChatStreamMask 1.4s ease-out forwards;
}

@keyframes ezChatStreamMask {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

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

#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;
	padding:0;
}
#ezChat .feedback-container {
	display:flex;
	gap:4px;
	margin-top:8px;
}
#ezChat .agent-feedback-container {
	pointer-events:none;
}
#ezChat .agent-feedback {
	display:inline-block;
	cursor:default;
	opacity:1;
}
#ezChat .agent-feedback.thumbs-up.active {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23da0000' 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.5v7c0 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.2 0 0.2 0c1.1 0 2-1 2.4-2.4l1-5.1c0.3-1.4-0.8-2.5-2.2-2.5z'/%3E%3C/svg%3E");
}
#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:0 0 9px !important;
}
#ezChat .chat-message a {
	color:#da0000;
	font-weight: initial;
}
#ezChat .chat-message a:hover {
	text-decoration: underline;
}

#ezChat .chat-message .message-content,
#ezChat .chat-message .ai-content {
	display:block;
}

#ezChat .chat-message > :first-child,
#ezChat .message-content > :first-child,
#ezChat .ai-content > :first-child {
	margin-top:0;
}

#ezChat .chat-message > :last-child,
#ezChat .message-content > :last-child,
#ezChat .ai-content > :last-child {
	margin-bottom:0;
}

#ezChat .ezchat-attachment {
	display:inline-flex;
	max-width:100%;
	color:#1a1a1a;
	text-decoration:none !important;
	font-weight:normal;
	margin-top:4px !important;
	margin-bottom:4px !important;
}

#ezChat .ezchat-attachment:hover {
	text-decoration:none !important;
}

#ezChat .ezchat-attachment-image {
	display:block;
}

#ezChat .ezchat-attachment-image img {
	display:block;
	max-width:100%;
	max-height:220px;
	border-radius:10px;
	object-fit:contain;
	background:rgba(255,255,255,.72);
}

#ezChat .ezchat-attachment-image span {
	display:block;
	margin-top:6px;
	font-size:.82em;
	color:#555;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

#ezChat .ezchat-attachment-file {
	align-items:center;
	gap:10px;
	border:1px solid rgba(0,0,0,.16);
	border-radius:10px;
	background:#f7f8fa;
	padding:9px 11px;
}

#ezChat .ezchat-attachment-file:hover {
	background:#eef1f5;
}

#ezChat .ezchat-attachment-file strong,
#ezChat .ezchat-attachment-file small {
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

#ezChat .ezchat-attachment-file small {
	color:#666;
	margin-top:2px;
	font-size:.78em;
}

#ezChat .ezchat-file-icon {
	flex:0 0 auto;
	width:28px;
	height:28px;
	border-radius:50%;
	background:#da0000;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:9px;
	font-weight:bold;
	line-height:1;
}

#ezChat .chat-message ul,
#ezChat .chat-message ol {
	margin: 7px 0 9px 20px;
	padding-left:0;
}

#ezChat .chat-message li {
	margin:3px 0;
}

#ezChat .chat-message hr {
	border:0;
	height:1px;
	background:#d4d8df;
	margin:12px 0;
}

#ezChat .chat-message table {
	display:block;
	max-width:100%;
	overflow-x:auto;
	border-collapse:collapse;
	margin:0.75em 0;
	font-size:0.9em;
	-webkit-overflow-scrolling:touch;
}

#ezChat .chat-message th,
#ezChat .chat-message td {
	border:1px solid rgba(0,0,0,0.16);
	padding:0.45em 0.6em;
	text-align:left;
	vertical-align:top;
	white-space:nowrap;
}

#ezChat .chat-message th {
	background:rgba(0,0,0,0.06);
	font-weight:bold;
}

#ezChat .chat-message h1,
#ezChat .chat-message h2,
#ezChat .chat-message h3,
#ezChat .chat-message h4 {
	margin:10px 0 6px;
	line-height:1.2;
	font-size:15px;
	padding-top:0;
}


/* === 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,
#ezChatIntegration #ezChat .new-chat-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[data-mode="live"] #query {
  padding-left: 56px; /* leave room for the visible attachment button */
}
#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;
}

#ezChatIntegration #ezChat .attach-file-btn {
  position: absolute !important;
  left: 6px;
  right: auto;
  top: auto;
  bottom: 6px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  line-height: 36px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

#ezChatIntegration #ezChat[data-mode="live"] .attach-file-btn {
  display: flex;
}

/* 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);
  }
}