/* Custom styles for Fyne Editor */

/* Make the tunes popover items container a flex column, *only for block tunes* */
.ce-settings .ce-popover__items {
  display: flex;
  flex-direction: column;
}

/* Move the alignment buttons container (wrapped in ce-popover-item-html) to the top */
/* and add a separator line after it. */
/* Targets the div.ce-popover-item-html that contains cdx-settings-button (alignment tune) */
.ce-settings .ce-popover__items .ce-popover-item-html:has(button.cdx-settings-button) {
  order: -1; 
}

/* Custom Link Styles within Editor.js Content */
.codex-editor__redactor a {
  color: inherit; /* Links inherit text color */
  text-decoration: none; /* No underline by default */
  /* position: relative; /* Might be needed for more complex ::after positioning, but often not for basic inline items */
}

.codex-editor__redactor a:hover {
  text-decoration: underline; /* Underline on hover */
}

.codex-editor__redactor a::after {
  content: '';
  display: inline-block;
  width: 0.8em;  /* Adjust size as needed, relative to current font size */
  height: 0.8em; /* Keep aspect ratio, adjust as needed */
  margin-left: 0.25em; /* Space between link text and icon */
  vertical-align: middle; /* Tries to vertically center the icon with the text. Adjust if needed (e.g., text-bottom, or a small negative margin-top) */

  background-color: currentColor; /* Makes the icon adopt the link's text color */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"></path></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"></path></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Custom Button Tool Styles */
.custom-button-wrapper {
  position: relative; /* For popover positioning */
  padding: 5px 0; /* Some padding around the wrapper */
  margin-top: 8px;    /* Add margin for spacing */
  margin-bottom: 8px; /* Add margin for spacing */
}

/* Popover for Custom Button URL Input */
.custom-button-wrapper .custom-button-url-popover { /* Increased specificity */
  position: absolute;
  top: 100%; /* Position below the button */
  left: 0;
  z-index: 10; /* Ensure it's above other elements */
  background-color: #fff;
  border: 1px solid #e8e8eb;
  box-shadow: 0 3px 15px rgba(0,0,0,0.13);
  border-radius: 6px;
  padding: 8px; /* Padding for the popover container itself */
  margin-top: 5px; /* Small gap between button and popover */
  min-width: 250px; /* Give it some reasonable width */

  /* Overrides for conflicting .ce-popover__container styles */
  opacity: 1;
  max-height: 500px; /* Or 'none', but a large value is often safer */
  pointer-events: auto;
  /* Our padding and border above should now take effect over 'padding:0' and 'border:none' */
}

/* Ensure the input inside our popover takes full width of its container */
.custom-button-wrapper .custom-button-url-popover .ce-inline-tool-input { /* Increased specificity */
  width: 100%;
  box-sizing: border-box; /* If not already handled by ce-inline-tool-input */
}

/* Placeholder for contentEditable button */
.custom-button-block[contentEditable="true"][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: inherit; /* Explicitly inherit the button's text color */
  pointer-events: none; /* So the placeholder doesn't interfere with clicks */
  font-style: italic; /* Optional: make placeholder italic */
  /* opacity: 0.5; Removed - opacity is handled by the inherited RGBA color */
}

.codex-editor ::selection {
  background-color:  var(--fyne-primary-selection);
}

.ce-block--selected .ce-block__content {
  background: var(--fyne-primary-selection);
}

.codex-editor .ce-toolbar__plus path, .ce-toolbar__settings-btn path {
  stroke: var(--fyne-primary) !important;
}

.ce-toolbar__plus, .ce-toolbar__settings-btn {
  
  background-color: rgba(255, 255, 255, 1)!important;
  /* background-color: #fcf2f0 !important; */
  transition: var(--fyne-transition-cubic);
  
  border-radius: 8px !important;
}

.ce-toolbar__plus:hover, .ce-toolbar__settings-btn:hover {
  
  /* background-color: #fcf2f0 !important; */
  transform: scale(1.04);
  box-shadow: 0px 4px 12px #FF78781A !important; 
}

/* General Block Spacing */
.ce-block {
  margin-bottom: 1em; /* Adjust this value for desired spacing */
}

.ce-popover__container {
  /* background-color: var(--fyne-elevate-90);
  border: none;
  box-shadow: inset 0px 0px 1px -4px #FCD1D1; */
  border-radius: 8px;
  font-family: var(--fyne-body-font);
  
}

.ce-popover-item__title {
  font-weight: 400 !important; 
  font-size: 14px !important;
  line-height: 16px !important;
  font-family: var(--fyne-heading-font);
}

/* Alignment Tune Buttons */
.ce-popover-item-html > div > .cdx-settings-button {
    padding: 8px !important;
}

.ce-popover-item-html > div > .cdx-settings-button:hover,
.ce-popover-item-html > div > .cdx-settings-button.cdx-settings-button--active {
    background-color: var(--fyne-elevate) !important;
    color: transparent !important;
}

.ce-popover-item-html > div > .cdx-settings-button {
  color: transparent !important;
}

.ce-popover {
  --color-background-item-hover: var(--fyne-primary-hover);
}


/* Override default Editor.js style that moves toolbar actions to the right in narrow mode */
/* @media (min-width: 651px) {
  .codex-editor--narrow .ce-toolbar__actions {
      right: auto;  
      left: -64px;  
  }
} */

/* General override for toolbar actions positioning if the above is not enough
   or if you want it consistently positioned regardless of 'narrow' mode. */
/*
.ce-toolbar__actions {
    left: -28px !important;
    right: auto !important;
}
*/

/* Custom Image Tool Styles */
.custom-image-tool {
  margin: 10px 0;
  display: flex; /* Helps with alignment if wrapper is not full width */
  flex-direction: column; /* Stack placeholder/image and potential captions if added later */
  align-items: center; /* Default alignment for items inside */
}

.custom-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 150px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  color: #888;
  font-family: var(--fyne-body-font);
  cursor: pointer;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.custom-image-placeholder:hover {
  background-color: #f0f0f0;
  border-color: #bbb;
}

.custom-image-container {
  width: 100%; /* By default, container takes full width */
  display: flex; /* To help with image alignment if needed */
  justify-content: center; /* Default center alignment of image within container */
}

.custom-image-tool img {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio by default */
  display: block; /* Removes extra space below image */
  cursor: pointer; /* Allow re-selecting image */
  object-fit: cover; /* Ensures image covers dimensions if set, might crop */
}

/* Cutout Styles */
.custom-image-tool img.custom-image-cutout-block {
  border-radius: 0;
}

.custom-image-tool img.custom-image-cutout-rounded {
  border-radius: 32px;
}

.custom-image-tool img.custom-image-cutout-gateway {
  border-radius: 160px 160px 32px 32px;
}

/* Styles for Tune Settings UI (can be refined) */
.custom-image-settings .ce-settings-group {
  padding: 5px 0;
}

.custom-image-settings .ce-settings-group__title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: #555;
}

.custom-image-settings .ce-settings-label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.85em;
  color: #333;
}

.custom-image-settings .ce-settings-input {
  width: calc(100% - 10px); /* Adjust for padding */
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.custom-image-settings .ce-settings-radio {
  display: block;
  margin-bottom: 5px;
  font-size: 0.85em;
  cursor: pointer;
}

.custom-image-settings .ce-settings-radio input {
  margin-right: 5px;
  vertical-align: middle;
}

/* Alignment: Editor.js alignment tune adds classes like .cdx-block--align-left to the block wrapper. */
/* The .custom-image-tool (wrapper) itself will be aligned by these. */
/* We need to ensure the image inside respects this. */

.custom-image-tool.cdx-block--align-left .custom-image-container {
  justify-content: flex-start;
}
.custom-image-tool.cdx-block--align-center .custom-image-container {
  justify-content: center;
}
.custom-image-tool.cdx-block--align-right .custom-image-container {
  justify-content: flex-end;
}

/* If specific width/height are set, the image might not fill the container. */
/* The justify-content on custom-image-container will then align the image itself. */

.ce-toolbar__actions {
  padding-right: 16px;
}

@media (min-width: 651px) {
  .codex-editor--narrow .codex-editor__redactor {
      margin-right: 0px;
  }

  .codex-editor--narrow .ce-toolbar__actions {
    right: 100%;
}
}

@media (max-width: 786px) {

  .codex-editor--narrow .ce-toolbar__actions {
    right: auto;
}
}

.ce-popover {
  --border-radius: 12px;
  --width: 200px;
  --max-height: 270px;
  --padding: 6px;
  --offset-from-target: 8px;
  --color-border: rgba(0, 0, 0, 0.05);
  --color-shadow: rgba(0, 0, 0, .1);
  --color-background: rgba(255, 242, 241, 0.9);
  --color-text-primary: rgba(0, 0, 0, 0.95);
  --color-text-secondary: #707684;
  --color-border-icon: rgba(201, 201, 204, .48);
  --color-border-icon-disabled: #EFF0F1;
  --color-text-icon-active: #388AE5;
  --color-background-icon-active: rgba(56, 138, 229, .1);
  --color-background-item-focus: rgba(34, 186, 255, .08);
  --color-shadow-item-focus: rgba(7, 161, 227, .08);
  --color-background-item-hover: var(--fyne-level-1);
  --color-background-item-confirm: #E24A4A;
  --color-background-item-confirm-hover: #CE4343;
  --popover-top: calc(100% + var(--offset-from-target));
  --popover-left: 0;
  --nested-popover-overlap: 4px;
  --icon-size: 20px;
  --item-padding: 3px;
  --item-height: calc(var(--icon-size) + 2 * var(--item-padding));
}

.ce-popover-item-html:has(> div > .cdx-settings-button)::after {
  content: "";
  display: block;
  /* Mimic the separator's margin and height */
  margin-top: 4px; /* Based on separatorComputedStyles */
  margin-bottom: 0px; /* Based on separatorComputedStyles */
  padding-bottom: 4px;
  background-color: rgba(0, 0, 0, 0); /* Based on separatorComputedStyles */

  /* Create the line within the pseudo-element */
  /* You might need to use absolute positioning or flexbox to place this line correctly */
  /* This example assumes a simple block layout for the pseudo-element */
  /* and styles the content itself to be the line */
  border-top: 1px solid var(--fyne-empty); /* Based on lineComputedStyles height, border, and background color */
  box-sizing: border-box; /* Ensure padding/border are included in the element's total height */
}

.ce-popover-item-separator__line {
  background-color: var(--fyne-empty);
}

.ce-popover-item-html > div {
  padding: 3px;
  display: flex;
  gap: 4px;
}

.ce-popover-item-html {
  margin: 0px 3px;
}


.ce-popover__container {
  
  background-color: rgba(255, 255, 255, 1)!important;
  z-index: 99999 !important;
  position: absolute !important;
  overflow: visible !important;
  /* border: none !important; */

  border-radius: 12px !important;
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; */
  box-shadow: 0px 4px 12px #FF78781A !important; 
}

.codex-editor,
.ce-toolbar,
.ce-toolbox {
  
  will-change: auto !important;
  
}

.cdx-search-field {
  background-color: var(--fyne-primary-elevate);
}

.cdx-search-field {
  display: none !important;
}

/* Custom Header Anchor Input Styles */
.ce-settings__anchor-container {
    display: flex;
    align-items: center;
    padding: 6px 10px;
}

.ce-settings__anchor-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--fyne-text-light);
    margin-right: 8px;
}

.ce-settings__anchor-input {
    flex-grow: 1;
    border: 1px solid var(--fyne-stroke);
    border-radius: 6px;
    padding: 6px 10px;
    background-color: var(--fyne-level-1);
    color: var(--fyne-text);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.ce-settings__anchor-input:focus {
    border-color: var(--fyne-primary);
}

/* Custom Header Tunes Styles */
.ce-settings__header-tunes {
    display: flex;
    justify-content: center;
    padding: 6px 0;
    gap: 4px;
}

.ce-settings__header-tunes .ce-settings__button {
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: var(--fyne-text);
}

.ce-settings__header-tunes .ce-settings__button:hover {
    color: var(--fyne-primary);
    background-color: transparent;
}

.ce-settings__header-tunes .ce-settings__button.cdx-settings-button--active {
    color: var(--fyne-primary);
    background-color: transparent;
}