/* :root{
  background-color: #f0f0f1 !important;
} */

/* Fix dashboard tables */
.fixed {
  position: relative !important;
}

.inline{
  display: block !important;
}

/* n8n Chat variables */
:root {
	--chat--color-primary: #FF6266;
	--chat--color-primary-shade-50: #db4061;
	--chat--color-primary-shade-100: #cf3c5c;
	--chat--color-secondary: #1B263A;
	--chat--color-secondary-shade-50: #FF6266;
	--chat--color-white: #ffffff;
	--chat--color-light: #f2f4f8;
	--chat--color-light-shade-50: #e6e9f1;
	--chat--color-light-shade-100: #FF6266;
	--chat--color-medium: #d2d4d9;
	--chat--color-dark: #101330;
	--chat--color-disabled: #777980;
	--chat--color-typing: #404040;



	--chat--spacing: 1rem;
	--chat--border-radius: 0.25rem;
	--chat--transition-duration: 0.15s;

	--chat--window--width: 400px;
	--chat--window--height: 600px;

	--chat--header-height: auto;
	--chat--header--padding: 1rem;
	--chat--header--background: var(--chat--color-primary);
	--chat--header--color: var(--chat--color-light);
	--chat--header--border-top: none;
	--chat--header--border-bottom: none;
	--chat--header--border-bottom: none;
	--chat--header--border-bottom: none;
	--chat--heading--font-size: 2em;
	--chat--header--color: var(--chat--color-light);
	--chat--subtitle--font-size: inherit;
	--chat--subtitle--line-height: 1.8;

	--chat--textarea--height: 50px;

	--chat--message--font-size: 1rem;
	--chat--message--padding: var(--chat--spacing);
	--chat--message--border-radius: var(--chat--border-radius);
	--chat--message-line-height: 1.8;
	--chat--message--bot--background: var(--chat--color-white);
	--chat--message--bot--color: var(--chat--color-dark);
	--chat--message--bot--border: none;
	--chat--message--user--background: var(--chat--color-secondary);
	--chat--message--user--color: var(--chat--color-white);
	--chat--message--user--border: none;
	--chat--message--pre--background: rgba(0, 0, 0, 0.05);

	--chat--toggle--background: var(--chat--color-primary);
	--chat--toggle--hover--background: var(--chat--color-primary-shade-50);
	--chat--toggle--active--background: var(--chat--color-primary-shade-100);
	--chat--toggle--color: var(--chat--color-white);
	--chat--toggle--size: 64px;
}
/* n8n Chat variables */


#vue-wp-app .vue-wp-app {
  box-shadow: none !important;
}
/* CSS for smart-press admin menu */
li .toplevel_page_smartpress,
#toplevel_page_smartpress a.menu-top {
  background: linear-gradient(
    45deg,
    rgba(240, 101, 149, 0.1),
    rgba(255, 98, 102, 1)
  ) !important;
  transition: background 0.5s ease-in-out;
}

li .toplevel_page_smartpress:hover,
#toplevel_page_smartpress a.menu-top:hover,
.smartpress-button:hover {
  background: linear-gradient(45deg, #FF6266, #ff6b6bf8) !important;
  scale: 1.02;
  /* border-right: 2px solid white; */
}

li .toplevel_page_smartpress:hover .wp-menu-name, .toplevel_page_smartpress:focus {
  color: white !important;
}

#toplevel_page_smartpress .wp-menu-image img {
  width: 22px;
  height: 22px;
  margin-top: -3px;
}





/* WILL BE REMOVED */

/* THIS HAVE A GLOBAL EFFECT */
#adminmenu a:hover {
  box-shadow: inset 4px 0 0 0 #ffffff;
}

.smart-press-button,
.smart-press-secondary-button {
  padding: 5px 20px;
  border-radius: 5px;
  color: white !important;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.smart-press-secondary-button {
  background: linear-gradient(45deg, #0a0909, #3d0418) !important;
  transition: background 0.5s ease-in-out;
}

.smart-press-secondary-button:hover {
  background: linear-gradient(45deg, #0a0909, #900c3a) !important;
  border-right: 2px solid white;
}

/* CSS for smart-press admin menu */

.smart-press-button-small {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin: 0 5px; */
  padding: 1px;
  color: white !important;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: linear-gradient(45deg, #FF6266, #ff6b6b) !important;
  transition: background 0.5s ease-in-out;
  width: 25px;
  height: 25px;
  bottom: 0;
  border-radius: 8px;
}

.smart-fixed-btn {
  position: relative;
  right: 10px;
  bottom: -10px;
  margin-top: -20px;
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smart-fixed-btn-textarea {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smart-press-button-small > img {
  width: 15px;
}
.smart-press-button {
  background: linear-gradient(
    45deg,
    rgba(225, 98, 102, 0.9),
    rgba(255, 98, 102, 1)
  ) !important;
  transition: background 0.5s ease-in-out;
}

li .toplevel_page_smart-press,
#toplevel_page_smart-press a.menu-top {
  background: linear-gradient(
    45deg,
    rgba(240, 101, 149, 0.1),
    rgba(255, 107, 107, 0.5)
  ) !important;
  transition: background 0.5s ease-in-out;
}

li .toplevel_page_smart-press:hover,
#toplevel_page_smart-press a.menu-top:hover,
.smart-press-button:hover {
  background: linear-gradient(45deg, #FF6266, #ff6b66) !important;
  scale: 1.02;
  /* border-right: 2px solid white; */
}

li .toplevel_page_smart-press:hover .wp-menu-name {
  color: white;
}

/* #toplevel_page_smart-press .wp-menu-image:before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background: url("../assets/smart-press-logo-150.png") no-repeat center center;
  background-size: cover;
} */

#toplevel_page_smart-press .wp-menu-image img {
  width: 22px;
  height: 22px;
  margin-top: -3px;
}

/* Edit posts page */
#smart-edit-posts-button {
  background: linear-gradient(45deg, #ff6b6b, #FF6266) !important;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: none;
  top: -3px;
  margin-left: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  background: #f6f7f7;
  font-size: 13px;
  font-weight: 400;
  line-height: 2.15384615;
  color: white;
  padding: 0 10px;
  min-height: 30px;
  -webkit-appearance: none;
  transition: all 0.8s ease-in-out;
}

#smart-edit-posts-button:hover {
  scale: 1.1;
  background: linear-gradient(45deg, #FF6266, #ff6b6b) !important;
}

.smart-press-panel,
#smart-edit-posts-settings-panel {
  margin: 10px 0px;
  background: white;
  padding: 20px;
  box-shadow: #FF6266 0px 0px 10px;
  border-radius: 20px;
}

.smart-press-enabled {
  box-shadow: #FF6266 0px 0px 5px !important;
}

/* Edit POST PAGE */
/* #mceu_23-body {
  box-shadow: #FF6266 0px 0px 10px;
  border-radius: 20px;
} */

.smart-press-textarea {
  width: 100%;
  height: 200px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: #FF6266 1px solid;
  border-radius: 5px;
  color: black;
  padding-top:30px;
}

.smart-press-result {
  min-height: 200px;
  max-height: 300px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: #FF6266 1px solid;
  border-radius: 5px;
  overflow-y: scroll;
}
.smart-press-textarea:focus {
  border: #FF6266 1px solid;
}

/* placeholder */
.smart-press-textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.smart-press-popup {
  margin: 10px 0px;
  background: rgba(255, 255, 255, 0.2); /* White background with transparency */
  padding: 20px;
  box-shadow: #FF6266 0px 0px 10px;
  border-radius: 20px;
  /* max-width: 25vw; */
  min-width: 300px;
  max-width: 300px;

  /* Apply a blur effect to the area behind the popup */
  backdrop-filter: blur(8px); /* You can adjust the blur level (10px) */

  /* Optional: Add a slight border to make it stand out */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Light border to enhance the transparency */
}

.smart-detected {
  display: flex;
  align-items: center;
  font-size: 10px;
  background: white;
  padding: 4px 10px;
  border-radius: 10px;
  color: black;
}

.smart-detected b {
  margin-right: 2px;
}

.smart-detected .circle {
  width: 8px; /* Diameter of the circle */
  height: 8px; /* Diameter of the circle */
  background-color: lightgreen; /* Circle color */
  border-radius: 50%; /* Makes it a circle */
  margin-right: 4px; /* Spacing between the circle and the text */
}

#popup-close {
  height: 20px;
  width: 20px;
  text-align: center;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  color: #fff;
  font-size: 10px;
  /* background: rgba(255, 255, 255, 0.9); */
  background: black;
  backdrop-filter: blur(2px);
  padding: 2px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smart-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.smart-selecteted-text {
  max-width: 100%;
  font-size: 12px;
  color: black;
}

#smart-panel-logo {
  position: absolute;
  top: -20px;
  z-index: 9;
}

/* RESULTS panel div */

#smart-result-content {
  font-size: 14px; /* Default font size for the entire content */
  line-height: 1.5; /* Adjust line height for readability */
}

#smart-result-content h1,
#smart-result-content h2,
#smart-result-content h3,
#smart-result-content h4,
#smart-result-content h5,
#smart-result-content h6 {
  font-size: 16px; /* Reduce heading sizes */
  margin: 5px 0; /* Adjust margins for headings */
  line-height: 1.2; /* Optional: Compact heading spacing */
}

#smart-result-content p {
  margin: 8px 0; /* Adjust paragraph margins */
}

#smart-result-content b,
#smart-result-content i,
#smart-result-content u {
  font-size: 14px; /* Ensure inline formatting is consistent */
}

#smart-result-content ul,
#smart-result-content ol {
  margin: 10px 0 10px 20px; /* Add space above and below lists */
  padding-left: 20px; /* Indent the list items */
}

#smart-result-content li {
  font-size: 14px; /* Set list item font size */
  margin: 5px 0; /* Add space between list items */
}

#smart-result-content a {
  color: #007bff; /* Link color */
  text-decoration: none; /* Remove underline */
}

#smart-result-content a:hover {
  text-decoration: underline; /* Underline links on hover */
}

#smart-result-content table {
  width: 100%; /* Ensure tables take full width of the container */
  border-collapse: collapse; /* Merge table borders */
  margin: 10px 0; /* Add space around the table */
  font-size: 14px; /* Set table font size */
}

#smart-result-content th,
#smart-result-content td {
  border: 1px solid #ccc; /* Add border to cells */
  padding: 8px; /* Add padding inside cells */
  text-align: left; /* Left-align text */
}

#smart-result-content blockquote {
  font-size: 14px; /* Blockquote font size */
  font-style: italic; /* Italicize blockquotes */
  margin: 10px 0; /* Add space around blockquotes */
  padding: 10px 20px; /* Add padding inside blockquotes */
  background-color: #f9f9f9; /* Light background for blockquotes */
  border-left: 4px solid #ccc; /* Add a left border */
}

#smart-result-content hr {
  border: none;
  border-top: 1px solid #ccc; /* Add a horizontal line */
  margin: 10px 0; /* Add space around the line */
}

#smart-result-content code {
  font-family: monospace; /* Use monospace font for code */
  background-color: #f4f4f4; /* Light gray background */
  padding: 2px 4px; /* Add padding around code */
  border-radius: 4px; /* Slight rounding for code blocks */
  font-size: 13px; /* Slightly smaller font size for code */
}

.smart-refrence-selected {
  font-size: 12px;
  color: black;
  margin: 10px 0;
}

.smart-refrence-selected input[type="checkbox"] {
  border-radius: 20px;
  border: #FF6266 1px solid;
  accent-color: #FF6266; /* This automatically matches the checkmark with the border color */
}