/* Animation utilities */
.blink {
  animation: blinker 2s linear infinite;
}

.blink-medium {
  animation: blinker 1.5s linear infinite;
}

.blink-fast {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

#reading-progress-bar {
  -webkit-appearance: none; /* For Webkit browsers */
  appearance: none;
  border: none;
  background-color: transparent; /* Transparent background for Firefox */
}

#reading-progress-bar::-webkit-progress-bar {
  /* background-color: var(--fallback-bc, oklch(var(--bc) / 0.5)); /* Background color of the bar */
  background-color: transparent; /* Transparent background for the bar */
}

#reading-progress-bar::-webkit-progress-value {
  background-color: var(--fallback-s, oklch(var(--s) / 0.75)); /* Color of the filled progress */
}

#reading-progress-bar::-moz-progress-bar {
  background-color: var(--fallback-s, oklch(var(--s) / 0.75)); /* For Firefox */
}

.features-carousel {
  display: inline-flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
}

/* Hide Scrollbars */
/* Chrome, Safari, and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* IE, Edge, and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #111827;
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0 1000px #111827 inset;
  box-shadow: 0 0 0 1000px #111827 inset;
  transition: background-color 5000s ease-in-out 0s;
  color: white;
}

.task-list-item {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

ul ul {
  list-style-type: circle;
}

ul li ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

ul li ul li ul {
  list-style-type: square;
}

/* 
 * Flow Editor Styling Variables
 * These CSS variables control the appearance of the node editor
 */
:root {
  /* Node general appearance */
  --NodeType: flex;
  --NodeTypeFloat: none;
  --NodeBackgroundColor: oklch(22% 0.019 237.69);
  --NodeTextColor: rgba(149, 130, 242, 1);
  --NodeBorderSize: 2px;
  --NodeBorderColor: rgba(6, 213, 179, 1);
  --NodeBorderRadius: 8px;
  --NodeMinHeight: 32px;
  --NodeMinWidth: 160px;
  --NodePaddingTop: 8px;
  --NodePaddingBottom: 8px;
  --NodePaddingLeft: 8px;
  --NodePaddingRight: 8px;
  --NodeBoxShadowHL: 0px;
  --NodeBoxShadowVL: 0px;
  --NodeBoxShadowBR: 0px;
  --NodeBoxShadowS: 0px;
  --NodeBoxShadowColor: null;

  /* Node hover state */
  --NodeHoverBackgroundColor: rgba(12, 30, 37, 0.5);
  --NodeHoverTextColor: rgba(149, 130, 242, 1);
  --NodeHoverBorderSize: 2px;
  --NodeHoverBorderColor: rgba(149, 130, 242, 1);
  --NodeHoverBorderRadius: 8px;

  /* Node selected state */
  --NodeSelectedBackgroundColor: oklch(22% 0.019 237.69);
  --NodeSelectedTextColor: rgba(149, 130, 242, 1);
  --NodeSelectedBorderSize: 2px;
  --NodeSelectedBorderColor: rgba(149, 130, 242, 1);
  --NodeSelectedBorderRadius: 8px;
  --NodeSelectedBoxShadowHL: 0px;
  --NodeSelectedBoxShadowVL: 0px;
  --NodeSelectedBoxShadowBR: 0px;
  --NodeSelectedBoxShadowS: 0px;
  --NodeSelectedBoxShadowColor: null;

  /* Input connector styling */
  --InputBackgroundColor: rgba(137, 224, 235, 1);
  --InputBorderSize: 2px;
  --InputBorderColor: oklch(18% 0.019 237.69);
  --InputBorderRadius: 50px;
  --InputTop: 30px;
  --InputLeft: -11px;
  --InputHeight: 20px;
  --InputWidth: 20px;
  --InputHoverBackgroundColor: rgba(137, 224, 235, 1);
  --InputHoverBorderSize: 2px;
  --InputHoverBorderColor: oklch(18% 0.019 237.69);
  --InputHoverBorderRadius: 50px;

  /* Output connector styling */
  --OutputBackgroundColor: rgba(241, 200, 145, 1);
  --OutputBorderSize: 2px;
  --OutputBorderColor: oklch(18% 0.019 237.69);
  --OutputBorderRadius: 50px;
  --OutputTop: 30px;
  --OutputRight: -11px;
  --OutputHeight: 20px;
  --OutputWidth: 20px;
  --OutputHoverBackgroundColor: rgba(241, 200, 145, 1);
  --OutputHoverBorderSize: 2px;
  --OutputHoverBorderColor: oklch(18% 0.019 237.69);
  --OutputHoverBorderRadius: 50px;

  /* Connection line styling */
  --LineWidth: 5px;
  --LineColor: rgba(6, 213, 179, 1);
  --LineHoverColor: rgba(149, 130, 242, 0.8);

  /* Delete button styling */
  --DeleteDisplay: flex;
  --DeleteColor: #ffbbbd;
  --DeleteBackgroundColor: oklch(0.18 0.019 235.593 / 0.8);
  --DeleteBorderSize: 2px;
  --DeleteBorderColor: #ffbbbd;
  --DeleteBorderRadius: 50px;
  --DeleteTop: -20px;
  --DeleteRight: -20px;
  --DeleteWidth: 30px;
  --DeleteHeight: 30px;
  --DeleteFontSize: 16px;
  --DeleteLineHeight: 30px;
  --DeleteHoverColor: oklch(0.18 0.019 235.593);
  --DeleteHoverBackgroundColor: #ffbbbd;
  --DeleteHoverBorderSize: 2px;
  --DeleteHoverBorderColor: #ffbbbd;
  --DeleteHoverBorderRadius: 50px;
}

.node {
  position: absolute;
  display: var(--NodeType);
  background: var(--NodeBackgroundColor);
  color: var(--NodeTextColor);
  border: var(--NodeBorderSize) solid var(--NodeBorderColor);
  border-radius: var(--NodeBorderRadius);
  min-height: var(--NodeMinHeight);
  min-width: var(--NodeMinWidth);
  padding-top: var(--NodePaddingTop);
  padding-bottom: var(--NodePaddingBottom);
  padding-left: var(--NodePaddingLeft);
  padding-right: var(--NodePaddingRight);
  -webkit-box-shadow: var(--NodeBoxShadowHL) var(--NodeBoxShadowVL) var(--NodeBoxShadowBR) var(--NodeBoxShadowS)
    var(--NodeBoxShadowColor);
  box-shadow: var(--NodeBoxShadowHL) var(--NodeBoxShadowVL) var(--NodeBoxShadowBR) var(--NodeBoxShadowS)
    var(--NodeBoxShadowColor);
  z-index: 2;
  user-select: none;
  transition:
    background 0.2s,
    border 0.2s,
    box-shadow 0.2s;
}

.node:hover,
.node.can-connect {
  background: var(--NodeHoverBackgroundColor);
  color: var(--NodeHoverTextColor);
  border: var(--NodeHoverBorderSize) solid var(--NodeHoverBorderColor);
  border-radius: var(--NodeHoverBorderRadius);
  -webkit-box-shadow: var(--NodeHoverBoxShadowHL) var(--NodeHoverBoxShadowVL) var(--NodeHoverBoxShadowBR)
    var(--NodeHoverBoxShadowS) var(--NodeHoverBoxShadowColor);
  box-shadow: var(--NodeHoverBoxShadowHL) var(--NodeHoverBoxShadowVL) var (--NodeHoverBoxShadowBR)
    var(--NodeHoverBoxShadowS) var(--NodeHoverBoxShadowColor);
}

.node.selected {
  background: var(--NodeSelectedBackgroundColor);
  color: var(--NodeSelectedTextColor);
  border: var(--NodeSelectedBorderSize) solid var(--NodeSelectedBorderColor);
  border-radius: var(--NodeSelectedBorderRadius);
  -webkit-box-shadow: var(--NodeSelectedBoxShadowHL) var(--NodeSelectedBoxShadowVL) var(--NodeSelectedBoxShadowBR)
    var(--NodeSelectedBoxShadowS) var(--NodeSelectedBoxShadowColor);
  box-shadow: var(--NodeSelectedBoxShadowHL) var(--NodeSelectedBoxShadowVL) var(--NodeSelectedBoxShadowBR)
    var(--NodeSelectedBoxShadowS) var(--NodeSelectedBoxShadowColor);
}

.node .input-connector {
  top: var(--InputTop);
  left: var(--InputLeft);
  background: var(--InputBackgroundColor);
  border: var(--InputBorderSize) solid var(--InputBorderColor);
  border-radius: var(--InputBorderRadius);
  height: var(--InputHeight);
  width: var(--InputWidth);
  padding: 0;
  position: absolute;
  cursor: pointer;
  z-index: 3;
}

.node .input-connector:hover {
  background: var(--InputHoverBackgroundColor);
  border: var(--InputHoverBorderSize) solid var(--InputHoverBorderColor);
  border-radius: var(--InputHoverBorderRadius);
}

.node .outputs {
  float: var(--NodeTypeFloat);
}

.node .output-connector {
  top: var(--OutputTop);
  right: var(--OutputRight);
  background: var(--OutputBackgroundColor);
  border: var(--OutputBorderSize) solid var(--OutputBorderColor);
  border-radius: var(--OutputBorderRadius);
  height: var(--OutputHeight);
  width: var(--OutputWidth);
  padding: 0;
  position: absolute;
  cursor: pointer;
  z-index: 3;
}

.node .output-connector:hover {
  background: var(--OutputHoverBackgroundColor);
  border: var(--OutputHoverBorderSize) solid var(--OutputHoverBorderColor);
  border-radius: var(--OutputHoverBorderRadius);
}

.connection,
.connection-preview {
  position: absolute;
  cursor: pointer;
  height: var(--LineWidth);
  stroke-width: var(--LineWidth);
  stroke: var(--LineColor);
  background-color: var(--LineColor);
  z-index: 0;
  transform-origin: 0 0;
}

.connection-preview {
  opacity: 0.3;
}

.connection:hover {
  stroke: var(--LineHoverColor);
  background-color: var(--LineHoverColor);
}

.connection-preview {
  opacity: 0.5;
}

.connection:hover {
  stroke: var(--LineHoverColor);
  background-color: var(--LineHoverColor);
}

.delete-btn {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--DeleteColor);
  background: var(--DeleteBackgroundColor);
  border: var(--DeleteBorderSize) solid var(--DeleteBorderColor);
  border-radius: var(--DeleteBorderRadius);
  text-align: center;
  top: var(--DeleteTop);
  right: var(--DeleteRight);
  width: var(--DeleteWidth);
  height: var(--DeleteHeight);
  font-size: var(--DeleteFontSize);
  line-height: var(--DeleteLineHeight);
  cursor: pointer;
  padding-bottom: 4px;
}

.delete-btn:hover {
  color: var(--DeleteHoverColor);
  background: var(--DeleteHoverBackgroundColor);
  border: var(--DeleteHoverBorderSize) solid var(--DeleteHoverBorderColor);
  border-radius: var(--DeleteHoverBorderRadius);
}

.node:hover .delete-btn {
  display: var(--DeleteDisplay);
}

@media (max-width: 768px) {
  .node .delete-btn {
    display: var(--DeleteDisplay);
  }
}

/* Code block styling for Markdown previews */
pre {
  font-size: 0.8rem;
  padding: inherit;
  margin: 0.8em 0;
  overflow: auto;
  background-color: var(--fallback-b3, oklch(var(--b3) / var(--tw-bg-opacity, 1)));
}

pre code {
  font-size: inherit;
  color: inherit;
  padding: 0;
  background-color: var(--fallback-b3, oklch(var(--b3) / var(--tw-bg-opacity, 1)));
}

/* Styling for inline code */
:not(pre) > code {
  background-color: var(--fallback-b3, oklch(var(--b3) / var(--tw-bg-opacity, 1)));
  color: #f8f8f2; /* Light text color */
  font-size: 0.85em; /* Match font size with pre */
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* Table styling for Markdown previews */
[id^='preview'] table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.9em;
  background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity, 1)));
  color: var(--fallback-bc, oklch(var(--bc) / var(--tw-bg-opacity, 1)));
}

[id^='preview'] table th,
[id^='preview'] table td {
  border: 1px solid var(--fallback-b3, oklch(var(--b3) / var(--tw-bg-opacity, 1)));
  padding: 0.5em;
  text-align: left;
}

[id^='preview'] table th {
  background-color: var(--fallback-b3, oklch(var(--b3) / var(--tw-bg-opacity, 1)));
  font-weight: bold;
}

[id^='preview'] a {
  color: var(--fallback-s, oklch(var(--s) / var(--tw-text-opacity, 1)));
  text-decoration: underline;
}

[id^='preview'] a:hover {
  text-decoration: none;
}

[id^='preview-renderer'] > * {
  margin-bottom: 0.5rem;
  margin-top: 0rem;
}

#features_container {
  transition: opacity 0.2s ease-in;
}

#features_container.transitioning {
  opacity: 0.1;
}

/* 
New Flow Editor styles for the node editor interface.
*/

.editor-background {
  /* Define the grid line colors and spacing using two linear gradients */
  background-image:
    linear-gradient(to right, var(--fallback-pc, oklch(var(--pc) / var(--tw-bg-opacity, 1))) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fallback-pc, oklch(var(--pc) / var(--tw-bg-opacity, 1))) 1px, transparent 1px);

  /* Set the size of each grid cell (e.g., 40px x 40px) */
  background-size: 40px 40px;
}

#features_scroll::-webkit-scrollbar {
  display: none;
}
#features_scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}