/* mindmap-custom.css */
body, html {
            overflow: hidden !important;
            height: 100%; /* Ensure full viewport coverage */
            margin: 0; /* Remove default margins */
        }
/* Custom Scrollbar for Saved Maps List (Optional) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px; /* Adjust width */
    height: 6px; /* For horizontal scrollbars if needed */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; /* Or use bg-gray-100 dark:bg-gray-700 */
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(139, 92, 246, 0.47); /* Tailwind stone-400/50 */
    border-radius: 3px;
    border: 1px solid transparent; /* Adjust border if needed */
    background-clip: content-box;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(120, 113, 108, 0.5); /* Tailwind stone-500/50 */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(168, 162, 158, 0.7); /* Tailwind stone-400/70 */
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
     background-color: rgba(120, 113, 108, 0.7); /* Tailwind stone-500/70 */
}

.backdrop-blur-sm {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #8b5cf6;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    margin-top: -6px; /* Adjust vertical alignment */
    /* Add dark mode variant if needed */
}

.dragging-node {
    transition: none !important;
}

body.no-scroll {
    
    overscroll-behavior: none !important; 
}

/* -----------------------------SIMPLE CSS MMP END HERE------------------- */

/* Style for the icon displayed in the node */
.node-icon-display {
  /* Vertically align with title text if needed */
  /* line-height: 1.2; */ /* Adjust if alignment is off */
  /* Prevent icon from shrinking if title is long */
  flex-shrink: 0;
}

/* Context Menu Submenu Styling */
.context-menu-button {
  position: relative; /* Needed for absolute positioning of submenu */
}

/* Hide submenu by default */
.group\/submenu .absolute {
  display: none;
}

/* Show submenu on hover/focus-within of the parent item */
.group\/submenu:hover .absolute,
.group\/submenu:focus-within .absolute {
  display: flex; /* Or block, depending on your layout */
}

/* Style the color swatch */
.context-menu-button span[style*="background-color"] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); /* Subtle inner border */
}


 /* emojis on nodes */
.node-icon-display {
  position: absolute;
  top: -0.5rem;   /* Adjust vertical position */
  right: -0.5rem;  /* Adjust horizontal position */
  font-size: 2.2rem; /* Slightly larger emoji */
  line-height: 1;    /* Prevent extra line height */
  z-index: 1;        /* Ensure it's above the node background */
  /* Optional: Add background/border for visibility */
  /* background-color: rgba(255, 255, 255, 0.7); */
  /* backdrop-filter: blur(2px); */
  /* padding: 0.1rem; */
  /* border-radius: 50%; */
  /* width: 1.5rem; */
  /* height: 1.5rem; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}



/* IMMPOORRRRRTANT THIS IS FOR THE SCROLLINGGGG ISSUEEEEEEE ON MOBILEEEE */
#mindMapCanvas {
    touch-action: none; /* Prevent default browser panning/zooming on this element */
    -webkit-touch-callout: none; /* Optional: Disable callout menu on long press (iOS) */
    -webkit-user-select: none; /* Optional: Disable text selection */
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mind-map-node {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
    transform-origin: center center;
    will-change: transform, box-shadow; /* Hint for performance */
}

/* Global cursor style during linking */
.linking-active {
  cursor: crosshair; /* Example cursor */
}




/* Add to mindMapCss.css or similar */
.quill-editor-container {
    flex-grow: 1; /* Allow editor to fill space */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent container itself from scrolling */
    border: 1px solid #d1d5db; /* Tailwind gray-300 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
}

.dark .quill-editor-container {
    border-color: #4b5563; /* Tailwind gray-600 */
}

.quill-editor-container .ql-toolbar {
    flex-shrink: 0; /* Prevent toolbar from shrinking */
    background-color: #f9fafb; /* Tailwind gray-50 */
     border-bottom: 1px solid #d1d5db; /* Tailwind gray-300 */
}

.dark .quill-editor-container .ql-toolbar {
    background-color: #374151; /* Tailwind gray-700 */
    border-bottom-color: #4b5563; /* Tailwind gray-600 */
}
/* Style the actual editor area */
.quill-editor-container .ql-container {
    flex-grow: 1;
    overflow-y: auto; /* Allow editor content to scroll */
    font-size: inherit; /* Inherit font size */
    background-color: #ffffff; /* Tailwind white */
    border: none !important; /* Override quill's border if needed */
}

 .dark .quill-editor-container .ql-container {
    background-color: #1f2937; /* Tailwind gray-800 */
    color: #d1d5db; /* Tailwind gray-300 */
 }
.dark .quill-editor-container .ql-editor {
     color: #d1d5db; /* Tailwind gray-300 */
 }
/* Adjust editor padding if needed */
.ql-editor {
    padding: 0;
    min-height: 150px; /* Match your previous textarea min-height */
    white-space: pre-wrap; /* Preserve whitespace similar to textarea */
}

/* Style the custom save button in the Quill toolbar */
.ql-snow .ql-toolbar button.ql-save {
  width: 28px; /* Standard Quill button width */
  height: 24px; /* Standard Quill button height */
  padding: 3px 5px;
  display: flex; /* Use flex to center icon */
  align-items: center;
  justify-content: center;
}

/* SVG Icon for Save Button (Floppy Disk) - Light Mode */
.ql-snow .ql-toolbar button.ql-save svg {
  width: 16px; /* Icon size */
  height: 16px;
  stroke: #4B4B4B; /* Default icon color (adjust as needed) */
  stroke-width: 1.5; /* Thinner stroke */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* SVG Icon for Save Button - Dark Mode */
.dark .ql-snow .ql-toolbar button.ql-save svg {
   stroke: #d1d5db; /* Tailwind gray-300 for dark mode */
}

/* Hide default Quill ::before pseudo-element if it adds text */
.ql-snow .ql-toolbar button.ql-save::before {
  content: "" !important;
  display: none;
}




#noteDetailModal .ql-editor {
  font-size: 1rem; /* Default is often smaller, like 13px or 0.875rem */
  /* line-height for better readability */
  /* line-height: 1.6; */
}

/* Base style for text bold in edit modal (suitable for Light Mode) */
#noteDetailModal .ql-editor strong,
#noteDetailModal .ql-editor b { /* Target both <strong> and <b> tags just in case */
  color: #6d28d9; /* Example: A strong purple (Tailwind violet-700) */
}

/* Dark Mode style (adjust color for contrast) */
.dark #noteDetailModal .ql-editor strong,
.dark #noteDetailModal .ql-editor b {
  color: #a78bfa; /* Example: A lighter purple (Tailwind purple-400) */
}


.ql-picker-options {
    border-radius: 10px;
}
.ql-snow .ql-picker {
    color: #8b5cf6;
}

#noteDetailModal .ql-toolbar.ql-snow {
  border-radius: 0.375rem;  /* 6px - Tailwind rounded-md */
  border: 0; /* Add bottom border (Tailwind gray-300) */
  padding: 2px;
}

.ql-snow .ql-stroke {
    stroke: #8b5cf6;
}
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
    fill: #8b5cf6;
}



#noteDetailModal .ql-editor .editor-note-link {
    /* Use inline-flex to align icon and text */
    display: inline-flex !important; /* Important to override Quill inline styles */
    align-items: center;
    vertical-align: middle; /* Align with surrounding text */

    color: #7c3aed; /* Tailwind violet-600 */
    text-decoration: none;
    border-bottom: 1px dotted #a78bfa; /* Add dotted underline */
    font-weight: 500;
    cursor: pointer;
    padding: 0 2px; /* Add slight horizontal padding */
    margin: 0 1px;  /* Add slight horizontal margin */
    border-radius: 3px;
    white-space: nowrap; /* Prevent wrapping for short links */
}
.dark #noteDetailModal .ql-editor .editor-note-link {
     color: #c4b5fd; /* Tailwind violet-300 */
     border-bottom-color: #8b5cf6;
     /* background-color: rgba(124, 58, 237, 0.15); */
}

#noteDetailModal .ql-editor .editor-note-link:hover {
    border-bottom-style: solid;
    background-color: rgba(233, 213, 255, 0.5);
}
.dark #noteDetailModal .ql-editor .editor-note-link:hover {
     background-color: rgba(124, 58, 237, 0.25);
}

#noteDetailModal .ql-editor .editor-note-link svg.link-icon-svg {
    /* Size is set inline */
    margin-right: 3px; /* Space between icon and text */
    /* Inherit color from parent span */
    fill: currentColor;
    vertical-align: -0.1em; /* Fine-tune vertical alignment */
}



/* ------------------------Styles for Link Deletion Mode (Node Targeting) -----------------------------------------------------*/

/* Change cursor when deletion mode is active */
.link-deletion-active #mindMapCanvas {
  cursor: pointer; /* Indicate something is clickable */
}

/* Style for nodes that are candidates for link deletion */
.node-candidate-for-deletion {
  opacity: 1 !important; /* Ensure full opacity */
  cursor: pointer !important; /* Indicate it's clickable */
  /* Add a distinct visual cue */
  outline: 3px dashed #ef4444 !important; /* Dashed Red outline (Tailwind red-500) */
  outline-offset: 3px;
  transition: outline-color 0.15s ease-in-out, transform 0.1s ease-in-out;
  transform: scale(1.03); /* Slightly enlarge */
}
.dark .node-candidate-for-deletion {
   outline-color: #f87171 !important; /* Lighter red for dark mode (Tailwind red-400) */
}
.node-candidate-for-deletion:hover {
    transform: scale(1.06); /* Enlarge more on hover */
}


/* Style for dimmed elements during deletion mode */
.link-deletion-active .element-dimmed {
  opacity: 0.2 !important; /* Make non-relevant items very faint */
  pointer-events: none; /* Make dimmed items non-interactive */
  transition: opacity 0.2s ease-in-out;
}

/* Style for the SOURCE node during deletion mode */
.link-deletion-active .node-highlight-deletion-source {
  /* Use a distinct solid highlight */
  outline: 3px solid #f59e0b; /* Solid Amber/Orange outline (Tailwind amber-500) */
  outline-offset: 2px;
  opacity: 1 !important; /* Ensure full opacity */
}
.dark .link-deletion-active .node-highlight-deletion-source {
   outline-color: #fcd34d; /* Lighter Amber/Orange outline (Tailwind amber-300) */
}
/* --- Node Hover Effect (Notes & Expanded Comments) --- */
.mind-map-node:not(.minimized):not(.placeholder):not(.dragging-node):hover {
    transform: scale(1.04); /* Slight scale up */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Slightly larger shadow */
    /* Optional: Slightly change border */
    /* border-color: #a78bfa; /* Example: Light purple (WHEN NODES JUST HAVE BEEN USED) */ 
}
/* Example dark mode hover border */
/* .dark .mind-map-node:not(.minimized):not(.placeholder):not(.dragging-node):hover {
    border-color: #f26888; /* Example: Lighter purple */
/* } */


/* === Canvas Background Dot Pattern === */


/* === Ensure interactive canvas layer is transparent === */
/* This allows the wrapper's dot pattern to show through
#mindMapCanvas {
    /* background-color: transparent !important; /* Override any other background styles 
}
*/

/* You might also want to ensure the nodes container is transparent if it isn't already */
#mindMapNodes {
    background-color: transparent;
}

/* Define dot color variables */
:root {
    --mindmap-dot-color: #d1d5db; /* Tailwind gray-300 for light mode */
}
.dark {
    --mindmap-dot-color: #4b5563; /* Tailwind gray-600 for dark mode */
}
/* Class to hide the SVG background pattern rectangle */
.pattern-hidden #mindMapBackgroundPatternRect {
    display: none;
}



/* ----------------------------------Previewwwww note--------------------------------------------------------------------- */
/* Basic styles for read-only preview content if not using @tailwindcss/typography */
#notePreviewContent {
    font-size: inherit;
}
#notePreviewContent p {
    margin-bottom: 0.6em; /* Adjust default spacing */
    line-height: 1.55;
}
#notePreviewContent h1,
#notePreviewContent h2,
#notePreviewContent h3 {
    margin-top: 1em;
    margin-bottom: 0.4em;
}
.dark #notePreviewContent h1,
.dark #notePreviewContent h2,
.dark #notePreviewContent h3 {
    color: #d1d5db; /* gray-300 */
}
 #notePreviewContent h1 { font-size: 1.5em; }
 #notePreviewContent h2 { font-size: 1.25em; }
 #notePreviewContent h3 { font-size: 1.1em; }

#notePreviewContent ul,
#notePreviewContent ol {
    margin-left: 1.5em;
    margin-bottom: 0.75em;
    list-style-position: outside;
}
#notePreviewContent ul { list-style-type: disc; }
#notePreviewContent ol { list-style-type: decimal; }

#notePreviewContent li > p { margin-bottom: 0.25em; } /* Less space inside list items */

#notePreviewContent strong,
#notePreviewContent b {
    font-weight: 600; /* Semibold */
    /* Use theme colors */
    color: #581c87; /* purple-800 */
}
.dark #notePreviewContent strong,
.dark #notePreviewContent b {
    color: #c084fc; /* purple-400 */
}

#notePreviewContent em,
#notePreviewContent i {
    font-style: italic;
}

#notePreviewContent a {
    color: #2563eb; /* blue-600 */
    text-decoration: underline;
}
.dark #notePreviewContent a {
     color: #60a5fa; /* blue-400 */
}
#notePreviewContent a:hover {
    color: #1d4ed8; /* blue-700 */
}
.dark #notePreviewContent a:hover {
     color: #3b82f6; /* blue-500 */
}

#notePreviewContent.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
#notePreviewContent.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
#notePreviewContent.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(139, 92, 246, 0.47); /* stone-400/50 */
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: content-box;
}
.dark #notePreviewContent.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(120, 113, 108, 0.5); /* stone-500/50 */
}



/* --- COMMENT -------------------  Comment Styling ----------------------------------------------------------------- */
.mind-map-comment {
    /* Base styling defined in createCommentElement using Tailwind classes */
    /* Example: bg-yellow-100 dark:bg-yellow-900/80 border border-yellow-300 dark:border-yellow-700 */
    font-size: 0.8rem; 
    line-height: 1.4;
    
    border-style: dotted !important; 
    border-width: 1px !important; 
}

.comment-text-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    /* Remove browser default focus outline */
    outline: none;
}
.comment-text-content:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af; /* gray-400 */
    pointer-events: none;
    font-style: italic;
}
.dark .comment-text-content:empty:before {
    color: #6b7280; /* gray-500 */
}

/* Visual cue when dragging comment over a potential target node */
.mind-map-comment.over-target-node {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5); /* Example: Indigo ring */
    border-color: #4f46e5; /* indigo-600 */
}

/* --- Attached Comment Styling --- */
.mind-map-comment.attached-comment {
    position: absolute; /* Ensure absolute positioning works */
    transition: all 0.2s ease-in-out; /* Smooth transitions */
}

/* Style for the minimized "bubble" or "folded corner" */
.mind-map-comment.attached-comment.minimized {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    overflow: hidden;
    cursor: pointer; /* Clickable bubble */
    border-radius: 50%;
    background-color: rgba(250, 204, 21, 0.39);
    border: 1px solid #ca8a04 !important;
    border-style: solid !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 25;
}
.dark .mind-map-comment.attached-comment.minimized {
     background-color: rgba(234, 179, 8, 0.3);
     border-color: #a16207 !important;
}

/* Hide text content when minimized, show an icon */
.mind-map-comment.attached-comment.minimized .comment-drag-handle,
.mind-map-comment.attached-comment.minimized .comment-text-content {
    display: none;
}
.mind-map-comment.attached-comment.minimized::after {
    content: '💬'; 
    font-size: 23px;
    line-height: 1;
}

/* Style for expanded comment when attached */
.mind-map-comment.attached-comment.expanded {
    /* Restore normal comment appearance */
    width: 140px !important;
    min-height: 60px !important;
    height: auto !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem;
    border-style: dotted !important; 
    border-width: 1px !important;
    border-color: #facc15 !important;
    background-color: #fefce8;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 35;
    cursor: grab; 
}
.dark .mind-map-comment.attached-comment.expanded {
     background-color: rgba(66, 32, 6, 0.49); /* dark yellow/brown */
     border-color: #713f12; /* yellow-800 */
}
.mind-map-comment.attached-comment.expanded .comment-drag-handle,
.mind-map-comment.attached-comment.expanded .comment-text-content {
    display: block; /* Show text content when expanded */
}
.mind-map-comment.attached-comment.expanded .comment-drag-handle { display: flex; }
.mind-map-comment.attached-comment.expanded::after {
    content: ''; /* Remove bubble icon when expanded */
}

/* Optional: Style for the parent node when a comment is attached */
.mind-map-node.has-attached-comment {
    /* Example: Add a subtle indicator */
     /* box-shadow: inset 0 0 0 2px #facc15; */ /* Inner yellow ring - might be too much */
     /* Maybe use a pseudo-element? */
}
.mind-map-node.has-attached-comment::before {
    content: '';
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background-color: #facc15; /* yellow-400 */
    border-radius: 50%;
    border: 1px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 26; /* Above node, below bubble */
}
.dark .mind-map-node.has-attached-comment::before {
    background-color: #eab308; /* yellow-500 */
    border-color: #1f2937; /* gray-800 */
}



/* Drag Handleee--------------------Emoji on Comment container-------------------------------------------------------- */
.comment-drag-handle {
    position: absolute;
    bottom: -6px;       /* Position slightly outside top-right */
    right: -6px;
    width: 28px;       /* Slightly larger */
    height: 28px;
    border-radius: 50%;
    background-color: rgba(250, 250, 250, 0.75); /* Slightly less transparent */
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;  
    font-size: 25px;   /* Emoji size */
    line-height: 1;
    z-index: 21;     /* Above text content */
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.15s ease, transform 0.1s ease;
    user-select: none; /* Prevent selecting the emoji text */
    -webkit-user-select: none;
}
.dark .comment-drag-handle {
    background-color: rgba(55, 65, 81, 0.75);
    border-color: rgba(255,255,255,0.15);
}
.comment-drag-handle:hover {
     background-color: rgba(240, 240, 240, 0.9);
     transform: scale(1.1); /* Slightly enlarge on hover */
}
.dark .comment-drag-handle:hover {
     background-color: rgba(75, 85, 99, 0.9);
}
.comment-drag-handle.grabbing { /* Style when actively dragging VIA handle */
    cursor: grabbing;
    background-color: rgba(220, 220, 220, 0.95);
    transform: scale(1.05); /* Indicate active drag */
}
.dark .comment-drag-handle.grabbing {
     background-color: rgba(107, 114, 128, 0.95);
}


.mind-map-comment.attached-comment.minimized {
    /* ... other minimized styles ... */
    cursor: pointer; /* Indicate clickable */
}




/* ----------------------IMGs on Canvas--------------------------- */
/* Optional: Style parent node when image is attached */
.mind-map-node.has-attached-image::after { /* Example indicator */
    content: '';
    position: absolute;
    bottom: -3px;
    left: -3px; /* Different corner than comment */
    width: 8px;
    height: 8px;
    background-color: #60a5fa; /* blue-400 */
    border-radius: 50%;
    border: 1px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 26;
}
.dark .mind-map-node.has-attached-image::after {
    background-color: #3b82f6; /* blue-500 */
    border-color: #1f2937;
}

/* Styles for Local Images Modal Grid Items 
.local-image-item {
    /* Classes applied via JS:
       aspect-square overflow-hidden rounded-md
       border border-gray-200 dark:border-gray-700
       hover:border-purple-500 hover:ring-2 hover:ring-purple-300
       dark:hover:border-purple-600 dark:hover:ring-purple-500
       cursor-pointer transition-all
       bg-gray-100 dark:bg-gray-700
       flex items-center justify-center
    
}
*/
.local-image-item img {
    /* Classes applied via JS:
       block w-full h-full object-cover
    */
    /* Optional: Add transition for smoother hover effects if any are added */
     transition: transform 0.15s ease-out;
}

.local-image-item:hover img {
   transform: scale(1.05); /* Slight zoom on hover */
}

/* -------------------------------------------------AI Feat On Img---------------------------------------------------------- */
/* Style for the AI button on image nodes */
.image-ai-button {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    background-color: rgba(255, 207, 0, 0.47); /* Dark semi-transparent */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    z-index: 25; /* Above image, below drag state */
    border: 1px solid rgba(255,255,255,0.2);
}
.mind-map-image:hover .image-ai-button {
    opacity: 1; /* Show on hover */
}
.image-ai-button:hover {
     background-color: rgba(0, 0, 0, 0.6);
}
.image-ai-button svg {
    width: 14px;
    height: 14px;
    color: white;
}

/* Style for the Image AI Interaction Box */
#imageAiInteractionBox {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.85); /* Light semi-transparent */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 55; /* Above nodes/dropdowns, below full modals */
    width: 280px; /* Adjust width as needed */
    /* Animation */
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dark #imageAiInteractionBox {
     background-color: rgba(31, 41, 55, 0.85); /* gray-800 semi-transparent */
     border-color: rgba(255, 255, 255, 0.1);
}

#imageAiInteractionBox.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

#imageAiInteractionBox .ai-box-header {
    display: flex;
    justify-content: flex-end; /* Move close button to right */
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.dark #imageAiInteractionBox .ai-box-header {
    border-bottom-color: rgba(255,255,255,0.1);
}

#imageAiInteractionBox .ai-box-close {
     background: none;
     border: none;
     padding: 2px;
     cursor: pointer;
     color: #6b7280; /* gray-500 */
}
.dark #imageAiInteractionBox .ai-box-close {
    color: #9ca3af; /* gray-400 */
}
#imageAiInteractionBox .ai-box-close:hover {
    color: #1f2937; /* gray-800 */
}
.dark #imageAiInteractionBox .ai-box-close:hover {
     color: #e5e7eb; /* gray-200 */
}


#imageAiInteractionBox .ai-box-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 4px;
    font-size: 0.875rem;
    background-color: #fff;
}
.dark #imageAiInteractionBox .ai-box-input {
    background-color: #4b5563; /* gray-600 */
    border-color: #6b7280; /* gray-500 */
    color: #e5e7eb; /* gray-200 */
}
.dark #imageAiInteractionBox .ai-box-input::placeholder {
    color: #9ca3af; /* gray-400 */
}


#imageAiInteractionBox .ai-quick-prompts button {
    background-color: rgba(167, 139, 250, 0.2); /* purple-400/20 */
    border: 1px solid rgba(167, 139, 250, 0.4); /* purple-400/40 */
    color: #6d28d9; /* violet-700 */
    padding: 3px 8px;
    border-radius: 12px; /* pill shape */
    font-size: 0.75rem; /* text-xs */
    margin-right: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.dark #imageAiInteractionBox .ai-quick-prompts button {
    background-color: rgba(196, 181, 253, 0.2); /* violet-300/20 */
    border-color: rgba(196, 181, 253, 0.4); /* violet-300/40 */
    color: #c4b5fd; /* violet-300 */
}
#imageAiInteractionBox .ai-quick-prompts button:hover {
     background-color: rgba(167, 139, 250, 0.3);
     border-color: rgba(167, 139, 250, 0.6);
}
.dark #imageAiInteractionBox .ai-quick-prompts button:hover {
     background-color: rgba(196, 181, 253, 0.3);
     border-color: rgba(196, 181, 253, 0.6);
}


#imageAiInteractionBox .ai-box-result {
    font-size: 0.8rem; /* Slightly smaller text */
    color: #374151; /* gray-700 */
    background-color: rgba(255, 255, 255, 0.5); /* Slightly different bg */
    border-radius: 4px;
    padding: 8px;
    min-height: 50px;
    max-height: 150px; /* Limit height */
    overflow-y: auto; /* Enable scroll */
    white-space: pre-wrap; /* Respect line breaks from AI */
    word-wrap: break-word;
    border: 1px solid rgba(0,0,0,0.05);
}
.dark #imageAiInteractionBox .ai-box-result {
    color: #d1d5db; /* gray-300 */
     background-color: rgba(55, 65, 81, 0.5); /* gray-700 */
     border-color: rgba(255,255,255,0.08);
}
#imageAiInteractionBox .ai-box-result.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280; /* gray-500 */
}
.dark #imageAiInteractionBox .ai-box-result.loading {
     color: #9ca3af; /* gray-400 */
}




/* In mindMapCss.css */

/* --- Image Node Enhancements --- */
.mind-map-image {
    position: relative !important;
    overflow: hidden;
    /* Add transition for potential size changes when info box opens/closes */
    /* transition: width 0.2s ease-out, height 0.2s ease-out; */
}
/* Container for buttons on image */
.image-button-container {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    gap: 4px; /* Space between buttons */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 25;
}
.mind-map-image:hover .image-button-container {
    opacity: 1;
}
/* Individual button base style */
.image-action-button {
    position: absolute !important; /* Position individually */
    width: 24px !important;
    height: 24px !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0 !important; /* Start hidden */
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
    z-index: 25 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 0 !important;
}
.image-action-button:hover {
    background-color: rgba(0, 0, 0, 0.65);
}
.image-action-button svg {
    width: 14px !important;
    height: 14px !important;
    color: white !important;
    display: block !important;
}

.mind-map-image:hover > .image-action-button { /* Target direct children */
    opacity: 1 !important;
}

/* --- POSITION AI Button (Top Right) --- */
.image-ai-button {
    top: 5px !important;
    right: 5px !important;
}

/* --- POSITION Info Button (Bottom Right) --- */
.image-info-button {
    bottom: 5px !important;
    right: 5px !important;
}

/* --- Image Info Box Styling --- */
.image-info-box {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: none; /* Remove top border to blend with image */
    z-index: 24; /* Below AI button, above other nodes */
    /* width determined by parent image in JS */
    overflow: hidden; /* Clip content */
    /* Animation setup */
    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.2s ease-out;
    will-change: transform, opacity;
}
.dark .image-info-box {
    background-color: rgba(31, 41, 55, 0.92); /* gray-800 */
    border-color: rgba(255, 255, 255, 0.1);
}
.image-info-box.visible {
    transform: scaleY(1);
    opacity: 1;
}
.image-info-box-content {
    padding: 8px 10px;
    max-height: 150px; /* Limit info height */
    overflow-y: auto;
    font-size: 0.78rem; /* Slightly smaller than comment */
    line-height: 1.5;
    color: #374151; /* gray-700 */
}
.dark .image-info-box-content {
    color: #d1d5db; /* gray-300 */
}
.image-info-box-content h5 { /* Section titles */
    font-weight: 600; /* semibold */
    font-size: 0.7rem; /* text-xs */
    text-transform: uppercase;
    color: #a855f7; /* purple-500 */
    margin-top: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid #e9d5ff; /* purple-200 */
    padding-bottom: 2px;
}
 .dark .image-info-box-content h5 {
     color: #c084fc; /* purple-400 */
     border-bottom-color: #5b21b6; /* purple-800 */
 }
.image-info-box-content p { /* Description/explanation */
    margin-bottom: 4px;
}
.image-info-box-content .info-tags span { /* Tags */
    display: inline-block;
    background-color: rgba(233, 213, 255, 0.6); /* purple-200/60 */
    color: #5b21b6; /* purple-800 */
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-right: 4px;
    margin-bottom: 4px;
}
.dark .image-info-box-content .info-tags span {
    background-color: rgba(76, 29, 149, 0.6); /* purple-800/60 */
    color: #e9d5ff; /* purple-200 */
}
 .image-info-box .info-box-close { /* Close button inside */
     position: absolute;
     bottom: 3px;
     right: 3px;
     background: rgba(0,0,0,0.1);
     border: none;
     border-radius: 50%;
     width: 18px;
     height: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: #4b5563; /* gray-600 */
     opacity: 0.6;
     transition: opacity 0.15s ease;
 }
  .dark .image-info-box .info-box-close {
      background: rgba(255,255,255,0.1);
      color: #d1d5db; /* gray-300 */
  }
 .image-info-box .info-box-close:hover {
     opacity: 1;
 }
 .image-info-box .info-box-close svg {
     width: 12px;
     height: 12px;
 }

/* In mindMapCss.css */

/* Constrain initial image size AND apply styles within Quill editor */
/* Use a more specific selector targeting the modal and editor container */
#noteDetailModal .quill-editor-container .ql-editor img {
    max-width: 250px;
    max-height: 300px;
    width: auto;
    height: auto;
    display: block;
    margin: 0.75em 0; /* Slightly more margin */
    cursor: pointer;
    border: 1px dashed rgba(168, 85, 247, 0.6); /* Purple dashed border */
    border-radius: 6px !important; /* Apply border-radius, use !important if needed */
    padding: 2px; /* Add slight padding so border isn't right on image */
    background-color: rgba(168, 85, 247, 0.05); /* Very faint purple background */
}
.dark #noteDetailModal .quill-editor-container .ql-editor img {
     border-color: rgba(139, 92, 246, 0.7);
     background-color: rgba(139, 92, 246, 0.1);
}

/* Style for image being resized */
#noteDetailModal .quill-editor-container .ql-editor img.resizing-image {
    outline: 2px solid #a855f7;
    outline-offset: 2px;
    user-select: none;
    -webkit-user-select: none;
}

/* In mindMapCss.css */

/* Individual resize handle style - LARGER HIT AREA */
.ql-resize-handle {
    position: absolute;
    width: 24px;  /* Increase total size */
    height: 24px; /* Increase total size */
    /* Make the clickable area bigger with padding */
    padding: 5px; /* Add padding around the visual part */
    background-clip: content-box; /* Background only covers content area */
    background-color: rgba(168, 85, 247, 0.8); /* Purple */
    border: 2px solid white;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    /* Center the visual part if needed (might not be necessary with bg-clip) */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}
/* Specific cursor for corner handles */
.ql-resize-handle-br { cursor: nwse-resize; }
/* ... rest of resize handle styles ... */
/* Add styles for resize handles if implemented later */

.resize-handle {
    position: absolute; /* Positioned within the container */
    width: 24px;       /* Larger size */
    height: 24px;      /* Larger size */
    background-color: #8f27a7; /* Tailwind blue-500 */
    border: 2px solid white;   /* White border for contrast */
    border-radius: 50%;        /* Circle */
    pointer-events: auto;      /* Handles ARE clickable */
    box-shadow: 0 1px 4px rgba(0,0,0,0.3); /* Add shadow for depth */
    z-index: 50;               /* Ensure handles are above image content */
    /* Transition for cursor change (optional) */
    transition: transform 0.1s ease-out;
}
.resize-handle:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}
.resize-handle-tl { top: -6px; left: -6px; cursor: nwse-resize; }
.resize-handle-tr { top: -6px; right: -6px; cursor: nesw-resize; }
.resize-handle-bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
.resize-handle-br { bottom: -6px; right: -6px; cursor: nwse-resize; }
.resize-handles-container {
    position: absolute;
    inset: 0; /* Cover the parent image node */
    pointer-events: none; /* Container doesn't block clicks */
    display: none; /* Initially hidden (equivalent to Tailwind 'hidden') */
}
/* Show container when not hidden */
.resize-handles-container:not(.hidden) {
    display: block;
}




#flashQAModal {
  z-index: 9999;
}

#userProfileModal {
    z-index: 60;
}

.notti-toast {
  z-index: 10001 !important; /* Ensure it's above other elements like Galaxy View */
  /* You can add other non-Tailwind base styles here if needed */
}






/* Add to mindMapCss.css */

.mind-map-youtube .youtube-play-overlay {
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.mind-map-youtube:hover .youtube-play-overlay {
    opacity: 1;
}

/* YouTube Player Modal */
#youtubePlayerModal {
    /* Base styles applied via JS classes */
    /* You can add custom transition overrides here if needed */
    z-index: 99;
}

#youtubePlayerVideoContainer > div { /* Target inner content div */
    /* Base styles applied via JS classes */
    /* You can add custom transition overrides here if needed */
    
}





/* Optional refinement for delete button hover */
.saved-map-card .delete-map-btn-modal,
.saved-map-card-modal .delete-map-btn-modal { /* Target both sidebar and modal */
    transition: opacity 0.15s ease-in-out, background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
#savedMapsPanelSidebar {
    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; /* Transition transform and opacity */
    transform: translateX(0%); /* Default open state */
    opacity: 1;
    will-change: transform, opacity;
    filter: none;
}

#sidebarToggleBtn {
    filter: none;
}

/* Sidebar Closed State - USE TRANSFORM */
#savedMapsPanelSidebar.sidebar-closed {
    transform: translateX(100%); /* Slide off-screen */
    opacity: 0;
    pointer-events: none; /* Prevent interaction when closed */
    /* Remove width/padding overrides as they are not needed with transform */
}

/* Toggle Button Styles (Fixed Positioned) */
#sidebarToggleBtn svg {
     transition: transform 0.3s ease-in-out;
}

/* Canvas wrapper takes full space and doesn't transition */
#mindMapCanvasWrapper {
   transition: none;
}

/* Main area setup */
#mainContentArea {
  position: relative; /* Crucial for absolute positioning of children */
  flex-grow: 1;
  overflow: hidden;
}







/* --- In mindMapCss.css --- */

/* Style for the node when audio query is active */
.mind-map-node.audio-query-active {
  outline: 3px solid #3b82f6; /* Example: Blue outline */
  outline-offset: 2px;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

/* Status indicator styling (adjust position/colors as needed) */
.audio-query-status-indicator {
  position: absolute;
  bottom: -10px; /* Adjust vertical position */
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 10px; /* Pill shape */
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  z-index: 25;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  pointer-events: none;
  /* Default state (hidden) handled by JS setting display:none initially */
  background-color: rgba(200, 200, 200, 0.8); /* Default BG */
  color: #333;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(0,0,0,0.1);
}
.dark .audio-query-status-indicator {
     border: 1px solid rgba(255,255,255,0.1);
}



.textheader-drag-handle {
    /* Tailwind classes already do a good job. 
       This is mostly for overrides or very specific adjustments.
       The 'absolute -top-1 -right-1' should work fine.
    */
    /* Ensure it's above the text content visually if overlap occurs (rare) */
    z-index: 10; 
}

#settingsModalInside {
    margin: auto;
    max-height: -webkit-fill-available;
}

.custom-toggle-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db; /* Tailwind gray-300 */
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%; /* Adjust size of checkmark SVG */
}

.dark .custom-toggle-checkbox {
    border-color: #4b5563; /* Tailwind gray-600 */
    background-color: #374151; /* Tailwind gray-700 */
}

/* Checked state */
.custom-toggle-checkbox:checked {
    background-color: #8b5cf6; /* Tailwind purple-500 */
    border-color: #7c3aed;    /* Tailwind purple-600 */
    /* SVG Checkmark (URL-encoded white checkmark) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.dark .custom-toggle-checkbox:checked {
    background-color: #a78bfa; /* Tailwind purple-400 */
    border-color: #8b5cf6;    /* Tailwind purple-500 */
    /* SVG Checkmark for dark mode (still white check on purple bg) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
}


#noteDetailEditorContainer {
    border: 0;
}


/* Dark mode styles for common Tailwind elements */
        .dark .bg-white {
            background-color: #1a202c;
        }
        
        .dark .text-gray-900 {
            color: #f7fafc;
        }
        
        .dark .border-gray-200 {
            border-color: #2d3748;
        }
        
        .dark .bg-purple-100 {
            background-color: rgba(45, 55, 72, 0.58);
        }
        
        .dark .bg-blue-100 {
            background-color: rgba(44, 37, 214, 0.22);
        }
        
        .dark .bg-yellow-100 {
            background-color: rgba(70, 72, 45, 0.37);
        }
        
        .dark .bg-red-100 {
            background-color: rgba(72, 52, 45, 0.37);
        }
        
        .dark .bg-green-100 {
            background-color: rgba(51, 72, 45, 0.37);
        }
        
        .dark .bg-indigo-100 {
            background-color: rgba(20, 15, 75, 0.37);
        }
        
        .dark .bg-black {
            background-color: rgba(15, 19, 26, 0.22);
        }
        
        .dark .bg-purple-200 {
            background-color: rgba(61, 63, 66, 0.26);
        }
        
        .dark .bg-purple-50 {
            background-color: rgba(45, 55, 72, 0.21);
        }
        
        .dark .text-gray-700 {
            color: #e0e0e0;
        }