* {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
  }
  /* ===== Helvetica Neue (width: normal) ===== */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Thin_Italic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_UltraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_UltraLight_Italic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Light_Italic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue.ttf') format('truetype'); /* Regular */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Medium_Italic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/styles/fonts/Helvetica_Neue_Bold_Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ===== Helvetica Neue Condensed (width: condensed) ===== */
@font-face {
  font-family: 'Helvetica Neue Condensed';
  src: url('/styles/fonts/Helvetica_Neue_Condensed_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue Condensed';
  src: url('/styles/fonts/Helvetica_Neue_Condensed_Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body {
    font-family: 'Helvetica Neue', sans-serif;
    color: #e0e0e0;
    background: black;
    margin: 0;
    padding: 0;
    font-weight: 300; /* default to Light */
}

h1 {
    font-weight: 100; /* Bold for project name */
    font-size: 30px;
}

h2 {
    font-weight: 700; /* Bold for scene titles */
}

h3 {
    font-weight: 400; /* Regular for node headings */
}

#login-username {
  background-color: #332e2e;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
}
#login-username:-webkit-autofill,
#login-username:-webkit-autofill:hover,
#login-username:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0px 1000px #332e2e inset;
  transition: background-color 9999s ease-in-out 0s;
}

.description {
    font-weight: 300; /* Light for node descriptions */
}

.scene-title {
    font-family: 'Helvetica Neue', sans-serif;

    font-weight: 700; /* Scene titles bold */
    font-size: 24px;
    margin-top: 30px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.frame-title {
    font-family: 'Helvetica Neue', sans-serif;
    padding-bottom: 30px;

    font-weight: 100; /* Node headings regular */
    font-size: 20px;
    margin-bottom: 5px;
}

/* .text-block {
font-family: 'Helvetica Neue', sans-serif;

font-weight: 300; /* Light for description text */
font-size: 8px;
line-height: 1.3;
/* white-space: pre-wrap; */
text-align: justify;
text-shadow: 1px 1px 2px black;
/* Keep your existing styles */ */
}
.assets-wrapper {
  display: flex;
  flex-direction: column; /* Stack each asset card vertically */
  gap: 20px; /* Space between asset cards */
  page-break-inside: avoid;
  break-inside: avoid;
}

.asset-card {
  display: flex;
  align-items: stretch; /* makes both image and text equal height */
  gap: 15px;
  width: 100%;
  border-radius: 8px;
  background-color: #252425;
  font-size: 8px;
  line-height: 1.3;
  font-family: 'Helvetica Neue', sans-serif;

  text-shadow: 1px 1px 2px black;
  padding: 10px; /* nice inner margin */
  box-sizing: border-box;
  page-break-inside: avoid;
  break-inside: avoid;
  min-height: 100px; /* fallback if content is too small */
}
.assetInline {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 5px 0;
}
.asset-title {
margin: 0 0 10px 0;
color: #e0e0e0;
  font-size: 14px;
  margin-bottom: 5px;
  /* padding-top: 30px; */
}
.asset-card {
  margin-bottom: 20px;
}

/* Optional: remove extra space on last one */
.asset-card:last-child {
  margin-bottom: 0;
}

.asset-img {
  flex-shrink: 0;
  width: 150px;
  height: auto;
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.asset-name {
  align-items: left;
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  font-family: 'Helvetica Neue', sans-serif;

  font-weight: bold;
  margin-bottom: 5px; /* Optional: Space between name and description */
}

.asset-desc {
  align-items: left;
  width: 80%; /* Ensure the card takes full width */
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  font-family: 'Helvetica Neue', sans-serif;

  text-align: justify;
  color: #555; /* Lighter color for the description */
  /* display: -webkit-box;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical; */
  /* overflow: hidden; */
  page-break-inside: avoid;
  break-inside: avoid;
}

.noWarning {
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  font-family: 'Helvetica Neue', sans-serif;
}
.page-break {
page-break-before: always;
}
.frame-content {
  overflow: hidden;
  margin-bottom: 20px;
}

.frame-img {
  float: left;
  /* margin: 0 15px 15px 0; */
  /* padding-left: 30px; */
  width: 25%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.text-block {
  font-size: 10px;
  line-height: 1.5;
  padding-left: 30px;
  font-family: 'Helvetica Neue', sans-serif;
  color: #e0e0e0;
  text-align: justify;
  text-shadow: 1px 1px 2px black;
  font-weight: 100; /* Node headings thin */
}



/* ===============================
   2. Map to Quill font classes
   =============================== */
   /* Quill applies .ql-font-<value>. You must set family + weight */
   .ql-font-helvetica-thin     { font-family: 'Helvetica Neue', sans-serif; font-weight: 100; }
   .ql-font-helvetica-light    { font-family: 'Helvetica Neue', sans-serif; font-weight: 300; }
   .ql-font-helvetica-regular  { font-family: 'Helvetica Neue', sans-serif; font-weight: 400; }
   .ql-font-helvetica-medium   { font-family: 'Helvetica Neue', sans-serif; font-weight: 500; }
   .ql-font-helvetica-bold     { font-family: 'Helvetica Neue', sans-serif; font-weight: 700; }

   /* (Optional) Condensed variants if you expose them in the toolbar */
   .ql-font-helvetica-condensedbold  { font-family: 'Helvetica Neue Condensed', sans-serif; font-weight: 700; }
   .ql-font-helvetica-condensedblack { font-family: 'Helvetica Neue Condensed', sans-serif; font-weight: 900; }
/* ===============================
   3. Style dropdown picker labels
   =============================== */
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-thin"]::before    { content: 'Helvetica Thin';    font-family: 'Helvetica Neue'; font-weight: 100; }
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-light"]::before   { content: 'Helvetica Light';   font-family: 'Helvetica Neue'; font-weight: 300; }
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-regular"]::before { content: 'Helvetica Regular'; font-family: 'Helvetica Neue'; font-weight: 400; }
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-medium"]::before  { content: 'Helvetica Medium';  font-family: 'Helvetica Neue'; font-weight: 500; }
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-bold"]::before    { content: 'Helvetica Bold';    font-family: 'Helvetica Neue'; font-weight: 700; }

   /* Optional condensed */
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-condensedbold"]::before  { content: 'Helvetica Condensed Bold';  font-family: 'Helvetica Neue Condensed'; font-weight: 700; }
   .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-condensedblack"]::before { content: 'Helvetica Condensed Black'; font-family: 'Helvetica Neue Condensed'; font-weight: 900; }


   #container, .storyNode, .assetNode, .storyNote, .moodCard {
       user-select: none;
       -webkit-user-select: none;
       -ms-user-select: none;
       -moz-user-select: none;
   }

   #moodCanvas {
     cursor: crosshair;
   }
   /* === Splash Screen === */
   #splash-screen {
     position: fixed;
     inset: 0;
     background: black;
     width: 100vw;
     height: 100vh;
     display: flex;
     /* align-items: center; */
     justify-content: center;
     z-index: 9999;
     opacity: 1;
     transition: opacity 3s var(--transition-ease);
   }
   #splash-logo {
     /* object-fit: cover; */
     width: 100%;
   }

   /* === Login Container === */
   #login-container {
     position: fixed;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10000;
     background: var(--bg-overlay);
     padding: 2rem;
     border-radius: var(--border-radius);
     color: var(--text-light);
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: center;
     width: var(--login-width);
     max-width: var(--login-max-width);
     box-sizing: border-box;
     /* Responsive width: fills most of viewport width on small screens */
   }

   /* === UI Overlay Lock === */
   #ui-overlay-lock {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
     z-index: 9998;
     display: none;
   }

   /* === Main Container === */
   #container {
     display: flex;
     flex-direction: row;
     height: 100vh;
     width: 100vw;
     overflow: hidden;
     position: relative;
     visibility: visible;
     opacity: 0.5;
     filter: blur(5px);
     /* transition: opacity 3s var(--transition-ease); */
     transition: all 3s var(--transition-ease);
   }


   #remoteMouseLayer {
     position: absolute !important;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 9999;
   }
   #remoteMouseLayerCanvas {
     position: absolute !important;
     flex-direction: column;
     pointer-events: none;
     z-index: 9999;
     box-sizing: border-box;
   }
   /* === Sidebar === */
   #sidebar {
     width: var(--sidebar-width);
     height: 100vh;
     background: rgba(20, 20, 20, 0.6);
     border: 1px solid var(--purple-glow);
     box-shadow: 2px 2px 5px var(--purple-glow);
     flex-shrink: 0;
     /* overflow-y: auto; */
     box-sizing: border-box;
     display: block;
   }
   #reportbar {
     width: var(--sidebar-width);
     height: 100vh;
     background: rgba(20, 20, 20, 0.6);
     border: 1px solid var(--purple-glow);
     box-shadow: 2px 2px 5px var(--purple-glow);
     flex-shrink: 0;
     /* overflow-y: auto; */
     box-sizing: border-box;
     /* padding: 10px; */
   }




   #sideBarUtilityLayerLeft {
     position: absolute;;         /* or absolute, depending on context */
     top: 50%;
     left: calc(var(--sidebar-width) - 30px);
     transform: translateY(-50%);
     z-index: 1000;           /* Optional: ensure it's above other UI */
   }
   #sideBarUtilityLayerLeft img {
     display: block;          /* Prevent bottom whitespace */
     height: 60px;            /* Or whatever fits your design */
   }
   #sideBarUtilityLayerLeft img:hover {
     filter: brightness(1.2);
     box-shadow: 0 0 8px rgba(0,0,0,0.2);
   }
   #sideBarUtilityLayerLeft img.flipped {
     transform: translateX(40px) scaleX(-1);
   }

   #sideBarUtilityLayerLeftClosed {
     position: absolute;;         /* or absolute, depending on context */
     top: 50%;
     /* left: calc(var(--sidebar-width) - 30px); */
     left: 0px;
     transform: translateY(-50%);
     z-index: 1000;           /* Optional: ensure it's above other UI */
     display: none;
   }
   #sideBarUtilityLayerLeftClosed img {
     display: block;          /* Prevent bottom whitespace */
     height: 60px;            /* Or whatever fits your design */
   }
   #sideBarUtilityLayerLeftClosed img:hover {
     filter: brightness(1.2);
     box-shadow: 0 0 8px rgba(0,0,0,0.2);
   }
   #sideBarUtilityLayerLeftClosed img.flipped {
     transform: translateX(40px) scaleX(-1);
   }





   #sideBarUtilityLayerRight {
     position: absolute;;         /* or absolute, depending on context */
     top: 50%;
     right: calc(var(--sidebar-width) - 30px);
     transform: translateY(-50%);
     z-index: 1000;           /* Optional: ensure it's above other UI */
   }

   #sideBarUtilityLayerRight img {
     display: block;          /* Prevent bottom whitespace */
     height: 60px;            /* Or whatever fits your design */
   }
   #sideBarUtilityLayerRight img:hover {
     filter: brightness(1.2);
     box-shadow: 0 0 8px rgba(0,0,0,0.2);
   }




   #sideBarUtilityLayerRightClosed {
     position: absolute;;         /* or absolute, depending on context */
     top: 50%;
     /* left: calc(var(--sidebar-width) - 30px); */
     right: 0px;
     transform: translateY(-50%);
     z-index: 1000;           /* Optional: ensure it's above other UI */
     display: none;
   }
   #sideBarUtilityLayerRightClosed img {
     display: block;          /* Prevent bottom whitespace */
     height: 60px;            /* Or whatever fits your design */
   }
   #sideBarUtilityLayerRightClosed img:hover {
     filter: brightness(1.2);
     box-shadow: 0 0 8px rgba(0,0,0,0.2);
   }
   #sideBarUtilityLayerRightClosed img.flipped {
     transform: translateX(40px) scaleX(-1);
   }



   /* === Tabs Container === */
   #canvasTabsContainer {
     height: calc(100vh - 5px);
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     /* padding-bottom: 60px; */
   }

   /* === Tab Content === */
   .tab-content {
     position: absolute;
     top: 46px !important;
     width: 100%;
     flex-grow: 1;
     display: none;

     flex-direction: column;
     height: 100%;
     box-sizing: border-box;
   }

   .tab-content.active {
     display: flex;
   }
   /* Container for the tab buttons */
   .tab-buttons {
     display: flex;
     justify-items: start;
     align-items: end;
     height: 30px;
     /* width: 100%; */
     gap: 4px;
     border-bottom: 1px solid #5a5a5a;
     background-color: #2e2e2e;
     padding: 4px 8px 0;
     z-index: 12;
     opacity: 0.4;
     pointer-events: none;
   }
   #tab-menu-buttons-asset-browser {
     display: flex;
     justify-items: start;
     align-items: end;
     height: 30px;
     width: 97%;
     position: absolute;
     top: 30px;
     left: 0px;
     gap: 4px;
     border-bottom: 1px solid #5a5a5a;
     background-color: rgba(46, 46, 46, 0);
     padding: 4px 8px 0;
     z-index: 12;
     opacity: 0.4;
     pointer-events: auto;
   }
   /* Base tab button style — consistent with .toolbar-btn */
   .tab-btn {
     padding: 8px 14px !important;
     /* width: 120px !important; */
     background-color: #393939 !important;
     border: 1px solid #5a5a5a !important;
     border-bottom: none !important; /* remove bottom border to connect with content panel */
     color: #eee !important;
     font-size: 12px !important;
     font-family: 'Helvetica Neue', sans-serif !important;
     font-weight: 500 !important;
     border-radius: 6px 6px 0 0 !important;
     cursor: pointer !important;
     transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
     /* position: relative; */
     top: 1px !important; /* aligns active tab better with content panel */
   }
   .tab-btn-blank {
     padding: 8px 14px !important;
     width: 300px !important;
     background-color: #393939 !important;
     border: 1px solid #5a5a5a !important;
     border-bottom: none !important; /* remove bottom border to connect with content panel */
     color: #eee !important;
     font-size: 12px !important;
     font-family: 'Helvetica Neue', sans-serif !important;
     font-weight: 500 !important;
     border-radius: 6px 6px 0 0 !important;
     cursor: pointer !important;
     transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
     /* position: relative; */
     top: 1px !important; /* aligns active tab better with content panel */
     opacity: 0;
   }
   /* Active tab state */
   .tab-btn.active {
     background-color: #2e2e2e !important;
     color: #fff !important;
     border-color: #7a7a7a #7a7a7a transparent #7a7a7a !important;
     z-index: 1 !important;
   }

   /* Hover effect */
   .tab-btn:hover {
     background-color: #4a4a4a !important;
   }
   /* === Main Canvas Wrapper === */
   #mainCanvasWrapper {
     flex-grow: 1;
     position: absolute;
     width: 100%;
     top: 28px;
     height: calc(-70px + 96vh);
     z-index: 10;
     background: var(--bg-medium);
     border-radius: 5px;
     overflow: hidden;
     box-sizing: border-box;

     background-position: 0 0;
     z-index: 5;
   }
   /* @supports (background-image: linear-gradient(to right, red 1px, transparent 1px)) {
       flex-grow: 1;
       position: relative;
       width: 100%;
       height: 100%;
       background: var(--bg-medium);
       border-radius: 5px;
       overflow: hidden;
       box-sizing: border-box;
       z-index: 5;

       background-image:
       /* horizontal major lines */
       /* linear-gradient(#333 1px, rgba(0, 0, 0, 0) 1px), */
       /* horizontal minor lines */
       /* linear-gradient(#444 1px, rgba(0, 0, 0, 0) 1px), */
       /* vertical major lines */
       /* linear-gradient(90deg, #333 1px, rgba(0, 0, 0, 0) 1px), */
       /* vertical minor lines */
       /* linear-gradient(90deg, #444 1px, rgba(0, 0, 0, 0) 1px); */

       /* background-size:
         100% 100px,
         100% 10px,
         100px 100%,
         10px 100%; */

       /* background-repeat: repeat, repeat, repeat, repeat; */
       /* background-position: 0 0, 0 0, 0 0, 0 0; */
     /* } */
   /* } */

   /* === Zoom Container === */
   #zoomContainer {
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
     position: relative;
     box-sizing: border-box;
     transform: scale(1);
   }

   /* === Canvas Area === */
    #canvas {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 5;
     transform: scale(1);
   }

   #canvasArea {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     padding: 10px 10px 0 10px;
     background-color: var(--bg-medium-dark);
     overflow: hidden;
     position: relative;
     z-index: 5;
     box-sizing: border-box;

   }
   #canvas {
     width: 100000px; /* or dynamically sized */
     height: 10000px; /* or dynamically sized */
     overflow: visible; /* or auto, if scrolling */
   }
   /* === Output Canvas Wrapper and Output Canvas === */

   #outputCanvas {
     height: 300px;
     width: 100%;
     background: #1f1f1f;
     border: 1px solid #555;
     border-radius: 5px;
     /* margin-top: 10px;
     margin-bottom: 10px; */
     position: relative;
     overflow: hidden;
     transition: height 0.3s ease, opacity 0.3s ease;
     opacity: 1;
     z-index: 10;
   }

   #outputCanvasWrapper {
     height: 0px;
     width: 100%;
     position: absolute;
     top: calc(-70px + 100vh);
     border-radius: 5px;
     background: #252525;
   }

   #outputCanvas.collapsed {
     opacity: 0;
   }

   #footerContent {
     height: 20px;
     visibility: hidden;
   }
   /* === HUD Wrappers === */
   #hudLayer {
     position: absolute;
     top: 28px;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 10;
     font-family: monospace;
     padding: 10px;
     background: rgba(0, 0, 0, 0.3);
     transition: opacity 0.5s ease;
   }

   #hudLayer.visible {
     opacity: 1;
   }
   #hudDescriptionPanel {
     position: absolute;
     display: flex;
     flex-direction: column;
     /* bottom: 70px; */
     /* left: 50%; */
     /* transform: translateX(-50%); */
     width: 900px;
     height: 205px;
     /* max-width: 1500px; */
     /* min-width: 900px; */
     background: rgba(30, 30, 30, 1);
     border-radius: 8px;
     padding: 10px;
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     pointer-events: auto !important;
     z-index: 100;
   }
   #quill-toolbar-wrapper-desc {
     height: 100%;
     width: auto;
     padding: 10px;
     position: relative;
     display: flex;
     flex-direction: column;
   }
   #hudDescription {
     height: 100%;
     overflow-y: hidden;
     pointer-events: auto;
     z-index: 15;
   }
   #hudDescription::-webkit-scrollbar {
     width: 12px;
   }

   #hudDescription::-webkit-scrollbar-track {
     background: #1e1e1e;
   }

   #hudDescription::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }
   #hudLayer > #hudDescriptionPanel {
     pointer-events: auto;
   }
   #palletDragHandlePreview,
   #hudResizeHandle {
     position: absolute;
     top: 0;
     right: 0;
     width: 16px;
     height: 16px;
     cursor: grab;
     z-index: 10;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="gray"><path d="M9 7h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z"/></svg>') no-repeat center;
     background-size: contain;
     pointer-events: auto;
   }


   .palletCloseBox {
     position: absolute;
     top: 0;
     left: 0;
     width: 20px;
     height: 20px;
     cursor: pointer;
     z-index: 15;
     background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="gray"> <line x1="4" y1="4" x2="20" y2="20" stroke="gray" stroke-width="2"/> <line x1="20" y1="4" x2="4" y2="20" stroke="gray" stroke-width="2"/></svg>') no-repeat center;
     background-size: 70% 70%;
   }

   #palletDragHandlePDF,
   #palletDragHandleCRDT,
   #palletDragHandleMasterColor,
   #moodPalletDragHandleQuill,
   #moodBoardAlignmentDragHandleFunction,
   #templateElementPalletDragHandle,
   #moodPalletDragHandleStyle,
   #moodPalletDragHandleTemplate,
   #moodPalletDragHandleTools,
   #palletDragHandleScheduleDisplay,
   #palletDragHandleOutput,
   #palletDragHandleCanvasDisplay,
   #palletDragHandleCanvasFunction,
   #palletDragHandleZoom,
   #palletDragHandlePlay,
   #palletDragHandleCanvasFunction,
   #palletDragHandleTools {
     position: absolute;
     top: 0;
     right: 0;
     width: 20px;
     height: 20px;
     cursor: grab;
     z-index: 14;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="gray"><path d="M9 7h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z"/></svg>') no-repeat center;
     background-size: contain;
   }
   #palletDragHandlePaper,
   #palletDragHandleFunction,
   #palletDragHandleStyle {
     position: absolute;
     top: 0;
     right: 0;
     width: 20px;
     height: 20px;
     cursor: grab;
     z-index: 14;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="gray"><path d="M9 7h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z"/></svg>') no-repeat center;
     background-size: contain;
   }

   .palletDragHandle {
     position: absolute;
     top: 0;
     right: 0;
     width: 28px;
     height: 28px;
     cursor: grab;
     z-index: 14;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="gray"><path d="M9 7h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z"/></svg>') no-repeat center;
     background-size: contain;
   }

   #hudDescriptionWrapperUpper{
     display: flex;
     justify-content: space-between;
    /* gap: 12px; /* optional: spacing between textarea and color squares */
   }
   #hudName {
     width: 30%;
     height: 20px;
     background: rgba(10, 10, 10, 0.4);
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     color: #fff;
     font-size: 12px;
     line-height: 1;
     border-radius: 5px;
     border: none;
     padding-top: calc(2% - 0.7em); /* tweak as needed */
     padding-left: 5px;
     /* box-sizing: border-box; */
     font-family: monospace;
     overflow: hidden;
     resize: none; /* disable manual resizing */
   }
   #hudDuration {
     width: 100px;
     height: 20px;
     background: rgba(10, 10, 10, 0.4);
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     color: #fff;
     font-size: 12px;
     line-height: 1;
     text-align: center;
     resize: none;
     border-radius: 5px;
     border: none;
     padding-top: calc(2% - 0.7em); /* tweak as needed */
     padding-left: 5px;
     font-family: monospace;
     /* overflow: hidden; */
   }

   #hudDescription {
     width: 100%;
     height: 90%;
     color: ##c76e6e;
     border: none;
     /* padding-buttom: 5px; */
     /* font-size: 14px; */
     font-family: monospace;
     overflow: visible;
     color: #9894ff;
     pointer-events: auto !important;
   }
   #hudImageWrapper {
     position: absolute;
     width: 300px;
     top:358px;
     left:10px;
     /* bottom: 60px; */
     background: rgba(20, 20, 20, 0.6);
     border-radius: 8px;
     padding: 10px;
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     display: flex;
     align-items: center;
     justify-content: center;
   }
   #hudImage {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
   }
   #hudSceneWrapper {
     position: absolute;
     display: flex;
     flex-direction: column;
     gap: 20px; /* This is your vertical spacing */
     top: 165px;
     left: 5px;
     height:185px;
     max-width: 200px;
     background: rgba(100, 20, 20, 0.6);
     border-radius: 8px;
     padding: 5px;
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
   }

   #hudSceneDuration {
     width: 180px;
     height: 15px;
     background: rgba(10, 10, 10, 0);
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     color: #fff;
     font-size: 12px;
     line-height: 1;
     text-align: left;
     resize: none;
     border-radius: 5px;
     border: none;
     padding-top: calc(7% - 0.7em); /* tweak as needed */
     padding-left: 15px;
     padding: 10px;
     font-family: monospace;
     margin-bottom: 10px;
   }
   #hudSceneTargetDuration {
     width: 180px;
     height: 15px;
     background: rgba(10, 10, 10, 0.4);
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     color: #fff;
     font-size: 12px;
     line-height: 1;
     text-align: left;
     resize: none;
     border-radius: 5px;
     border: none;
     padding-top: calc(7% - 0.7em); /* tweak as needed */
     padding-left: 15px;
     padding: 10px;
     font-family: monospace;
     margin-bottom: 10px;
     cursor: text;
     pointer-events: auto;
   }
   #hudSceneName {
     width: 180px;
     height: 15px;
     background: rgba(10, 10, 10, 0.4);
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     color: #fff;
     font-size: 12px;
     line-height: 1;
     border-radius: 5px;
     border: none;
     padding: 5 5px;
     padding-top: calc(7% - 0.7em); /* tweak as needed */
     padding-left: 15px;
     padding: 10px;
     font-family: monospace;
     overflow: hidden;
     resize: none; /* disable manual resizing */
     margin-bottom: 10px;
     cursor: text;
     pointer-events: auto;
   }
   #hudSceneLabel {
     width: 180px;
     height: 8px;
     color: #fff;
     font-size: 8px;
     line-height: 1;
     text-align: left;
     resize: none;
     border: none;
     /* padding-top: calc(5% - 0.7em); /* tweak as needed */ */
     padding-left: 15px;
     /* padding: 2px; */
     font-family: monospace;
     margin-bottom: 2px;
     background: rgba(0, 0, 0, 0);
   }



   /* === Fix typo and conflicting declarations for graph classes === */
   #timelineContainer {
     /* width: 100vw; */
     height: 100vh;
     font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 100;
     font-size: 18px;
   }
   .timeLine_graph{
     heigth: 100px
   }
   .heartRateChart_graph {
     height: 100vh
   }
   #timeLine {
       position: absolute;
       top: 0;
       left: 0;
       height: 20px;
       width: 100%;
       z-index: 12; /* place above canvas content */
       background-color: transparent;
       font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
       font-weight: 100;
       font-size: 14px;
   }
   #progressRingContainer {
     position: absolute;
     top: 65px;
     right: -35px;
     width: 120px;
     height: 120px;
     pointer-events: none; /* optional if it shouldn't block interactions */
   }
   /* .heartRateChart_graph {
     heigth: 120px
   } */

   /* === Box-sizing safety for all children inside zoomContainer === */
   #zoomContainer > * {
     box-sizing: border-box;
   }

   /* === Responsive tweaks for smaller viewports === */
   @media (max-width: 600px) {
     #sidebar {
       display: block;
       width: 150px;
     }
     #login-container {
       width: 95vw;
       max-width: none;
       padding: 1rem;
     }
     #hudDescriptionPanel {
       width: 90%;
     }
   }

   #connectionLayer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0;
     overflow-x: visible;
     overflow-y: visible;
   }
   #hudOuputWrapper {
     position: absolute;
     display: flex;
     flex-direction: column;
     gap: 20px; /* This is your vertical spacing */
     top: 35px;
     left: 5px;
     /* height:140px; */
     max-width: 200px;
     background: rgba(80, 80, 80, 0.2);
     border-radius: 8px;
     padding: 10px;
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
   }
   /* Add any other styles below unchanged */
   #anchorInTarget {
     pointer-events: auto; /* Only the triangle will block events */
     font-size: 16px;
     font-weight: bold;
     text-align: center;
     padding: 4px;
   }
   #anchorOutTarget {
     pointer-events: auto; /* Only the triangle will block events */
     font-size: 16px;
     font-weight: bold;
     text-align: center;
     padding: 4px;
   }
   #anchorInTarget:hover {
     stroke-width: 8;
     stroke: rgba(255,0,64,0.8);
     box-shadow: 0 0 22px rgba(255,0,64,0.8);
   }
   #anchorOutTarget:hover {
     stroke-width: 8;
     stroke: rgba(64,0,255,0.8);
     box-shadow: 0 0 22px rgba(64,0,255,0.8);
   }


   #imageIcon {
     /* position: absolute; */
     width: 20px;
     height: 20px;
     background: rgba(10, 10, 10, 0.4);
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     color: #fff;
     border-radius: 5px;
     border: none;
     padding-top: 5px;
     /* padding-left: 350px; */
     display: flex;
     align-items: center;   /* vertical center*/
     justify-content: center; /* horizontal center */
   }
   .imageIcon {
     /* position: absolute; */
     width: 20px;
     height: 20px;
     background: rgba(10, 10, 10, 0.4);
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     color: #fff;
     border-radius: 5px;
     border: none;
     padding-top: 22px;
     padding-left: 5px;
     display: flex;
     cursor: pointer;
     /* align-items: center;   /* vertical center*/ */
     /* justify-content: center; /* horizontal center */ */
   }
   #colorPickerContainer {
     display: flex;
     gap: 6px;
     padding-right: 100px;
     flex-wrap: wrap;
     justify-content: flex-end;
   }

   .nodeInspColorGrid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 6px;
     width: 100%;
   }
   .color-square-costom,
   .color-square {
     width: 20px;
     height: 20px;
     border-radius: 4px;
     cursor: pointer;
     border: 2px solid transparent;
     transition: border 0.2s ease;
   }
   .color-square-costom:hover,
   .color-square:hover {
     border: 2px solid #333;
   }

   #toggleControls {
     font-size: 10px;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 500; /* Node headings thin */
     display: flex;
     flex-direction: column;
     gap: 5px;
     left: 5px;
     width: 100%;
   }

   .toggle-button {
     font-size: 10px;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 500; /* Node headings thin */
     padding: 5px 5px 5px 5px;
     background-color: rgba(0,0,0,0);
     color: white;
     border-radius: 4px;
     cursor: pointer;
     user-select: none;
     text-align: left;
     border: 1px solid #555;
     transition: background-color 0.2s ease;
   }

   .toggle-button.active {
     border: 1px solid #007bff;
   }

   .toggle-button.selected {
     border: 1px solid #007bff;
   }

   /* Audio Player Styling */
   #audio-player {
       width: 100%;
   }

   #zoomControls {
     position: absolute;
     bottom: 60px;
     right: 60px;
     display: flex;
     gap: 10px;
     z-index: 10;
   }
   #zoomControls img {
     width: 30px;
     height: 30px;
     cursor: pointer;
     filter: brightness(0.9);
     transition: filter 0.2s ease;
   }
   #zoomControls img:hover {
     filter: brightness(1.2);
   }

   .ZoomIcons {
     position: relative;
     pointer-events: auto;
   }
   .ZoomIcons img {
     width: 30px;
     height: 30px;
     cursor: pointer;
     filter: brightness(0.5);
     transition: filter 0.2s ease;
   }
   .ZoomIcons img:hover {
     filter: brightness(1.2);
   }



   .playControlIcons {
     /* position: absolute; */
     /* bottom: 20px;
     right: 20px; */
     width: 30px;
     /* display: flex; */
     /* gap: 10px; */
     /* z-index: 10; */
   }

   .playControlIcons img {
     width: 30px;
     height: 30px;
     cursor: pointer;
     filter: brightness(0.9);
     transition: filter 0.2s ease;
   }

   .playControlIcons img {
     cursor: pointer;
     transition: transform 0.1s ease, filter 0.2s ease;
     margin: 0 5px;
   }

   .playControlIcons img:hover {
     transform: scale(1.1);
     filter: brightness(1.2);
     box-shadow: 0 0 4px rgba(255, 128, 255, 0.6);
   }

   .playControlIcons img:active {
     transform: scale(0.95);
     filter: brightness(0.9);
   }

   ul {
     list-style-type: none;
     padding-left: 0;
     font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 300;
   }

   li {
     padding: 8px;
     cursor: pointer;
     font-size: 14px;
     /* color: rgba(170, 120, 147, 0.8); */
     font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 100;
   }

   li.project {
     font-weight: bold;
     font-size: 16px;
     padding: 10px;
     color: rgba(170, 120, 147, 0.8);
     font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 300;
   }

   li.scene.active {
     background-color: rgba(200, 128, 200, 0.3);
     color: rgba(170, 120, 147, 0.8);
   }

   li.project.active {
     background-color: rgba(200, 128, 200, 0.3);
     color: rgba(170, 120, 147, 1);
   }

   li.scene {
     font-size: 10px;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 700; /* Node headings thin */
     padding-left: 40px;
     color: rgba(200, 121, 200, 0.8);
   }

   li.scene:hover {
     background-color: rgba(82, 12, 46, 1);
     color: rgba(170, 120, 147, 0.8);

   }

   li:hover {
     background-color: rgba(82, 12, 46, 0.5);
     /* color: rgba(170, 120, 147, 0.8); */
   }


   .ql-editor li {
     list-style-type: disc !important;
     margin-left: 1.5em !important;
     font-size: initial !important;
     /* color: initial !important; */
   }
   .ql-editor li:hover {
     background-color: transparent !important;
     /* color: inherit !important; */
   }


   .ql-editor {
     position: relative;
     width: 100%;
     height: auto;
     margin-bottom: 20px;
     background-color: #222;
     overflow-y: auto;
     z-index: 15;
     pointer-events: auto;
     padding: 3px 15px;
     transition: opacity 3s var(--transition-ease),
                filter 2s var(--transition-ease);
   }
   .ql-editor p {
      background-image: linear-gradient(
        to bottom,
        transparent calc(100% - 1px),
        rgba(255,255,255,0.08) 100%
      );
    }
   .ql-editor::-webkit-scrollbar {
     width: 12px;
   }
   .ql-editor::-webkit-scrollbar-track {
     background: #1e1e1e;
   }
   .ql-editor::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }
   .ql-align-justify {

   }
   .ql-snow .ql-editor blockquote {
     margin-bottom: 0px;
     margin-top: 0px;
   }
   /* .ql-editor ol li::before, */
   .ql-editor ul li::before {
     color: currentColor !important;
   }
   .ql-header,
   .ql-picker-label {
     font-size: 10px !important;
   }

   .ql-size-16px { font-size: 16px; }
   .ql-size-18px { font-size: 18px; }
   .ql-size-20px { font-size: 20px; }
   .ql-size-24px { font-size: 24px; }
   .ql-size-32px { font-size: 32px; }
   .ql-size-48px { font-size: 48px; }
   .ql-size-64px { font-size: 64px; }
   .ql-size-72px { font-size: 72px; }
   .ql-size-96px { font-size: 96px; }
   .ql-size-122px { font-size: 122px; }
   /* Kill the default "normal/small/large" injected labels */
   .ql-size .ql-picker-item::before {
     content: '' !important;
   }

   /* Replace them with the actual value (e.g. 16px, 24px, etc.) */
   .ql-size .ql-picker-item::after {
     content: attr(data-value);
     display: inline-block;
     width: 100%;
     text-align: center;
   }
   #quill-editor-small
   {
     /* position: relative; */
     display: flex;
     pointer-events: auto !important;
     overflow-y: hidden;
     height: 100% !important;
     margin-bottom: 20px;
   }
   #quill-editor-large {
     /* position: relative; */
     display: flex;
     pointer-events: auto !important;
     overflow-y: auto;
     height: 100vh;
   }

   .project.active {
     background-color: rgba(200, 128, 200, 0.3);
     color: rgba(170, 120, 147, 0.8);
   }

   .scene.active {
     background-color: rgba(200, 128, 200, 0.8); /* Lighter blue or something different */
     color: rgba(170, 120, 147, 0.8);
   }

   /* #contextMenu {
     position: absolute;
     background: rgba(20, 20, 20, 0.6);
     border: 1px solid #ccc;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
     z-index: 100;
     width: 150px;
     border-radius: 15px;
   } */


   /* Styling for the story node */
   .storyNode {
     display: inline-table;
     flex-direction: column;
     width: 200px;
     height: 250px;
     background-color: rgb(68, 68, 68);
     box-shadow: 0 0 18px rgba(0,0,0,0.8);
     border-radius: 15px;
     border: 6px solid #444;
     margin: 10px;
     padding: 10px;
     position: absolute;
     box-sizing: border-box;
     cursor: pointer;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease;
     user-select: none;
     color: #e0e0e0;
     box-shadow:  var(--shadow-versioning);
     z-index: 20;
   }

   .storyNote {
     flex-direction: column; /* changed */
     display: flex;
     width: 200px;
     height: 200px;
     background-color: rgba(235, 219, 52, 0.8);
     box-shadow: 0 0 18px rgba(0,0,0,0.8);
     border-radius: 15px;
     border: 6px solid #444;
     margin: 10px;
     padding: 10px;
     position: absolute;
     box-sizing: border-box;
     cursor: pointer;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease;
     user-select: none;
     color: #e0e0e0;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
     -webkit-user-select: none;  /* Safari/Chrome */
     -moz-user-select: none;     /* Firefox */
     -ms-user-select: none;      /* IE/Edge (pre-Chromium) */
     user-select: none;          /* Standard */
     z-index: 21;
   }
   .groupNode {
     /* display: flex;          /* changed */ */
     flex-direction: column; /* changed */
     width: 200px;
     height: 250px;
     background-color: rgb(68, 68, 68);
     box-shadow: 0 0 18px rgba(0,0,0,0.8);
     border-radius: 15px;
     border: 6px solid #444;
     margin: 10px;
     padding: 10px;
     position: absolute;
     box-sizing: border-box;
     cursor: pointer;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease;
     user-select: none;
     color: #e0e0e0;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
   }
   .moodCard {
     flex-direction: column; /* changed */
     display: flex;
     width: 400px;
     height: 200px;
     background-color: rgba(235, 219, 52, 0.8);
     box-shadow: 0 0 18px rgba(0,0,0,0.8);
     border-radius: 2px;
     border: 6px solid #444;
     margin: 10px;
     padding: 10px;
     position: absolute;
     box-sizing: border-box;
     cursor: pointer;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease;
     user-select: none;
     color: #e0e0e0;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
     -webkit-user-select: none;  /* Safari/Chrome */
     -moz-user-select: none;     /* Firefox */
     -ms-user-select: none;      /* IE/Edge (pre-Chromium) */
     user-select: none;          /* Standard */
     z-index: 21;
   }
   .moodCard:hover,
   .groupNode:hover,
   .storyNode:hover {
     background-color: #333;
   }

   .moodCard.selected {
     border: 6px solid gold;
     border-radius: 2px;
     box-shadow: 0 0 22px rgba(0,255,128,0.8);
   }

   .groupNode.selected,
   .storyNode.selected {
     /* border: 6px solid gold; */
     border: 10px solid rgb(0, 255, 5);
     border-radius: 15px;
     box-shadow:  var(--shadow-selected);
   }
   .storyNote.selected {
     border: 6px solid orange !important;
     border-radius: 15px;
     box-shadow: 0 0 22px rgba(235,76, 52,0.8);
   }
   /* Apply drag effects */

   .moodCard.dragging,
   .storyNote.dragging,
   .groupNode.dragging,
   .storyNode.dragging {
     opacity: 0.5;
     transform: scale(1.15);
   }
   #storyNodeResizeHandle {
     position: absolute;
     top: 0;
     right: 0;
     width: 16px;
     height: 16px;
     cursor: nwse-resize;
     z-index: 10;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="gray"><path d="M9 7h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z"/></svg>') no-repeat center;
     background-size: contain;
   }

   .docGroupContainer {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;

     width: auto;
     min-width: 200px;
     /* max-width: 400px; */

     background-color: rgba(68, 68, 68, 0.2);
     border: 6px solid #444;
     border-radius: 6px;
     padding: 12px;
     margin: 10px;

     position: absolute;
     top: 10px;
     left: 10px;

     box-sizing: border-box;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);

     transition: transform 0.2s ease-in-out, background-color 0.2s ease;
     user-select: none;
     color: #e0e0e0;
     cursor: pointer;
   }
   .nodeLabel {
     font-size: 16px;
     font-weight: bold;
     text-align: center;
     margin-top: 10px;
     color: #000;
   }

   .nodeNumberLabel {
     position: absolute;
     top: 5px;
     left: 5px;
     font-size: 14px;
     width: 25px;
     height: 25px;
     align-content: center;
     text-align: center;
     font-weight: bold;
     color: #ddd;
     background-color: rgba(80, 80, 80, 0.9);
     padding: 2px 2px;
     border-radius: 50%;
     animation: '';
   }

   @keyframes pulseLabel {
     0%, 100% {
       transform: scale(1);
       opacity: 1;
     }
     50% {
       transform: scale(1.1);
       opacity: 0.1;
     }
   }
   .imageContainer {
     position: relative;
     flex-direction: column;
     display: flex;
     width: 100%;
     height: 100%;
     max-height: 80%;
     max-width: 100%;
     overflow: hidden;
     object-fit: cover;
     background-color: #1f1f1f;
     justify-content: center;
     align-items: center;
     border: 1px solid #333;
     border-radius: 5px;
     z-index: 5;
     box-sizing: border-box;
     justify-content: flex-start;
     align-items: stretch;
   }
   .nodeImage {
     top: 0px;
     left: 0px;
     position: absolute;
     display: flex;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 6;
   }
   .sketchOverlayCanvas {
     position: absolute;
     display: flex;
     max-width: 100%;
     max-height: 100%;
     width: 100%;
     height: 100%;
     object-fit: cover;
     top: 0px;
     left: 0px;
     pointer-events: none;
     z-index: 7;
   }
   .sketchOverlayNode {
     position: relative;
     display: flex;
     max-width: 100%;
     max-height: 100%;
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
     pointer-events: none;
     z-index: 7;
   }
   .paperIcon {
     width: 120px;
     height: 100%;
     padding: 4px 4px;
     background-color: #393939;
     border: 1px solid #5a5a5a;
     color: #eee;
     font-weight: 500;
     border-radius: 6px;
     cursor: pointer;
   }
   .nodeDuration {
     font-size: 16px;
     font-weight: bold;
     text-align: center;
     margin-top: 10px;
     color: rgba(80, 80, 80, 0.9);
     pointer-events: auto;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 900; /* Node headings bold */
     /* user-select: text; */
   }

   .nodeIconContainer {
     display: flex;
     justify-content: space-between;
     position: absolute;
     bottom: 10px;
     left: 10px;
     right: 10px;
     height: 20px;
     pointer-events: none; /* Optional: makes sure icons don't block interactions */
   }

   .nodeIcon {
     width: 20px;
     height: 20px;
     object-fit: contain;
   }
   .nodeIcon {
     opacity: 0.3;
     filter: grayscale(100%);
     /* transition: opacity 0.2s ease, filter 0.2s ease; */
   }

   .nodeIcon.active {
     opacity: 1;
     filter: none;
   }


   /* Styling for context menu */
   .contextMenu {
     position: absolute;
     background: rgba(20, 20, 20, 0.9);
     border: 1px solid #ccc;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
     z-index: 9000;
     border-radius: 15px;
   }
   .contextMenuOption {
     padding: 10px;
     cursor: pointer;
   }
   .contextMenuOption:hover {
     background-color: #f0f0f0;
     border-radius: 15px;
   }

   /* Styling for the story node */
   .assetNode {
     width: 150px;
     height: 200px;
     background-color: #2b2b2b;
     border-radius: 30px;
     border: 4px solid #444;
     margin: 10px;
     padding: 10px;
     position: absolute;
     box-sizing: border-box;
     cursor: pointer;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease;
     user-select: none;
     color: #e0e0e0;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
   }
   /* Apply drag effects */
   .assetNode.dragging {
     opacity: 0.5;
     transform: scale(1.05);
   }
   .assetNode:hover {
     background-color: #333;
   }
   .assetNode.selected {
     border: 6px solid gold;
     border-radius: 15px;
     box-shadow: 0 0 22px rgba(0,255,128,0.8);
   }

   .assetImage {
     max-width: 100%;
     max-height: 100%;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 5px;

   }
   .assetContainer {
     width: 100%;
     height: 100px;
     background-color: #1f1f1f;
     margin-top: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid #333;
     border-radius: 5px;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     z-index: 10;
   }
   .assetLabel {
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     margin-top: 5px;
     color: #f0f0f0;
       /* pointer-events: none; /* Prevent parent from interacting */ */
       z-index: 9999; /* Ensure the input is above other UI elements */
   }

   .noteNode {
     width: 160px;
     min-height: 200px;
     background-color: #fffca8; /* Post-it yellow */
     border: 2px solid #ccc600;
     border-radius: 2px;
     box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
     padding: 8px;
     box-sizing: border-box;
     /* cursor: move; */
     /* resize: none; */
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
   }

   .noteLabel {
     font-weight: bold;
     font-size: 20px;
     margin-bottom: 6px;
     color: #333;
     text-align: left;
     white-space: nowrap;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 700;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .groupLabel {
     font-weight: bold;
     font-size: 20px;
     margin-bottom: 6px;
     color: #333;
     text-align: left;
     white-space: nowrap;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 700;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .noteBody {
     flex: 1;
     flex: 1 1 auto;
     width: 100%;
     height: 100%;
     font-size: 18px;
     font-family: sans-serif;
     padding: 6px;
     background: transparent;
     border: none;
     outline: none;
     /* resize: none; */
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 700;
     color: #444;
     line-height: 1.4;
     overflow-wrap: break-word;
     overflow: hidden;
   }
   .groupBody {
     flex: 1;
     width: 100%;
     height: 100%;
     font-size: 18px;
     font-family: sans-serif;
     padding: 6px;
     background: transparent;
     border: none;
     outline: none;
     /* resize: none; */
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 700;
     color: #444;
     line-height: 1.4;
     overflow-wrap: break-word;
   }
   /* node  */
   .resizeHandleNode {
     position: absolute;
     right: 0;
     bottom: 0;
     width: 12px;
     height: 12px;
     background: #bbb;
     cursor: se-resize;
     border-top: 2px solid #fff;
     border-left: 2px solid #fff;
     box-sizing: border-box;
     z-index: 2;
   }
   .resizeHandleImageHud{
     position: absolute;
     right: 0;
     bottom: 0;
     width: 8px;
     height: 8px;
     background: #221e1e;
     cursor: se-resize;
     border-top: 2px solid #5e5959;
     border-left: 2px solid #595757;
     box-sizing: border-box;
     z-index: 2;
     pointer-events: auto;
   }



   /* note */
   .resizeHandleGroup,
   .resizeHandleNote {
     position: absolute;
     right: 0;
     bottom: 0;
     width: 12px;
     height: 12px;
     background: #ccc600;
     cursor: se-resize;
     border-top: 2px solid #fff;
     border-left: 2px solid #fff;
     box-sizing: border-box;
     z-index: 2;
   }
   .noteNode.dragging {
     opacity: 0.5;
     transform: scale(1.05);
   }
   .noteNode:hover {
     background-color: #333;
   }

   .noteNode.selected {
     border: 6px solid gold;
     border-radius: 15px;
     box-shadow: 0 0 22px rgba(0,255,128,0.8);
     /* box-shadow: 0 0 0 3px black, 0 0 8px rgba(255, 255, 255, 0.4); */

   }

   .connectionLine {
     background-color: #333
     stroke; #000;
     /* fill: transparent; */
     height: 4px;
     pointer-events: all;
     transition: stroke-width 0.2s ease;
   }
   .connectionLine:hover {
     stroke-width: 8;
     stroke: #0A5E70;
     box-shadow: 0 0 22px rgba(0,0,255,0.8);
     fill: #0A5E70;
   }

   .dot {
     width: 20px;
     height: 20px;
     background: rgba(115, 112, 115, 1);
     border-radius: 50%;
     position: absolute;
     cursor: pointer;
     pointer-events: all;
     border: 4px solid #5e3178;
     z-index: 10;
   }

   .inputDot::before, .outputDot::before {
     content: '';
     position: absolute;
     top: -8px;
     left: -8px;
     width: 28px;
     height: 28px;
     background: transparent;
   }

   .inputDot {
     top: 50%;
     left: -18px;
     transform: translateY(-50%);
   }
   .inputDot:hover {
     width: 40px;
     height: 40px;
     border: 3px solid #ccc;
   }
   .outputDot {
     top: 50%;
     right: -18px;
     transform: translateY(-50%);
   }
   .outputDot:hover {
     width: 40px;
     height: 40px;
     border: 3px solid #ccc;
   }
   .assetDotIn {
     top: -19px;
     right: 50%;
     transform: translateX(50%);
     border: 2px solid #ccc;

   }
   .assetDotIn:hover {
     width: 40px;
     height: 40px;
     border: 3px solid #ccc;
   }
   .assetDotOut{
     top: 100%;
     right: 50%;
     transform: translateX(50%);
     border: 2px solid #ccc;
   }
   .assetDotOut:hover {
     width: 40px;
     height: 40px;
     border: 3px solid #ccc;
   }
   .assetDotIn::before,
   .assetDotOut::before {
     content: "";
     position: absolute;
     top: -8px;
     left: -8px;
     width: 24px;
     height: 24px;
     background: transparent;
   }

   .updateDot {
     visibility: hidden;
     position: absolute;
     width: 20px;
     height: 20px;
     border-radius: 10px;
     background: #0f0;
     top: 10px;
     right: 10px;
     animation: pulseUpdate 1.5s infinite ease-in-out;
   }

   @keyframes pulseUpdate {
     0%, 100% {
       transform: scale(1);
       opacity: 1;
     }
     50% {
       transform: scale(1.4);
       opacity: 0.2;
     }
   }
   /* Styling for the story node */
   .outputNode {
     width: 200px;
     height: 250px;
     background-color: rgb(68, 68, 68);
     border-radius: 15px;
     border: 6px solid #444;
     margin: 10px;
     padding: 10px;
     position: absolute;
     box-sizing: border-box;
     cursor: pointer;
     transition: transform 0.2s ease-in-out, background-color 0.2s ease;
     user-select: none;
     color: #e0e0e0;
     border-color: rgba(0, 255, 155, 0.4);
     box-shadow: 0 0 8px rgba(0, 255, 155, 0.4);
   }

   .outputNode:hover {
     background-color: #333;
   }

   .outputNode.selected {
     border: 6px solid gold;
   }


   .layoutGroup {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     justify-content: center;
     margin-top: 8px;
   }

   /* General option box */
   .layoutOption {
     width: 80px;
     height: 50px;
     background-color: #ddd;
     display: grid;
     align-items: center;
     justify-items: center;
     padding: 4px;
     border: 2px solid transparent;
     border-radius: 4px;
     cursor: pointer;
     box-sizing: border-box;
   }

   .layoutOption.active {
     border-color: #007bff;
     background-color: #eef6ff;
   }

   /* Small squares inside the option */
   .smallSquare {
     background-color: #666;
     width: 15px;
     height: 15px;
   }

   /* Specific layouts */
   .layout1 {
     grid-template-columns: 1fr;
   }

   .layout2 {
     grid-template-columns: repeat(2, 1fr);
   }

   .layout4 {
     grid-template-columns: repeat(2, 1fr);
   }

   .layout6 {
     grid-template-columns: repeat(3, 1fr);
   }
   .no-select {
     user-select: none !important;
     -webkit-user-select: none !important;
     -ms-user-select: none !important;
   }
   /* Toolbar container */
   #canvasHeader.toolbar {
     display: flex;
     position: sticky;
     gap: 8px;
     padding: 10px 16px;
     background-color: #1f1f1f;
     border-bottom: 1px solid #333;
     top: 0;
     z-index: 10;
     opacity: 0.4;
     pointer-events: none;
   }

   /* Base button style */
   .toolbar-btn {
     padding: 8px 14px;
     background-color: #393939;
     border: 1px solid #5a5a5a;
     color: #eee;
     font-size: 12px;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 500; /* Node headings thin */
     border-radius: 6px;
     cursor: pointer;
     transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
   }

   /* Hover effect */
   .toolbar-btn:hover {
     background-color: #525252;
     border-color: #aaa;
   }

   /* Active (click) effect */
   .toolbar-btn:active {
     background-color: #3a3a3a;
     transform: scale(0.98);
   }

   /* Optional: disabled state */
   .toolbar-btn:disabled {
     background-color: #2a2a2a;
     color: #777;
     cursor: not-allowed;
   }

   #saveSketchBtn{
     position: relative;
     top: 7px;
     /* margin-left: 17px; */
     width: 100px;
     pointer-events: auto;
     background-color: rgb(70,20,20);
   }
   /* Base button style */
   .userDisp {
     padding: 10px 10px 0px 10px;
     width: 100%;
   }
   .userDispProject {
     padding: 0px 10px 0px 10px;
     width: 100%;
   }
   .logout-btn {
     /* width: 180px; */
     height: 30px;
     padding: 8px 14px;
     background-color: #393939;
     border: 1px solid #5a5a5a;
     color: #eee;
     font-size: 14px;
     border-radius: 4px 6px;
     right: 6px;
     cursor: pointer;
     transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
     pointer-events: auto;
   }

   /* Hover effect */
   .logout-btn:hover {
     background-color: #525252;
     border-color: #aaa;
   }
   .userName {
     width: 150px;
     padding: 8px 14px;
     margin: 10px 0; /* adds space above and below */

     background-color: #292929;
     border: 1px solid #5a5a5a;
     color: #bubble;
     font-size: 12px;
     border-radius: 4px;
     cursor: pointer;
     text-align: center;
     transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
   }
   /* Active (click) effect */
   .logout-btn:active {
     background-color: #3a3a3a;
     transform: scale(0.98);
   }
   .report-btn {
     cursor: pointer;
     padding: 0.5em 1em;
     margin: 0.25em 0;
     background-color: #444;
     border: 1px solid rgba(255, 128, 255, 0.6);
     border-radius: 4px;
     color: rgba(255, 128, 255, 0.6);
     transition: all 0.2s ease;
     list-style-type: none;
   }
   /* Report */
   /* Hover effect */
   .report-btn:hover {
     background-color: #525252;
     border-color: #aaa;
     background-color: rgba(82, 12, 46, 1);
     color: rgba(170, 120, 147, 0.8);
   }

   /* Active (click) effect */
   .report-btn:active {
     background-color: #3a3a3a;
     transform: scale(0.98);
   }

   /* Optional: disabled state */
   .report-btn:disabled {
     background-color: #2a2a2a;
     color: #777;
     cursor: not-allowed;
   }

   /* heart rate */
   .heart-rate-slider {
     -webkit-appearance: none;
     width: 90px !important;
     outline: none;
     background: transparent !important;
     border: 0px solid !important;
   }
   .heart-rate-slider::-webkit-slider-runnable-track {
     height: 6px;
     transform: translateY(10px);
     background: linear-gradient(to right, #473361, #A11157);
     border-radius: 3px;
   }
   .heart-rate-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 15px;
     height: 15px;
     /* padding-top: 10px; */
     transform: translateY(-5px);
     border-radius: 50%;
     background: #363539;
     border: 1px solid #6F6B75;
     cursor: pointer;
     transition: background 0.3s, transform 0.2s;
   }

   .heart-rate-slider::-webkit-slider-thumb:hover {
     transform: scale(1.2);
     transform: translateY(-5px);
   }



   .heart-rate-value {
     font-size: 12px;
     margin-top: 10px;
     color: #6F6B75;
   }
   .heart-rate-label {
     font-size: 12px;
     margin-top: 10px;
     color: #6F6B75;
   }
   .nodeTimingGroup {
     display: flex;
     flex-direction: row;
     gap: 5px;
   }
   .nodeImageGroup {
     display: flex;
     flex-direction: row;
     gap: 5px;
   }
   .nodeInspInputDuration {
     width: 90%;
     background: #222;
     color: #fff;
     border: 1px solid #333;
     resize: none;
     align-content: center;
     padding-right: 5px;
     text-align: right;
   }
   .toggle-container {
     display: flex;
     cursor: pointer;
     display: flex;
     align-items: center;      /* Vertical alignment */
     justify-content: flex-start;  /* align row to the left */
     padding: 4px;
   }

   .toggle-icon-node {
     width: 32px;
     height: 32px;
     opacity: 0.5
     object-fit: contain;
     padding: 4px;             /* Equal padding around image */
     box-sizing: border-box;   /* Ensures padding doesn't break sizing */
     cursor: pointer;
     transition: opacity 0.2s, transform 0.2s;
   }
   .toggle-icon-editor{
     width: 32px;
     height: 32px;
     opacity: 0.5
     object-fit: contain;
     padding: 4px;             /* Equal padding around image */
     box-sizing: border-box;   /* Ensures padding doesn't break sizing */
     cursor: pointer;
     transition: opacity 0.2s, transform 0.2s;
   }
   .toggle-icon-node.active {
     opacity: 1;
     transform: scale(1.1);
     border: 2px solid #007BFF;
     border-radius: 6px;
   }
   .toggle-icon-editor.active {
     opacity: 1;
     transform: scale(1.1);
     border: 2px solid #007BFF;
     border-radius: 6px;
   }
   .prompt-container {
     display: flex;
     gap: 10px;
     cursor: pointer;
   }
   .prompt-icon {
     width: 20px;
     height: 20px;
     opacity: 0.5;
     transition: opacity 0.2s, transform 0.2s;
   }
   .prompt-icon:hover {
     background-color: #525252;
     border-color: #aaa;
     background-color: rgba(82, 12, 46, 1);
     color: rgba(170, 120, 147, 0.8);
   }
   .transfer-icon {
     width: 20px;
     height: 20px;
     opacity: 0.5;
     transition: opacity 0.2s, transform 0.2s;
   }
   .transfer-icon:hover {
     background-color: #525252;
     border-color: #aaa;
     background-color: rgba(82, 12, 46, 1);
     color: rgba(170, 120, 147, 0.8);
   }

   .login-box {
     background: rgba(0, 0, 0, 0.85);
     padding: 2rem 3rem;
     border-radius: 10px;
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
     width: 1020px;
     text-align: center;
   }

   .login-box h2 {
     margin-bottom: 1.5rem;
     font-weight: 500;
     color: #eee;
   }

   .login-box input[type="text"],
   .login-box input[type="password"] {
     width: 100%;
     max-width: 360px;
     padding: 10px 12px;
     margin-bottom: 1rem;
     border: none;
     border-radius: 5px;
     background-color: #2c2c2c;
     color: #eee;
   }

   .login-box button {
     width: 51%;
     padding: 8px;
     border: 2px solid #51677a;
     border-radius: 5px;
     background: #70428f;
     color: white;
     font-weight: bold;
     cursor: pointer;
     transition: background 0.3s ease;
   }

   .login-box button:hover {
     background: #006edc;
   }


   .floating-panel,
   .floating-panel * {
     user-select: none;        /* Prevent text/image selection */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
   }
   .floating-panel {
     position: absolute;
     top: 120px;
     /* left: 120px; */
     right: 120px;
     width: 630px;
     height: 800px;
     background-color: rgba(5, 5, 5, 1);
     color: white;
     border-radius: 12px;
     box-shadow: 0 0 10px rgba(0,0,0,0.5);
     resize: both;
     /* overflow: auto; */
     z-index: 999;
     border: 1px solid #444;
     display: flex;
     flex-direction: column;
   }

   .panel-header {
     display: flex;
     flex-direction: column;
     height: 52px;
     background-color: #181818;
     padding: 6px 10px;
     border-radius: 12px;
     cursor: move;
     justify-content: space-between;
     align-items: center;
     border-bottom: 0px solid #444;
     font-size: 14px;
   }

   .panel-header button {
     background: none;
     border: none;
     color: #ccc;
     cursor: pointer;
     font-size: 14px;
     margin-left: 6px;
   }

   .panel-header button:hover {
     color: white;
   }
   .panel-header {
     display: flex;
     flex-direction: column;
     height: 52px;
     background-color: #181818;
     padding: 12px 10px;
     border-radius: 12px;
     cursor: move;
     justify-content: space-between;
     align-items: center;
     border-bottom: 0px solid #444;
     font-size: 14px;
   }
   .panel-footer {
     height: 13px;
     width: 100hv%;
     padding: 12px 11px;
     cursor: move;
     font-size: 12px !important;
     font-family: 'Helvetica Neue', sans-serif !important;
     font-weight: 400 !important;
     border-top: 1px solid #444;
   }
   .nav-buttons-assset-browser {
     border: 1px solid #444;
      border-radius: 5px;
      background-color: #131111;
      color: #888;
   }
   .panel-content {
     flex: 1;
     padding: 10px;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
     gap: 8px;
     overflow-y: auto;
     user-drag: none;
     -webkit-user-drag: none; /* Safari */
   }

   .panel-content img {
     width: 100%;
     border-radius: 6px;
     cursor: pointer;
     object-fit: cover;
     transition: transform 0.2s ease;
     user-drag: none;
     -webkit-user-drag: none; /* Safari */
   }
   .asset-group-header {
     grid-column: 1 / -1;
     margin-top: 10px;
     padding: 6px 4px;
     padding-left: 15px;
     font-weight: bold;
     border-radius: 14px;
     color: #aaa;
     background-color: #2b1232;
     height: 20px;
   }
   /* .panel-content img:hover {
     transform: scale(2.05);
     z-index: 9999;
     user-drag: none;
     -webkit-user-drag: none; /* Safari */
   /* } */
   .panel-resizer {
     position: absolute;
     width: 19px;
     height: 18px;
     right: -4px;
     bottom: -4px;
     cursor: se-resize;
     background: rgba(255,255,255,0.1);
     border-radius: 4px;
     z-index: 10;
     background: url("data:image/svg+xml;utf8,\
     <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
     <rect x='0' y='0' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='3' y='0' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='6' y='0' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='9' y='0' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='0' y='3' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='3' y='3' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='6' y='3' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='0' y='6' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='3' y='6' width='2' height='2' fill='%237e7e7e'/>\
     <rect x='0' y='9' width='2' height='2' fill='%237e7e7e'/>\
     </svg>") no-repeat center;
     background-size: contain;
   }
   .assetGridImgWrapper{
     position: relative;      /* anchor for absolute child */
   }
   .assetGridImglabel {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     max-width: 145px;
     border-radius: 5px;
     z-index: 10;
     background: rgba(0,0,0,0.6);
     word-wrap: break-word;
     color: white;
     padding: 4px 6px;
     font-size: 9px !important;
     font-family: 'Helvetica Neue', sans-serif !important;
     font-weight: 300 !important;
     pointer-events: none;
   }

   .panel-content::-webkit-scrollbar {
     width: 12px;
   }

   .panel-content::-webkit-scrollbar-track {
     background: #1e1e1e;
   }

   .panel-content::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }


   #margin-controls {
     position: relative;
     top: 0;
     left: 0;
     right: 0;
     height: 100%;
     pointer-events: none;
     z-index: 10;
   }

   .margin-indicator {
     position: absolute;
     top: 32px;
     width: 0;
     height: 0;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     pointer-events: auto;
     cursor: ew-resize;
   }

   .margin-indicator.left {
     left: 20px;
     border-left: 10px solid #888;
   }

   .margin-indicator.right {
     left: 600px;
     border-right: 10px solid #888;
   }







   .hidden {
     display: none;
   }
   #thumbnailGridNode {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: 10px;
     padding: 20px;
   }
   .zoom-preview {
       position: fixed;
       max-width: 400px;
       z-index: 10000;
       pointer-events: none;
       border-radius: 6px;
       object-fit: cover;
       box-shadow: 0 0 20px rgba(0,0,0,0.8);
       border: 1px solid #888;


       /* transform: scale(2); */
       /* transform-origin: center; */
   }
   .thumbnail {
     width: 120px;
     height: 90px;
     background-color: #1e1e1e;
     border-radius: 8px;
     overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.2s;
     box-shadow: 0 0 8px rgba(0,0,0,0.3);
   }

   /* .thumbnail:hover {
     transform: scale(1.75);
     cursor: pointer;
   } */

   .thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover;  /* This crops or fits the image into the container */
     display: block;
     pointer-events: none;
     user-select: none;
   }



   /* .selected {
     border: 3px solid #007bff;
   } */

   .dragging {
     opacity: 0.5;
   }
   #timecodeWrapper {
     position: absolute;
     top: 60px; /* Adjust based on your header height */
     left: 50%;
     transform: translateX(-50%) scale(0.6); /* Center + scale */
     transform-origin: center;
     display: flex;
     gap: 6px;
     z-index: 999;
   }
   #timecodeSVG {
     width: 100%;
     height: auto;
   }
   .segment {
     transition: fill 0.2s ease;
   }

   .segment.on {
     fill: #099;  /* active color */
   }

   .segment.off {
     fill: #222;  /* inactive color */
   }

   .colon-dot {
     fill: #099;
   }
   .timecode-float {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 10px 20px;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 10px;
     position: absolute;  /* or fixed if you want it to float over everything */
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
   }

   /* .spinner {
     border: 4px solid rgba(0,0,0,0.1);
     border-left-color: rgba(170, 120, 147, 0.8);
     border-radius: 50%;
     width: 24px;
     height: 24px;
     right: 10px;
     top: 10px;
     animation: spin 1s linear infinite;
     display: inline-block;
     vertical-align: middle;
     z-index: 10;
   } */

   /* @keyframes spin {
     to { transform: rotate(360deg); }
   } */

   /* .tts-spinner {
     align-items: center;
     gap: 8px;
     font-size: 0.9em;
     color: rgba(170, 120, 147, 0.8);
     z-index: 10;
   } */

   .node-spinner-wrapper {
     position: absolute;
     display: flex; /* key fix */
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); /* ✅ centers the container */
     z-index: 10;
     pointer-events: none;

     color: #ddd;
     font-size: 12px;
     text-align: center;
   }

   .node-spinner {
     border: 4px solid rgba(255, 255, 255, 0.1);
     border-left-color: rgba(255, 255, 255, 0.8);
     border-radius: 50%;
     width: 24px;
     height: 24px;
     animation: spin 1s linear infinite;
     margin-bottom: 4px;
   }

   .node-spinner-label {
     font-size: 24px;
     color: #ccc;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 100; /* Node headings thin */
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* ← this is what you want */
   }



   /* Animation */
   @keyframes spin {
     to { transform: rotate(360deg); }
   }

   .scene-list.collapsed {
     display: none;
   }

   .project-header {
     font-size: 12px;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 700; /* Node headings thin */
     display: flex;
     align-items: center;
     /* gap: 0.5em; */
     cursor: pointer;
   }

   button.toggle-scenes {
     background: none;
     border: none;
     font-size: 1em;
     cursor: pointer;
   }

   #socketStatus {
     transition: opacity 0.5s ease;
     opacity: 0;
     pointer-events: none;
   }

   #socketStatus.visible {
     opacity: 1;
     pointer-events: auto;
   }


   .filmFrame {
     width: 200px;
     height: 110px;
     border-radius: 15px;
     border: 2px solid #444;
     padding: 4px;
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     cursor: pointer;
     color: #e0e0e0;
     /* box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); */
     box-shadow:  var(--shadow-versioning-filmstrip);
     font-size: 10px;
     z-index: 6;
   }
   /* Film Frame for BOQ Film Strip     */
   .filmFrameBOQ {
     width: 120px;
     height: 50px;
     border-radius: 15px;
     border: 2px solid #444;
     padding: 4px;
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     cursor: pointer;
     color: #e0e0e0;
     /* box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); */
     box-shadow:  var(--shadow-versioning-filmstrip);
     font-size: 10px;
     z-index: 6;
   }
   .filmActionBOQ,
   .filmAction {
     width: 200px;
     height: 60px;
     border-radius: 15px;
     border: 2px solid #444;
     padding: 4px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     cursor: pointer;
     color: #e0e0e0;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
     font-size: 10px;
     z-index: 6;
   }
   .filmActionBOQ {
     width: 120px;
     height: 50px;
     border-radius: 12px;
   }
   .filmFrameBOQ:hover,
   .filmFrame:hover {
     background-color: #333;
   }
   .filmFrameBOQ.selected,
   .filmFrame.selected {
     border: 6px solid gold;
     border-radius: 15px;
     /* box-shadow: 0 0 22px rgba(0,255,128,0.8); */
     box-shadow:  var(--shadow-selected-filmstrip);
   }
   .filmActionBOQ.selected,
   .filmAction.selected {
     border: 6px solid gold;
     border-radius: 15px;
     box-shadow: 0 0 22px rgba(0,255,128,0.8);
   }



   .filmNumberLabel {
     position: absolute;
     top: 4px;
     left: 4px;
     width: 20px;
     height: 20px;
     text-align: center;
     line-height: 20px;
     font-size: 10px;
     font-weight: bold;
     color: #ddd;
     background-color: rgba(80, 80, 80, 0.9);
     border-radius: 50%;
     z-index: 8;
   }

   .filmLabelSmall,
   .filmLabel {
     position: absolute;
     text-align: center;
     font-size: 12px;
     font-weight: bold;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 600;
     color: #fff;
     z-index: 20;
     pointer-events: none;
   }
   .filmLabelSmall {
     width: 80%;
     font-size: 12px;
     font-weight: bold;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 500;
     white-space: nowrap;        /* keep text on one line */
     overflow: hidden;           /* hide the overflow */
     text-overflow: ellipsis;    /* show the “…” */
   }
   .actionLabelSmall,
   .actionLabel {
     position: absolute;
     text-align: center;
     font-size: 12px;
     font-weight: bold;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 300;
     color: #fff;
     z-index: 20;
     pointer-events: none;
     align-self: flex-start;
     text-shadow: 0 0 3px black,
         0 0 6px black,
         3px 3px 2px rgba(0, 0, 0, 0.8);
   }
   .actionLabelSmall {
     font-size: 11px;
     font-weight: 500;
   }

   .filmDuration {
     font-size: 12px;
     /* font-weight: bold; */
     text-align: center;
     margin-top: 4px;
     color: rgba(255, 255, 255, 0.9);
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 900;
     z-index: 7;
     /* align-self: flex-end; */
   }
   .actionDuration {
     position:absolute;
     font-size: 12px;
     /* font-weight: bold; */
     text-align: center;
     /* margin-top: 4px; */
     padding-bottom: 6px;
     color: rgba(255, 255, 255, 0.9);
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 300;
     z-index: 7;
     align-self: flex-end;
     text-shadow: 0 0 3px black,
         0 0 6px black,
         3px 3px 2px rgba(0, 0, 0, 0.8);
   }

   .filmStripWrapperBOQ {/* <-------------------------------------------------------- */
     position: relative;
     top: 0px;
     width: 100%;
     height: 170px;
     background: rgba(20, 20, 20, 0.8);
     overflow-x: auto;
     overflow-y: auto;
     border-bottom: 1px solid #333;
     /* padding-bottom: 20px */
   }
   .filmStripWrapper {
     position: relative;
     top: 0px;
     width: 100%;
     /* height: 170px; */
     background: rgba(20, 20, 20, 0.8);
     overflow-x: auto;
     overflow-y: auto;
     border-bottom: 1px solid #333;
     /* padding-bottom: 20px */
   }

   /* .filmLabelSmall,
   .actionLabelSmall,
   .filmFrameBOQ,
   .filmActionBOQ, */
   .actionImage,
   .nodeImage,
   .filmstrip-item {
     -webkit-user-drag: none;
     user-select: none;
   }

   .canvasStripWrapper {
     height: 240px;
     background: rgba(20, 20, 20, 0.8);
     overflow-x: auto;
     overflow-y: hidden;
     border-bottom: 1px solid #333;
   }
   .filmStripNodeWrapperBOQ,/* <-------------------------------------------------------- */
   .filmStripNodeWrapper {
     display: flex;
     width: 100vw;
     min-width: max-content;
     padding: 10px;
     background: rgba(20, 20, 20, 0.8);
     border-bottom: 1px solid #333;

     gap: 24px;

     flex-wrap: nowrap;
     overflow-x: hidden;
     overflow-y: hidden;
     padding: 8px;
   }
   .filmStripActionWrapper {
     display: flex;
     width: 100vw;
     gap: 10px;
     min-width: max-content;
     padding: 10px;
     background: rgba(20, 20, 20, 0.8);
     overflow-x: auto;
     overflow-y: hidden;
     border-bottom: 1px solid #333;
   }

   .actionImageContainer {
     width: 100%;
     height: 100%;
     object-fit: cover; /* This is the key */
     object-position: center; /* Optional: center the crop */
     background-color: #1f1f1f;
     /* border: 1px solid #333; */
     border-radius: 12px;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     z-index: 10;
   }
   .actionImageContainer img {
     width: 100%;
     height: 100%;
     /* object-fit: fill; /* Distort OK */ */
   }
   .filmImageContainer img {
     width: 100%;
     height: 100%;
   }
   .filmImageContainer {
     width: 100%;
     height: 100%;
     object-fit: cover; /* This is the key */
     object-position: center; /* Optional: center the crop */
     background-color: #1f1f1f;
     border: 1px solid #333;
     border-radius: 10px;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
   }

   .actionImage {
     max-width: 100%;
     max-height: 100%;
     aspect-ratio: 16 / 9;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .filmFrameGroup {
     display: flex;
     flex-direction: column;
     align-items: center;
     border: 1px solid #444;
     border-radius: 18px;
     padding: 4px;
     box-shadow: 0 0 22px rgba(0,64,128,0.8);
   }

   .filmActionGroup {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 6px;
   }

   /* .filmFrame,
   .filmAction {
     border: 2px solid #ccc;
     background: #f9f9f9;
   } */
   /* Content inside that forces horizontal scroll */
   .filmStripContentBOQ,/* <-------------------------------------------------------- */
   .filmStripContent {
     display: flex;
     width: 100vw;
     gap: 10px;
     min-width: max-content;
     /* padding: 10px; */
   }
   /* Each item */

   .quillStoryEditorToolBar{
     height: 42px;
     border: 1px solid #ccc;
     border-radius: 1px solid #ccc;
     box-sizing: border-box;
     background: #2c2c2c;
     overflow: hidden; /* disables scrolling */
     display: flex;
     flex-direction: column;

   }
   #storyEditor {
     position: absolute;
     overflow: hidden;
     top: 0px;
     /* overflow: hidden; /* disables scrolling */ */
   }
   /* Quill takes rest of space */
   #quillStoryEditorWrapper {
     position: absolute;
     top: 260px;
     flex: 1;
     background: #111;
     overflow-y: hidden;
     overflow: hidden; /* disables scrolling */

   }
   #quillStoryNodeWrapper {
     position: relative;
     flex: 1;
     line-height: 1;
     background: #111;
     overflow-y: hidden;
     pointer-events: auto;
     z-index: 15;
     height: 100%;
     /* border: 1px solid white; */
   }

   /* CUSTOM SCROLLBARS — CHROME */
   .filmStripWrapper::-webkit-scrollbar {
     height: 12px;
   }

   .filmStripWrapper::-webkit-scrollbar-track {
     background: #1e1e1e;
   }

   .filmStripWrapper::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 0px;
     border: 1px solid #1e1e1e;
   }

   #server-tab-content {
     overflow-y: auto;
   }
   /* CUSTOM SCROLLBARS — CHROME */
   #server-tab-content::-webkit-scrollbar {
     height: 12px;
   }

   #server-tab-content::-webkit-scrollbar-track {
     background: #1e1e1e;
   }

   #server-tab-content::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 0px;
     border: 1px solid #1e1e1e;
   }

   #uploadProgress {
     position: absolute;
     width: 100%;
     height: 4px;
     align-items: center;
     font-size: 0.9em;
     color: rgba(170, 120, 147, 0.8);
     z-index: 10;
     transform: translateY(+18px);
   }

   #statusBar {
     display: flex;
     position: absolute;
     flex-direction: row-reverse; /* items stack from right to left */
     align-items: center;
     justify-content: stretch;
     margin-bottom: 4px;
     padding-right: 6px;
     gap: 12px;
     width: 98%;
     height: 30px;
     box-sizing: border-box;
     pointer-events: none;
     z-index: 12;
   }
   #userStatusBar {
     display: flex;
     flex-direction: row-reverse; /* items stack from right to left */
     align-items: center;
     justify-content: stretch;
     border: 1px solid #5a5a5a;
     border-radius: 20px;
     gap: 6px;
     padding: 2px;
     height: 32px;
     box-sizing: border-box;
     /* pointer-events: none; */
     /* background-color: #22aa22; */
     z-index: 14;
   }
   #jobQueueBar {
     display: flex;
     height: 30px;
     /* width: 100%; */
     flex-direction: row-reverse; /* badges fill in from right to left */
     gap: 6px;
     pointer-events: auto;
     /* background-color: #222255; */
     z-index: 14;
   }


   .user-badge-wrapper {
     display: inline-flex;
     align-items: center;
     margin-right: 4px;
     height: 20px;
     border: 1px solid currentcolor;
     border-radius: 20px;
     margin-left: 4px;
   }

   .user-dot {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 0px solid #000 !important;
   }

   .user-label {
     font-size: 12px;
     height: 20px;
     font-weight: bold;
     white-space: nowrap;
     border-radius: 20px;
     padding-top: 4px !important;
     padding-right: 6px;
     padding-bottom: 2px;
     padding-left: 6px;
   }
   #user-admin-icon {
     font-size: 12px;
     font-weight: bold;
     width: 16px !important;
     height: 16px !important;
     white-space: nowrap;
     text-align: center;
     border: 1px solid currentcolor;
     border-radius: 20px;
     padding-right: 2px !important;
     padding-top: 2px !important;
     padding-bottom: 2px !important;
     padding-left: 2px !important;
     margin-right: 4px;
     margin-left: 4px;
     cursor: pointer;
     pointer-events: auto;
   }

   /* Hover effect */
   #user-admin-icon:hover {
     background-color: #525252;
     border-color: #aaa;
   }

   /* Active (click) effect */
   #user-admin-icon:active {
     background-color: #3a3a3a;
     transform: scale(0.98);
   }

   /* .job-item.tts {
     background-color: #007bff;
     color: white;
     padding: 4px 8px;
     border-radius: 4px;
     font-weight: 500;
     font-size: 0.85rem;
   } */

   .tts-spinner {
     display: flex;
     align-items: center;
     gap: 6px;
   }

   .spinner {
     width: 12px;
     height: 12px;
     border: 2px solid #f3f3f3;
     border-top: 2px solid #007bff;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }

   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }

   .status-popup {
     /* position: absolute; */
     background-color: #dc3545;
     padding: 4px 4px 4px 4px;
     margin-right: 8px;
     gap: 6px;
     border-radius: 6px;
     color: #fff;
     font-size: 14px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.5s ease-in-out;
     z-index: 14;
   }

   .status-popup.show {
     opacity: 1;
   }

   .job-item.llm {
     background-color: #DBEAFE; /* bg-blue-100 */
     color: #1D4ED8;             /* text-blue-700 */
     z-index: 10;
     padding: 6px 12px;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.85rem;
     font-size: 14px;
     pointer-events: auto;
     animation: pulseJob 1.5s infinite ease-in-out;
   }

   .job-item.tts {
     background-color: #D1FAE5; /* bg-green-100 */
     color: #047857;            /* text-green-700 */
     z-index: 10;
     padding: 6px 12px;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.85rem;
     font-size: 14px;
     pointer-events: auto;
     animation: pulseJob 1.5s infinite ease-in-out;
   }
   .job-item.img {
     background-color: #E9D5FF; /* bg-purple-100 */
     color: #6B21A8;            /* text-purple-700 */
     z-index: 10;
     padding: 6px 12px;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.85rem;
     font-size: 14px;
   }
   .job-item.self {
     /* border: 2px solid black; */
     padding: 6px 12px;
     border-radius: 6px;
     font-weight: 500;
     font-size: 0.85rem;
     font-size: 14px;
     z-index: 10;
     animation: pulseJob 1.5s infinite ease-in-out;
   }
   @keyframes pulseJob {
     0%, 100% {
       transform: scale(1);
       opacity: 1;
     }
     50% {
       transform: scale(1.1);
       opacity: 0.5;
     }
   }

   .tooltip-container {
     position: relative;
     display: inline-block;
     pointer-events: auto;
     z-index: 19;
   }

   .tooltip-content {
     position: absolute;
     /* bottom: 125%; /* Position above the badge */ */
     left: 50%;
     /* transform: translateX(-50%); */
     transform: translateY(150%);
     background-color: rgba(50, 50, 100, 0.95);
     color: #fff;
     padding: 6px 10px;
     border-radius: 4px;
     font-size: 12px;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease-in-out;
     z-index: 20;
     pointer-events: auto;
   }

   .tooltip-container:hover .tooltip-content {
     opacity: 1;
     pointer-events: auto;
   }
   /* Force all cursor name bubbles to always show */
   .ql-cursor .ql-cursor-flag {
     opacity: 1 !important;
     visibility: visible !important;
   }
   .ql-cursor .ql-cursor-flag {
     background: rgba(0, 0, 0, 0.75);
     color: white;
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 12px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.3);
   }

   .remote-cursor {
     position: absolute;
     pointer-events: none;
     z-index: 10000;
   }
   .cursor-label {
     background-color: var(--user-color);
     color: white;
     padding: 4px 10px;
     border: 1px solid white;
     border-radius: 999px;
     font-size: 12px;
     white-space: nowrap;
     box-shadow: 0 1px 4px rgba(0, 64, 122, 0.2);
     position: relative;
     z-index: 1;
   }
   .cursor-pointer {
     width: 50px;
     height: 50px;
     pointer-events: none;
     position: absolute;
   }
   .remote-wrapper {
     position: absolute;
     pointer-events: none;
     transition: opacity 0.3s ease;
     z-index: 10000;
   }
   .remote-wrapper.hidden-remote {
     opacity: 0;
   }
   .user-entry {
     display: flex;
     position: relative;
     align-items: center;
     justify-content: space-between;
     width: 160px;
     padding: 4px 8px;
     border-bottom: 1px solid #333;
     font-size: 12px;
     color: #ccc;
   }
   .message-content {
     font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
     font-size: 12px;
   }
   .user-role {
     /* display: flex; */
     align-items: center;
     /* justify-content: space-between; */
     width: 30px;
     /* padding: 4px 8px; */
     padding: 4px;
     padding-right: 14px;
     font-size: 10px;
     color: rgb(105,105,105);
   }
   .user-avatar {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background-size: cover;
     background-position: center;
     margin-right: 5px;
     flex-shrink: 0;
   }

   .user-name {
     margin-left: 5px;
     min-width: 40px;
     width: 50px;
     /* flex-grow: 1; */
   }

   .user-email {
     flex-grow: 2;
     color: #888;
     margin-left: 10px;
   }

   .user-status {
     margin-left: auto;
     font-size: 14px;
     margin-right: 6px;
   }
   .user-status.online {
     margin-left: auto;
     font-size: 14px;
     margin-right: 6px;
     background-color: rgb(37, 65, 37);
   }
   .user-status.offline {
     margin-left: auto;
     font-size: 14px;
     margin-right: 6px;
   }
   .circle-btn {
     width: 18px;
     height: 18px;
     border-radius: 100%;
     background: #444;
     color: #fff;
     font-weight: bold;
     text-align: center;
     /* line-height: 20px; */
     cursor: pointer;
     margin-left: auto;
   }
   .circle-btn:hover {
     background: #666;
   }

   .access-remove-btn {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     border: none;
     background-color: #444;
     color: #fff;
     font-weight: bold;
     font-size: 14px;
     padding-bottom: 8px;
     padding-top: 0px;
     padding-right: 4px;
     padding-left: 4px;
     cursor: pointer;
     margin-left: 10px;
     transition: background-color 0.2s;
   }
   .access-remove-btn:hover {
     background-color: #c0392b;
   }
   .access-entry {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 4px 8px;
     border-bottom: 1px solid #333;
     font-size: 12px;
     color: #ccc;
   }
   .access-entry > span {
     flex: 1;
   }

   .access-username {
     flex: 1;
     font-weight: bold;
     color: #eee;
   }

   .access-level {
     flex: 1;
     text-align: center;
     color: #aaa;
   }

   .access-date {
     flex: 1;
     text-align: right;
     color: #888;
     white-space: nowrap;
   }


   /* ---- Sketch Canvas  ----*/
   :root {
     --toolbar-bg: #f3f3f3;
     --icon-size: 20px;
     --tool-size: 24px;
     --tool-gap: 8px;
     --tool-padding: 4px;
   }

   #display-palette-schedule,
   #display-palette-canvas {
     position: absolute;
     top: 375px;
     left: 55px;
     display: flex;
     gap: 8px;
     padding:4px;
     padding-right: 20px;
     padding-left: 4px;
     background: rgba( 20, 20, 20, 0.4);
     border-radius: 4px;
     border: 1px solid #222;
     align-items: center;
     z-index: 9999;
   }
   #function-palette-canvas {
     position: absolute;
     top: 55px;
     left: 625px;
     display: flex;
     gap: 8px;
     padding:4px;
     padding-right: 20px;
     padding-left: 4px;
     background: rgba( 20, 20, 20, 0.4);
     border-radius: 4px;
     border: 1px solid #222;
     align-items: center;
     z-index: 9999;
   }
   #zoom-palette {
     position: absolute;
     top: 55px;
     left: 1035px;
     display: flex;
     gap: 8px;
     padding:4px;
     padding-right: 20px;
     padding-left: 4px;
     background: rgba( 20, 20, 20, 0.4);
     border-radius: 4px;
     border: 1px solid #222;
     align-items: center;
     z-index: 9999;
   }
   #play-palette {
     position: absolute;
     top: 55px;
     left: 1255px;
     display: flex;
     gap: 8px;
     padding:4px;
     padding-right: 20px;
     padding-left: 4px;
     background: rgba( 20, 20, 20, 0.2);
     border-radius: 4px;
     border: 1px solid #222;
     align-items: center;
     z-index
   }
   #tool-palette {
     top: 312px;
     left: 50%;
   }
   .tool-pallet {
     position: absolute;
     display: flex;
     gap: 8px;
     padding:4px;
     padding-right: 20px;
     background: rgba( 20, 20, 20, 0.75);
     border-radius: 4px;
     border: 1px solid #222;
     align-items: center;
     z-index: 5999;
   }
   .inspColorWrapper {
     display: flex;
     flex-direction: row;
   }
   .tool-section {
     margin-bottom: 5px;
     color: #ddd;
     font-size: 10px;
     border: 1px solid #222;
     border-radius: 6px;
     display: flex;
     /* flex-direction: column; */
     /* align-items: center; */
     padding: 10px;
   }
   .IroColorPicker {
     padding-top: 10px;
   }
   #mood-fill-color-picker {
     display: flex;
     flex-direction: column;
   }
   #mood-stroke-color-pallet {
     display: flex;
     flex-direction: column;
   }
   #mood-color-picker-target-fill {
     display: none;
   }
   #mood-color-picker-target-stroke {
     display: none;
   }
   .value-bubble {
     padding-left:  10px;
   }
   .range-wrapper {
     display: flex;
     flex-direction: row;
   }
   .tool-button-group {
     display: flex;
     gap: var(--tool-gap);
   }

   .ToolIconSchedule {
     display: flex;
     align-items: center;
     justify-content: center;
     /* width: 20px; */
     height: 20px;
     padding: 4px;
     padding-right: 10px;
     padding-left: 10px;
     background: rgba( 20, 20, 20, 0.8);
     border: 1px solid #444;
     border-radius: 4px;
     cursor: pointer;
     transition: background 0.2s, border-color 0.2s;
     font-size: 12px;
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 500;
   }

   .ObjSelectIcon,
   .ToolIconFunction,
   .ToolIconZoom,
   .ToolIconPage,
   .ToolIcon {
     display: flex;
     align-items: center;
     justify-content: center;
     /* width: 20px; */
     height: 20px;
     padding: 4px;
     background: rgba( 20, 20, 20, 0.2);
     border: 1px solid #444;
     border-radius: 4px;
     cursor: pointer;
     transition: background 0.2s, border-color 0.2s;
     font-size: 10px;
   }

   .ToolIcon_Zoom {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 30px;
     padding: var(--tool-padding);
     background: rgba( 20, 20, 20, 0.2);
     border: 1px solid #444;
     border-radius: 4px;
     cursor: pointer;
     transition: background 0.2s, border-color 0.2s;
   }

   .ToolIconSchedule:hover,
   .ToolIconFunction:hover,
   .ToolIconZoom:hover,
   .ObjSelectIcon:hover,
   .ToolIconPage:hover,
   .ToolIcon:hover {
     background: #444;
   }

   .ToolIconSchedule.selected,
   .ToolIconFunction.selected {
     border-color: #007bff;
     background: #666;
   }
   .ToolIconZoom.selected {
     border-color: #007bff;
     background: #666;
   }
   .ObjSelectIcon.selected,
   .ToolIconPage.selected,
   .ToolIcon.selected {
     border-color: #007bff;
     background: #666;
   }
   .ObjSelectIcon.disabled,
   .ToolIconFunction.disabled,
   .ToolIconZoom.disabled,
   .ToolIconPage.disabled,
   .ToolIcon.disabled {
     background: rgba( 20, 20, 20, 0.2);
     opacity: 0.2;
     pointer-events: none;
   }

   .ToolIconFunction input {
     display: none;
   }
   .ToolIconZoom input {
     display: none;
   }
   .ObjSelectIcon input {
     display: none;
   }
   .ToolIconPage input,
   .ToolIcon input {
     display: none;
   }

   .ToolIcon__icon svg {
     width: var(--icon-size);
     height: var(--icon-size);
     stroke: currentColor;
     stroke-width: 1.5;
   }
   .ToolIconZoom__icon svg {
     width: var(--icon-size);
     height: var(--icon-size);
     stroke: currentColor;
     stroke-width: 1.5;
   }



   #mood-shadow-style-buttons {
     width: 60px;
     height: 20px;
   }
   #mood-tool-palette {
     top: 225px;
     left: 25%;
   }

   #template-elements-palette {
     top: 225px;
     left: 10%;
   }


   #canvasGridStoryNode,
   #gridCanvas,
   #drawingCanvas {
     height: auto;
     position: absolute;
     display: flex;
     flex-direction: column;
     display: block;
     position: relative;
     display: flex;
     z-index: 12;
     pointer-events: auto;
     width: 100%;
     heigh: auto;
     opacity: 100%;
     overflow: hidden;
     transform-origin: top left;
   }

   #gridCanvas {

     z-index: 10;
     pointer-events: none;
     opacity: 20%;
     width: 1200px;
     height: 675px;
   }

   #canvasGridStoryNode {
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     display: block;
     z-index: -1;
     opacity: 0.3;
   }

   #canvas-bg-image {
     position: absolute;
     z-index: 11;
     pointer-events: none;
     opacity: 80%;
     height: auto;
     position: absolute;
     display: flex;
     flex-direction: column;
     transition: transform 0.2s ease;
     display: block;
   }

   #sketchCanvasArea {
     position: relative;
     flex-direction: column;
     display: flex;
     z-index: 12;
     top: 25px;
     /* left: 50px; */
     pointer-events: auto;
     opacity: 100%;
     width: 100%;
     overflow: hidden;
     height: 100% !important;
     padding-bottom: 50px;
   }
   #sketchZoomContainer {
       scale: 1;
       display: flex;
       position: absolute;
       padding-right: 6px;
       /* overflow-y: auto !important;
       overflow-x: auto !important; */
       top: 60px;
       left: 230px;
       transform-origin: top left;
       /* overflow: auto; */
   }
   #sketchCanvasScroller {
     position: absolute;
     width: 75vw;
     height: 75vh;
     /* overflow: auto;       /* scrollbars here */ */
     transform-origin: top left;
     overflow-y: auto !important;
     overflow-x: auto !important;
   }
   #sketchCanvasScroller::-webkit-scrollbar {
     width: 12px;
   }
   #sketchCanvasScroller::-webkit-scrollbar-track {
     background: #1e1e1e;
   }
   #sketchCanvasScroller::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }
   #sketchZoomContainer::-webkit-scrollbar {
     width: 12px;
   }

   #sketchZoomContainer::-webkit-scrollbar-track {
     background: #1e1e1e;
   }

   #sketchZoomContainer::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }

   #sketchZoomContainer {
       scale: 1;
       display: flex;
       position: absolute;
       /* overflow-y: auto !important;
       overflow-x: auto !important; */
       top: 60px;
       left: 230px;
       /* transform-origin: top left; */
       /* overflow: auto; */
   }


   #statusCanvas {
     height: auto;
     position: absolute;
     display: flex;
     flex-direction: column;
     display: block;
     display: flex;
     z-index: 14;
     pointer-events: none;
     width: 100%;
     height: auto;
     opacity: 100%;
     overflow: hidden;
     transform-origin: top left;
     padding: 10px;
     border: 2px solid;
     border-color: black;
     /* box-shadow: ''; */
     padding: 6px;
   }
   #statusCanvas.sketchSaved{
     box-shadow: 2px 1px 40px  rgba(143,226,2,1);
     /* border-color: rgb(143, 226, 2); */
     /* border-width: 4px; */
   }
   #statusCanvas.compSaved{
     box-shadow: 2px 1px 40px rgba(233, 218, 5, 1);
     /* border-color: rgb(196, 151, 54); */
   }
   #moodCanvas {
     height: auto;
     position: absolute;
     display: flex;
     flex-direction: column;
     display: block;
     display: flex;
     z-index: 12;
     pointer-events: auto;
     width: 100%;
     height: auto;
     opacity: 100%;
     overflow: hidden;
     transform-origin: top left;
     border: 10px solid;
     /* padding: 2px; */
     border-color: black;
   }
   #moodZoomContainer {
       /* scale: 1; */
       display: flex;
       position: absolute;
       /* overflow-y: auto !important;
       overflow-x: auto !important; */
       top: 80px;
       left: 250px;
       width: auto;
       height: auto;
       transform-origin: top left;
       transition: opacity 0.4s ease;

       /* overflow: auto; */
   }
   #moodZoomContainer.fade-in {
     opacity: 1;
     pointer-events: auto;
   }

   #moodZoomContainer.fade-out {
     opacity: 0;
     pointer-events: none;
   }

   #mood-canvas-bg-image {
     position: absolute;
     top: 7px;
     left: 7px;
     z-index: 11;
     pointer-events: none;
     opacity: 80%;
     width: auto;
     height: auto;
     position: absolute;
     display: flex;
     flex-direction: column;
     transition: transform 0.2s ease;
     display: block;
   }

   #moodCanvasArea {
     position: relative;
     flex-direction: column;
     display: flex;
     z-index: 12;
     top: 25px;
     /* left: 50px; */
     pointer-events: auto;
     opacity: 100%;
     width: 100%;
     overflow: hidden;
     height: 100% !important;
     padding-bottom: 50px;
   }
   #messageCanvas{
     position: absolute;
     width: 75vw;
     height: 75vh;
     pointer-events: none;
     transform-origin: top left;
     z-index: 110;
   }
   /* Loader container centered over the canvas */
   .canvas-loader {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s ease;
     z-index: 50;
   }

   /* Smooth fade visibility */
   .canvas-loader.visible {
     opacity: 1;
     pointer-events: all;
   }

   .canvas-loader.hidden {
     opacity: 0;
     pointer-events: none;
   }

   /* Spinner styling */
   .spinner {
     width: 48px;
     height: 48px;
     border: 4px solid rgba(255,255,255,0.3);
     border-top: 4px solid #007bff;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 10px;
   }

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

   /* Text */
   .loader-text {
     color: white;
     font-family: sans-serif;
     font-size: 14px;
     text-shadow: 0 0 6px rgba(0,0,0,0.3);
   }

   /* Optional: dim the canvas slightly during load */
   #messageCanvas.loading {
     filter: blur(1px) brightness(0.9);
     transition: filter 0.3s ease;
   }
   #moodCanvasScroller {
     position: absolute;
     width: 100%;
     height: 75vh;
     /* overflow: auto;       /* scrollbars here */ */
     transform-origin: top left;
     overflow-y: auto !important;
     overflow-x: auto !important;
     z-index: 99;
   }
   #moodCanvasScroller::-webkit-scrollbar {
     width: 12px;
   }
   #moodCanvasScroller::-webkit-scrollbar-track {
     background: #1e1e1e;
   }
   #moodCanvasScroller::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }
   #moodCanvasScroller::-webkit-scrollbar {
     width: 12px;
   }

   #moodCanvasScroller::-webkit-scrollbar-track {
     background: #1e1e1e;
   }

   #moodCanvasScroller::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }

   .storyBOQwrapper,
   .mood-canvas-wrapper {
     position: relative;
     display: flex;
     flex-grow: 1;
     top: 2px;
     /* padding-top: 40px; */
     height: 100%;
     width: 100%;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     opacity: 1;
   }


   #colorPicker {
     margin-left: auto;
     margin-right: 10px;
   }


   .sketch-canvas-wrapper {
     position: absolute;
     display: flex;
     flex-grow: 1;
     top: 260px;
     /* padding-top: 40px; */
     height: 100%;
     width: 100%;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     opacity: 1;
   }

   /* canvas {
     position: absolute;
     top: 0; left: 0;
     z-index: 1;
     pointer-events: auto;
   } */
   .canvas-wrapper {
     position: relative;
     width: 100%;
     height: 100%;
   }

   .tool-palette,
   .style-palette {
     position: absolute;
     top: 500px;
     left: 20px;
     background-color: #000;
     border-radius: 12px;
     background: rgba( 20, 20, 20, 0.85);
     border: 1px solid #111;
     padding: 8px;
     padding-right: 20px;
     box-sizing: border-box;
     z-index: 99;
     display: flex;
     flex-direction: column;
   }
   .tool-palette.hidden,
   .style-palette.hidden {
     transform: translateX(-100%);
     transition: transform 0.3s ease-in-out;
   }
   .tool-palette.visible,
   .style-palette.visible {
     transform: translateX(0);
   }
   #function-palette-sketch {
     position: absolute;
     display: flex;
     flex-direction: column;
     top: 310px;
     left: 20px;
     gap:20px;
     background-color: #000;
     border-radius: 12px;
     background: rgba( 20, 20, 20, 0.2);
     border: 1px solid #111;
     padding: 8px;
     padding-right: 20px;
     box-sizing: border-box;
     z-index: 1000;
     display: flex;
     flex-direction: column;
   }
   #function-palette-paper {
     position: absolute;
     display: flex;
     flex-direction: column;
     top: 310px;
     left: 120px;
     gap:20px;
     background-color: #000;
     border-radius: 12px;
     background: rgba( 20, 20, 20, 0.2);
     border: 1px solid #111;
     padding: 8px;
     padding-right: 20px;
     box-sizing: border-box;
     z-index: 1000;
     display: flex;
     flex-direction: column;
   }
   #mood-template-palette {
     position: absolute;
     display: flex;
     flex-direction: column;
     top: 225px;
     left: 1300px;
     gap:20px;
     background-color: #000;
     border-radius: 12px;
     background: rgba( 20, 20, 20, 0.2);
     border: 1px solid #111;
     padding: 8px;
     padding-right: 20px;
     padding-left: 10px;
     box-sizing: border-box;
     z-index: 1000;
   }
   #mood-quill-palette{
     position: absolute;
     display: flex;
     display: none;
     flex-direction: column;
     top: 225px;
     left: 1300px;
     gap:20px;
     background-color: #000;
     border-radius: 12px;
     background: rgba( 20, 20, 20, 0.2);
     border: 1px solid #111;
     padding: 8px;
     padding-right: 20px;
     padding-left: 10px;
     box-sizing: border-box;
     z-index: 1000;
   }
   #moodPalletDBrowserQuill{
     padding: 10px;
   }
   #moodPalletDTemplateBrowser{
     height: 600px;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
     overflow-x: hidden;
   }
   #moodPalletDTemplateBrowser::-webkit-scrollbar {
     width: 12px;
     /* overflow-y: auto; */
   }
   #moodPalletDTemplateBrowser::-webkit-scrollbar-track {
     background: #1e1e1e;
   }
   #moodPalletDTemplateBrowser::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }

   #quill-editor-text::-webkit-scrollbar {
     width: 12px;
     /* overflow-y: auto; */
   }
   #quill-editor-text::-webkit-scrollbar-track {
     background: #1e1e1e;
   }
   #quill-editor-text::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }

   .color-picker-row {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 4px;
   }
   .color-picker-grid {
     /* display: flex; */
     align-items: center;
     gap: 8px;
     margin-top: 4px;
   }
   .color-shadow-group,
   .color-swatch-group {
     display: flex;
     gap: 6px;
     margin-top: 4px;
   }

   .color-swatch-docbg.tool-icon-button,
   .color-swatch-bg.tool-icon-button,
   .color-swatch-str.tool-icon-button,
   .color-picker-target.tool-icon-button {
     background-color: var(--color);
     border: 1px solid #fff;
     height: 14px;
     width: 14px;
     padding: 0;
   }

   .color-swatch-docbg.active {
     outline: 2px solid #007bff;
     outline-offset: 1px;
   }
   .color-swatch-bg.active {
     outline: 2px solid #007bff;
     outline-offset: 1px;
   }

   .color-swatch-docbg.transparent {
     background: repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50% / 6px 6px;
     border: 1px solid #aaa;
   }
   .color-swatch-bg.transparent {
     background: repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50% / 6px 6px;
     border: 1px solid #aaa;
   }
   .color-swatch-str.active {
     outline: 2px solid #007bff;
     outline-offset: 1px;
   }
   .color-swatch-str.transparent {
     background: repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50% / 6px 6px;
     border: 1px solid #aaa;
   }



   #color-picker-target-fill,
   #color-picker-target-stroke {
     -webkit-appearance: none;
     border: none;
     width: 24px;
     height: 24px;
     padding: 0;
     background: none;
     cursor: pointer;
   }

   input[type="color"].color-picker-target-stroke {
     -webkit-appearance: none;
     border: none;
     width: 24px;
     height: 24px;
     padding: 0;
     background: none;
     cursor: pointer;
   }

   /* Make sure the color input doesn't get ugly borders */
   input[type="color"].color-picker-target-stroke::-webkit-color-swatch-wrapper {
     padding: 0;
   }

   input[type="color"].color-picker-target-stroke::-webkit-color-swatch {
     border: none;
     border-radius: 4px;
   }

   .color-swatch-docbg.disabled{
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }
   .color-swatch-bg.disabled{
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }
   .color-swatch-str.disabled {
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }
   .color-picker-target.disabled {
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }

   .layers-button.disabled {
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }
   .hatch-button.disabled {
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }
   .stroke-button.disabled {
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }

   .stroke-blur-slider input[type="range"] {
     width: 80px;
   }
   .stroke-blur-slider.disabled,
   .stroke-opacity-slider.disabled {
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }
   #mood-background-opacity-pallet.disabled {
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }
   #mood-sketch-opacity-pallet.disabled {
     opacity: 0.4;
     pointer-events: none;
     filter: grayscale(100%);
   }


   #fill-system-color{
     height: 20px;
     width: 20px;
     pointer-events: auto;
     padding: 0px;
   }
   #stroke-system-color{
     height: 20px;
     width: 20px;
     pointer-events: auto;
     padding: 0px;
   }
   .tool-icon-button {
     height: 20px;
     width: 20px;
     border-radius: 2px;
     border: 1px solid #222;
     box-sizing: border-box;
     /* background-color: #222; */
     background: rgba( 20, 20, 20, 0.2);

     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0px;
     cursor: pointer;
     transition: background 0.2s ease;
   }

   .tool-icon-button svg {
     width: 100%;
     height: 100%;
   }

   .tool-icon-button:hover {
     /* background-color: #333; */
     border-color: #007bff;
   }

   .tool-icon-button.active {
     border-color: #007bff;
     /* background-color: #444; */
   }

   .tool-icon-button {
     height: 20px;
     width: 20px;
     border-radius: 2px;
     border: 1px solid #222;
     box-sizing: border-box;
     /* background-color: #222; */
     background: rgba( 20, 20, 20, 0.2);

     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0px;
     cursor: pointer;
     transition: background 0.2s ease;
   }

   .tool-icon-mode-button,
   .tool-icon-shadow-button {
     height: 20px;
     width: 60px;
     border-radius: 2px;
     border: 1px solid #222;
     box-sizing: border-box;
     /* background-color: #222; */
     background: rgba( 20, 20, 20, 0.2);

     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0px;
     cursor: pointer;
     transition: background 0.2s ease;
   }
   .tool-icon-mode-button,
   .tool-icon-shadow-button svg {
     width: 60px;
     height: 20px;
   }
   .tool-icon-mode-button:hover,
   .tool-icon-shadow-button:hover {
     /* background-color: #333; */
     border-color: #007bff;
   }
   .tool-icon-mode-button.active,
   .tool-icon-shadow-button.active {
     border-color: #007bff;
     /* background-color: #444; */
   }

   .icon-shadow-button {
     right: 7px;
     top: 22px;
     position: absolute;
     height: 30px;
     width: 30px;
     border-radius: 4px;
     border: 1px solid #4a4848;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 4px;
     cursor: pointer;
     transition: background 0.2s ease;
     background: rgba(128, 128, 128, 0.2);
   }
   .icon-shadow-button svg {
     width: 60px;
     height: 20px;
   }
   .icon-shadow-button:hover {
     border-color: #007bff;
   }
   .icon-shadow-button.active {
     border-color: #007bff;
   }

   .toggle-button .icon-active { display: none; }
   .toggle-button.active .icon-default { display: none; }
   .toggle-button.active .icon-active { display: inline; }


   .button-group {
     display: flex;
     gap: 6px;
   }
   .contextMenuDivider {
       border-top: 1px solid #ccc;
       margin: 4px 0;
   }
   #customColorInput {
     pointer-events: auto;
   }

   #gantt-chart-wrapper {
     /* width: 3000px;
     height: 1500px; */
     /* height: 100%; /* or whatever you want */ */
     overflow-y: hidden;
     overflow-x: auto;
     position: relative;
     display: flex;
   }
   .gantt-container {
     /* height: 100% !important; */
   }
   .custom-fill {
     fill: #yourcolor !important;
   }
   .bar-project rect.bar {
     fill: #444 ;
   }
   .bar-scene rect.bar {
     fill: #888 ;
   }
   .bar-node rect.bar {
     fill: #ccc ;
   }
   .lower-header.dragging {
     user-select: none;
     pointer-events: all;
   }
   .upper-header,
   .lower-header {
     cursor: grab;
     pointer-events: auto !important;
   }

   .lower-header:active {
     cursor: grabbing;
   }
   .viewmode-select {
     width: 100% !important;
   }
   .side-header {
     right: 10px  !important;
     position: absolute  !important;
     display: flex  !important;
     padding-right: 20px;
     z-index: 1001 !important;
     padding-top: 10px  !important;
   }
   .ql-toolbar.ql-snow {
     background-color: rgb(20,20,20) !important;
   }
   .ql-snow .ql-picker.ql-expanded .ql-picker-options {
   display: block;
   margin-top: -1px;
   top: 100%;
   z-index: 200;
   }
   #localPanCoords {
     /* white-space: pre; */
   }
   #localPanCoords {
     display: block;
   }
   #localMouseCoords {
     display: block;
   }
   #remoteMouseCoords {
     display: block;
   }
   #localSnapCoords {
     display: block;
   }
   .contextMenuSeparator {
     height: 1px;                /* Thin horizontal line */
     margin: 4px 0;              /* Vertical spacing above and below */
     background-color: #ccc;      /* Light gray color */
     width: 100%;                /* Stretch across the menu */
   }
   /*
   .panel {
     position: absolute;
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.2s ease, visibility 0.2s ease;
   }

   .panel.visible {
     visibility: visible;
     opacity: 1;
   } */

   /* === Base menu bar === */
   .menu-bar {
     display: flex;
     align-items: center;
     background: #1e1e1e;
     color: #ddd;
     font-family: system-ui, sans-serif;
     font-size: 14px;
     user-select: none;
     height: 28px;
     width: 100%;
     border-bottom: 1px solid #333;
     padding: 0 4px;
     position: absolute;
     top: 0px;
     left: 0px;
     z-index: 10000;
   }
   #menuBarAssetBrowser {
     display: flex;
     align-items: center;
     background: rgba(31, 31, 31, 0);
     color: #ddd;
     font-family: system-ui, sans-serif;
     font-size: 14px;
     user-select: none;
     height: 28px;
     width: 95%;
     border-radius: 11px;
     border: 0px;
     padding: 0 4px;
     position: absolute;
     top: 0px;
     left: 0px;
     z-index: 12;
   }
   /* === Top-level menu items === */
   .menu {
     position: relative;
     margin-right: 8px;
   }

   .menu-label {
     padding: 4px 10px;
     cursor: default;
     border-radius: 4px;
   }

   .menu-label:hover,
   .menu.active > .menu-label {
     background: #2a2a2a;
     color: #fff;
   }

   /* === Dropdown containers === */
   .menu-dropdown {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     background: #2a2a2a;
     border: 1px solid #444;
     box-shadow: 0 2px 6px rgba(0,0,0,0.4);
     min-width: 180px;
     padding: 4px 0;
     z-index: 9997;
   }

   .menu.active > .menu-dropdown {
     display: block;
   }

   /* === Individual dropdown items === */
   .menu-item {
     padding: 4px 12px;
     color: #ddd;
     cursor: default;
     white-space: nowrap;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 9998;
   }

   .menu-item:hover {
     background: #3a3a3a;
     color: #fff;
   }

   /* === Disabled items === */
   .menu-item.disabled {
     opacity: 0.4;
     pointer-events: none;
   }

   /* === Submenu arrow === */
   .menu-item.has-submenu::after {
     content: "▶";
     opacity: 0.6;
     font-size: 11px;
   }

   /* === Submenu dropdown === */
   .submenu-dropdown {
     display: none;
     position: absolute;
     left: 100%;
     top: 0;
     background: #2a2a2a;
     border: 1px solid #444;
     box-shadow: 0 2px 6px rgba(0,0,0,0.4);
     min-width: 160px;
     padding: 4px 0;
     z-index: 9999;
   }

   .menu-item.has-submenu:hover > .submenu-dropdown {
     display: block;
   }

   /* === Optional visual separators === */
   .menu-separator {
     border-bottom: 1px solid #444;
     margin: 4px 0;
   }

   /* Selected items with check on the right */
   .menu-item.selected::after {
     content: "✔";             /* check mark */
     display: inline-block;
     width: 1em;               /* reserve space */
     margin-left: 0.5em;       /* space between text and check */
     color: #888;              /* subtle grey */
     font-weight: bold;
     text-align: right;
   }
   /* Keep text color normal for selected items */
   .menu-item.selected {
     background: none;
     color: #ccc;              /* main menu text */
     justify-content: space-between; /* optional if using flex layout */
   }
   /* Modal Overlay */
   .save-modal {
     display: none; /* hidden by default */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.7);
     z-index: 9999;
     justify-content: center;
     align-items: center;
     font-family: sans-serif;
   }

   /* Modal Content Box */
   .save-modal-content {
     background-color: #1e1e1e;
     padding: 20px 30px;
     border-radius: 10px;
     color: #ffffff;
     text-align: center;
     min-width: 250px;
     box-shadow: 0 0 15px rgba(0,0,0,0.5);
   }

   /* Heading */
   .save-modal-content h3 {
     margin-top: 0;
     margin-bottom: 15px;
     font-weight: normal;
     font-size: 12px;
   }

   /* Dropdown */
   .save-modal-content select {
     background-color: #2a2a2a;
     color: #fff;
     border: 1px solid #555;
     padding: 5px 10px;
     border-radius: 5px;
     margin-bottom: 20px;
   }

   /* Buttons */
   .save-modal-buttons {
     display: flex;
     justify-content: space-around;
     gap: 10px;
     padding: 15px;
   }

   .save-modal-buttons button {
     background-color: #3a3a3a;
     color: #fff;
     border: 1px solid #555;
     padding: 6px 15px;
     border-radius: 5px;
     cursor: pointer;
     transition: 0.2s;
   }

   .save-modal-buttons button:hover {
     background-color: #555;
   }

   /* --- New Image Modal (matches Save Modal aesthetic) --- */
   .new-image-modal {
     display: none; /* hidden by default */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.7);
     z-index: 9999;
     justify-content: center;
     align-items: center;
     font-family: sans-serif;
   }

   /* Modal Content Box */
   .new-image-modal-content {
     background-color: #1e1e1e;
     padding: 20px 30px;
     border-radius: 10px;
     color: #ffffff;
     text-align: center;
     min-width: 300px;
     box-shadow: 0 0 15px rgba(0,0,0,0.5);
   }

   /* Heading */
   .new-image-modal-content h3 {
     margin-top: 0;
     margin-bottom: 15px;
     font-weight: normal;
   }

   /* Size Inputs */
   .new-image-size {
     display: grid;
     grid-template-columns: 1fr 1fr auto;
     gap: 10px;
     align-items: center;
     justify-content: center;
     margin-bottom: 15px;
   }

   .new-image-size label {
     font-size: 0.9em;
     color: #ccc;
     text-align: right;
   }

   .new-image-size input {
     background-color: #2a2a2a;
     color: #fff;
     border: 1px solid #555;
     padding: 5px 10px;
     border-radius: 5px;
     width: 80px;
     text-align: right;
   }

   /* Lock Ratio Button */
   .lock-ratio-btn {
     background-color: #3a3a3a;
     border: 1px solid #555;
     color: #fff;
     border-radius: 5px;
     padding: 5px 8px;
     cursor: pointer;
     transition: 0.2s;
   }

   .lock-ratio-btn.locked {
     background-color: #4c8c4a;
     border-color: #6baf68;
   }

   .lock-ratio-btn:hover {
     background-color: #555;
   }

   /* Orientation Buttons */
   .orientation-buttons {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-bottom: 20px;
     padding-top: 20px;
   }

   .orientation-buttons button {
     background-color: #3a3a3a;
     border: 1px solid #555;
     color: #fff;
     border-radius: 5px;
     padding: 6px 15px;
     cursor: pointer;
     transition: 0.2s;
   }

   .orientation-buttons button.active {
     background-color: rgb(103, 32, 130);
     border-color: #6baf68;
   }

   .orientation-buttons button:hover {
     background-color: #555;
   }

   /* Buttons (Save / Cancel) */
   .new-image-modal-buttons {
     display: flex;
     justify-content: space-around;
     gap: 10px;
   }

   .new-image-modal-buttons button {
     background-color: #3a3a3a;
     color: #fff;
     border: 1px solid #555;
     padding: 6px 15px;
     border-radius: 5px;
     cursor: pointer;
     transition: 0.2s;
   }

   .new-image-modal-buttons button:hover {
     background-color: #555;
   }
   .selection-popup {
     position: absolute;
     background: #222;
     color: #fff;
     border: 1px solid #555;
     border-radius: 6px;
     padding: 4px 0;
     font-size: 13px;
     z-index: 9999;
   }
   .selection-popup div {
     padding: 4px 10px;
     cursor: pointer;
   }
   .selection-popup div:hover {
     background: #444;
   }
   .popup-selection {
     position: absolute;
     background: rgba(30, 30, 30, 0.9);
     border: 1px solid #555;
     border-radius: 6px;
     padding: 4px;
     z-index: 9999;
     color: #fff;
     font-family: sans-serif;
     max-height: 300px;
     overflow-y: auto;
   }

   .popup-item {
     padding: 4px 8px;
     cursor: pointer;
   }

   .popup-item:hover {
     background: rgba(0, 255, 0, 0.2);
   }
   .inspector-panel {
     position: fixed;
     right: 210px;
     top: 330px;
     width: 220px;
     background: #1a1a1a;
     color: #eee;
     padding: 7px 7px 7px 7px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0,0,0,0.4);
     z-index: 40;
   }
   .hidden { display: none; }
   .inspector-panel label {
     margin-top: 15px;
     font-size: 10px;
     display: flex;
     flex-flow: column;
     padding-bottom: 5px;
   }
   .inspector-panel input {
     width: 100%;
     background: #222;
     color: #fff;
     border: 1px solid #333;
     padding: 4px;
   }


   /* Chat container */
   .user-window,
   .chat-window,
   #chatWindow {
     position: fixed;
     bottom: 0;
     left: 5px;
     width: 300px;
     max-height: 400px;
     background-color: #1e1e1e;
     color: #eee;
     border-radius: 10px 10px 0 0;
     display: flex;
     flex-direction: column;
     box-shadow: 0 0 10px rgba(0,0,0,0.5);
     font-family: sans-serif;
     user-select: none;
     cursor: grab;
     z-index: 1000;
   }
   .user-window {
     width: 190px;
   }
   .user-window.minimized,
   .chat-window.minimized {
     width: 120px;             /* narrow indicator mode */
     height: 40px;            /* just header */
     /* overflow: hidden; */
   }
   .user-window,
   .chat-window {
     transition: left 0.25s ease, width 0.25s ease;
   }
   .chat-window.minimized .chat-messages,
   .chat-window.minimized .chat-input-wrapper,
   .chat-window.minimized .chat-menu-bar,
   .chat-window.minimized .typing-indicator {
     display: none;
   }
   .user-window..minimized .attach-button,
   .chat-window.minimized .attach-button {
     display: none;
   }
   .user-window.minimized .chat-header,
   .chat-window.minimized .chat-header {
     cursor: pointer; /* user can click to restore */
   }
   /* Header */
   .chat-header,
   #chatHeader {
     display: flex;
     /* justify-content: space-between; /* pushes title left, button right */ */
     align-items: center;            /* vertical center */
     padding: 5px 10px;
     background-color: #2a2a2a;
     border-radius: 10px 10px 0 0;
     cursor: grab;
     gap: 5px;
   }
   .chat-title {
         font-weight: bold;
         font-size: 12px;
         color: #989696;
         max-width: 70%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         border-radius: 8px;
         padding: 4px 8px;
         height: 14px;
         display: inline-block;
         align-content: end;
   }

   .minimize-btn {
     background: transparent;
     position: absolute;
     border: none;
     color: #eee;
     background-color: rgb(60, 58, 58);
     border-radius: 2px;
     font-size: 16px;
     cursor: pointer;
     padding: 1px 5px;
     line-height: 1;
     align-content: start;
     right: 10px;
   }
   .close-btn {
     background: transparent;
     position: absolute;
     border: none;
     color: #eee;
     background-color: rgb(60, 58, 58);
     border-radius: 2px;
     font-size: 16px;
     cursor: pointer;
     padding: 1px 5px;
     line-height: 1;
     align-content: start;
     right: 30px;
   }
   .call-btn {
     /* background: transparent; */
     /* position: absolute; */
     border: none;
     color: #eee;
     background-color: rgb(60, 58, 58);
     border-radius: 2px;
     font-size: 12px;
     cursor: pointer;
     padding: 1px 5px;
     line-height: 1;
     align-content: start;
     right: 30px;
     width: 26px;
     height: 22px;
     display: none;
   }
   .call-btn.inactive { opacity: 0.5;}
   .call-btn.calling { opacity: 1; background-color: rgb(125, 79, 4); }
   .call-btn.active { opacity: 1; background-color: green; }
   .call-btn.dialing { opacity: 1; background-color: rgb(103, 14, 119);}
   .call-btn.ringing { opacity: 1; background-color: rgb(255, 159, 0);}
   /* .call-btn:hover { opacity: 1; background-color: green; } */
   .call-btn.pulsate {
      animation: btnPulsate 1.3s ease-in-out infinite;
    }

    @keyframes btnPulsate {
      0% {
        transform: scale(1);
        /* background-color: rgb(125, 79, 4); */
      }
      50% {
        transform: scale(1.12);
        /* background-color: rgb(160, 100, 10); */
      }
      100% {
        transform: scale(1);
        /* background-color: rgb(125, 79, 4); */
      }
    }

    .call-btn-wrapper {
        position: absolute;
        display: inline-block;
        right: 10px;
    }

    .call-btn-flyout {
        position: absolute;
        top: 0;
        left: -50px;          /* adjust to taste */
        display: flex;
        gap: 4px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s;
    }

    .call-btn-wrapper:hover .call-btn.ringing.pulsate ~ .call-btn-flyout {
        opacity: 1;
        pointer-events: auto;
    }
    /* .call-btn-wrapper.ringing.pulsate:hover .call-btn-flyout {
        opacity: 1;
        pointer-events: auto;
    }
    .call-btn-wrapper.ringin:hover .call-btn-flyout {
        opacity: 1;
        pointer-events: auto;
    } */
    .call-opt {
        background: #333;
        color: white;
        border: none;
        border-radius: 2px;
        width: 22px;
        height: 22px;
        cursor: pointer;
        font-size: 14px;
        line-height: 22px;
        padding: 0;
    }

    .call-opt.accept { background: green; }
    .call-opt.reject { background: red; }
    .call-opt.silence { background: orange; }
    .call-btn-settings {
      /* background: transparent; */
      /* position: absolute; */
      border: none;
      color: #eee;
      background-color: rgb(60, 58, 58);
      border-radius: 2px;
      font-size: 12px;
      cursor: pointer;
      padding: 1px 5px;
      line-height: 1;
      align-content: start;
      right: 30px;
      width: 26px;
      height: 22px;
    }
    .user-window.minimized .call-btn-settings {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

   .audioIndicatorOut,
   .audioIndicatorIn {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background-color: #931573;
     margin: 5px;
     position: absolute;
     right: 60px;
     top: 5px;
     display: none;
   }
   .audioIndicatorIn {
     width: 10px;
     height: 10px;
     right: 62px;
     top: 7px;
     z-index: 1001;
     background-color: #e76315;
     dosplay: none;
   }
   .audioIndicatorOut.pulsate {
      animation: indicatorPulsate 1.3s ease-in-out infinite;
    }

    @keyframes indicatorPulsate {
      0% {
        transform: scale(1);
        /* background-color: rgb(125, 79, 4); */
      }
      50% {
        transform: scale(1.12);
        /* background-color: rgb(160, 100, 10); */
      }
      100% {
        transform: scale(1);
        /* background-color: rgb(125, 79, 4); */
      }
    }
   /* Messages container should use flex column */
   .chat-messages,
   #chatMessages {
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 8px;
     overflow-y: auto;
     overflow-x: hidden;
     gap: 12px;
   }
   .chat-messages::-webkit-scrollbar,
   #chatMessages::-webkit-scrollbar {
     width: 12px;
     /* overflow-y: auto; */
   }
   .chatMechat-messagesssages::-webkit-scrollbar-track,
   #chatMessages::-webkit-scrollbar-track {
     background: #1e1e1e;
   }
   .chat-messages::-webkit-scrollbar-thumb,
   #chatMessages::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }
   /* Chat message bubbles */
   .message {
     max-width: 75%;
     margin: 12px 0;
     padding: 6px 10px;
     border-radius: 12px;
     display: inline-block;
     position: relative;
     word-wrap: break-word;
     font-size: 0.95em;
   }

   .message .sender {
     font-size: 0.7em;
     font-weight: bold;
     position: absolute;
     top: -16px;
     right: 6px;
     color: #ccc;
   }
   .message .timestamp {
     font-size: 0.4em;
     font-weight: bold;
     position: relative;
     bottom: -18px;
     right: 0px;
     color: #ccc;
   }
   /* Your messages (right) */
   .message.mine {
     background-color: #4a90e2;
     color: #fff;
     align-self: flex-end;
     border-radius: 12px 12px 0 12px;
   }

   /* Other messages (left) */
   .message.other {
     background-color: #333;
     color: #eee;
     align-self: flex-start;
     border-radius: 12px 12px 12px 0;
   }
   /* Input area */
   .chat-input-wrapper,
   #chatInputWrapper {
     display: flex;
     border-top: 1px solid #333;
   }
   .chat-input {
     flex: 1;
     padding: 6px 8px;
     border: none;
     background: #2c2c2c;
     color: #eee;
     outline: none;
   }
   .send-btn,
   #sendBtn {
     background: #4a90e2;
     border: none;
     padding: 0 12px;
     cursor: pointer;
     color: white;
   }
   .typing-indicator {
     height: 20px;
     padding: 2px 8px;
     color: #aaa;
     font-size: 0.85em;
     font-style: italic;
     flex-shrink: 0;
   }

   .message.system {
     text-align: center;
     color: #888;
     font-style: italic;
     margin: 0.5em 0;
   }

   /* Attachments */
   .attachment {
     margin-top: 6px;
   }

   .attachment-thumb {
     max-width: 200px;
     max-height: 150px;
     border-radius: 8px;
     cursor: pointer;
     display: block;
   }

   .attachment audio {
     width: 180px;
   }

   .attachment-icon {
     display: inline-block;
     margin-right: 6px;
     font-size: 1.2em;
   }
   .chatMenu-bar,
   #chatMenuBar {
     display: none; /* hidden initially */
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 6px 10px;
     background-color: var(--chat-bg-secondary, #222);
     border-top: 1px solid rgba(255,255,255,0.1);
     gap: 10px;
   }
   .chatMenu-bar button,
   #chatMenuBar button, {
     background: none;
     border: none;
     color: var(--chat-icon-color, #ccc);
     font-size: 15px;
     cursor: pointer;
     transition: color 0.2s;
   }
   .load-more-wrapper,
   #loadMoreWrapper {
     display: none; /* hidden initially */
   }
   .chat-menu-bar button:hover,
   #chatMenuBar button:hover {
     color: var(--chat-accent-color, #4ea3ff);
   }
   .attachment-wrapper {
       position: relative;
       display: inline-block;
       margin: 0 2px;
   }

   .attachment-icon {
       display: inline-block;
       font-size: 18px;
       padding: 2px 4px;
       /* background: #f0f0f0; */
       border-radius: 3px;
       border-width: 0px
   }
   .attach-button {
     background-color: transparent;
     border-width: 0px;
   }
   .attachment-remove {
     position: absolute;
     top: -4px;
     position: absolute;
     font-size: 8px;
     background: #c155ff;
     color: white;
     border-radius: 50%;
     width: 12px;
     height: 12px;
     line-height: 12px;
     text-align: center;
     cursor: pointer;
     font-weight: bold;
   }
   .user-info {
     display: flex;
     /* position: relative; */
     align-items: flex-start;
     width: 100%
   }
   .conv-badge {
     position: absolute;
     background-color: red;
     border-radius: 100%;
     display: none;
     text-align: center;
     padding: 2px;
     font-size: 10px;
     border-radius: 50%;
     width: 14px;
     height: 14px;
     line-height: 12px;
     cursor: pointer;
     font-weight: bold;
     top: -7px;
     left: -7px;
   }
   .user-badge {
     position: absolute;
     background-color: red;
     border-radius: 100%;
     display: none;
     text-align: center;
     padding: 2px;
     font-size: 10px;
     border-radius: 50%;
     width: 14px;
     height: 14px;
     line-height: 12px;
     cursor: pointer;
     font-weight: bold;
     top: -5px;
     left: -5px;
   }
   #storyBOQContainer {
     position: absolute;
     background-color: #2d2d2d;
     top: 50px;
     left: 0px;
     /* width: 56%; */
     overflow-x: hidden;
     overflow-y: auto;
     height: 90%;
     width:1395px;
   }
   #storyBOQContainer::-webkit-scrollbar {
     width: 12px;
   }

   #storyBOQContainer::-webkit-scrollbar-track {
     background: #1e1e1e;
   }

   #storyBOQContainer::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }
   #rulerTool {
     position: relative;
   }
   /* Position dropdown relative to icon */
   #rulerTool .RulerDropdown {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     background: #333;
     padding: 4px;
     z-index: 9999;
     border-radius: 4px;
   }

   #rulerTool:hover .RulerDropdown {
     display: block;
   }

   .RulerOption {
     width: 22px;
     height: 22px;
     padding: 4px;
     margin: 2px 0;
     cursor: pointer;
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .RulerDropdown .RulerOption:hover {
     background: #444;
   }
   .RulerOption svg {
     width: 20px;
     height: 20px;
     stroke-width: 1.5;
   }

   /* When active, show dropdown */
   #rulerTool.open .RulerDropdown {
     display: block;
   }

   .layer-btn {
     cursor: pointer;
     opacity: 0.5;
   }

   .layer-btn.active {
     opacity: 1;
     border: 1px solid #007bff;
   }

   #addLayer {
     opacity: 1;      /* Always looks active enough */
     border: none;    /* No active border */
     cursor: pointer;
   }

   /* The overlay */
   .save-modal {
       display: none; /* hidden by default */
       position: fixed;
       z-index: 1000; /* above other content */
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto; /* scroll if content too tall */
       background-color: rgba(0,0,0,0.5); /* semi-transparent dark overlay */
   }

   /* The modal box */
   .save-modal-content {
       background-color: #1b1b1b;
       margin: auto; /* center vertically with flex or absolute trick */
       padding: 20px;
       border-radius: 8px;
       width: 700px;  /* fixed width */
       max-width: 90%; /* responsive */
       height: 450px; /* fixed height */
       max-height: 90%; /* responsive if window is small */
       box-shadow: 0 5px 15px rgba(0,0,0,0.3);

       /* Centering */
       position: relative;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       flex-direction: column; /* allow vertical stacking */
   }
   .dimension-inputs.row {
     display: flex;
     gap: 12px;
     margin-bottom: 12px;
   }

   .field-col {
     display: flex;
     flex-direction: column;
     flex: 1;
   }

   .field-col.full-width {
     flex: 1 1 100%;
   }

   .field-col label,
   .group-inputs label {
     font-size: 10px;
   }
   .group-inputs input,
   .group-inputs select,
   .field-col input,
   .field-col select,
   .field-col textarea {
     box-sizing: border-box;
     padding: 4px 6px;
     background-color: #444;
     border-color: #000;
     border-top-width: 0px;
     border-right-width: 0px;
     border-bottom-width: 0px;
     border-left-width: 0px;
     color: #fff;
     border-radius: 4px;
   }
   #inventoryBrowser {
       width: 200px;
       height: 100%;
       display: flex;
       flex-direction: column;
       background: #191919;
       /* border-left: 0px solid #ccc; */
       overflow: hidden;
       display: none;
   }

   /* Header */
   .inv-header {
       display: flex;
       padding: 6px;
       gap: 6px;
   }

   .inv-header input {
       flex: 1;
       padding: 4px;
       font-size: 13px;
       width: 100px;
       box-sizing: border-box;
       padding: 4px 6px;
       background-color: #444;
       border-color: #000;
       border-top-width: 0px;
       border-right-width: 0px;
       border-bottom-width: 0px;
       border-left-width: 0px;
       color: #fff;
       border-radius: 4px;
   }

   .inv-search-btn {
       width: 28px;
       cursor: pointer;
       background: #fff;
       border: 1px solid #aaa;
       border-radius: 4px;
   }

   /* Group list popup */
   .inv-group-list {
       max-height: 120px;
       overflow-y: auto;
       border-bottom: 1px solid #bbb;
       background: #1px solid #3b3838;
       font-size: 13px;
   }

   .inv-group-item {
       padding: 4px 6px;
       cursor: pointer;
   }

   .inv-group-item:hover {
       background: #ddd;
   }
   #invItemList,
   #invItemList * {
       user-select: none;
   }
   /* Item list */
   .inv-item-list {
       overflow-y: auto;
       flex: 1;
       padding: 4px;
   }

   .inv-item {
     display: flex;
     gap: 5px;
       padding: 4px;
       margin-bottom: 4px;
       cursor: pointer;
       background: #fff;
       border: 1px solid #ccc;
       border-radius: 4px;
       background-color: #222;
       font-size: 11px;
       color: #fff;
   }

   .inv-item:hover {
       background: #444;
       color: #000;s
   }


   .inv-thumb {
       position: relative;
       display: flex;
       width: 24px;
       height: 24px;
       object-fit: contain;
       border-radius: 3px;
       background: #fafafa;
   }
   .inv-thumb:hover {
       width: 128px;
       height: 128px;
       object-fit: contain;
       border-radius: 3px;
       /* background: #fafafa; */
   }
   .inv-thumb.placeholder {
       background: #ccc;
   }
   .drag-ghost {
       position: fixed;
       pointer-events: none;
       background: rgba(255,255,255,0.8);
       padding: 4px 6px;
       border: 1px solid #ccc;
       border-radius: 4px;
       font-size: 12px;
       z-index: 9999;
       user-select: none;
       color: #222;
   }
   .inv-dropdown {
       position: relative;
       padding: 4px;
       margin-bottom: 4px;
       cursor: pointer;
       border-radius: 4px;
       background-color: #222;
       font-size: 11px;
       color: #fff;
   }

   .inv-dropdown-selected {
       padding: 8px 12px;
       background: #222;
       color: #eee;
       border: 1px solid #dbd7d7;
       background-color: #444;
       border-radius: 6px;
       cursor: pointer;
   }

   .inv-dropdown-list {
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
       width: 100%;
       background: #1b1b1b;
       border: 1px solid #333;
       border-radius: 6px;
       max-height: 240px;
       overflow-y: auto;
       z-index: 50;
   }

   .inv-dropdown-list.hidden {
       display: none;
   }

   .inv-group-item {
       padding: 8px 12px;
       color: #ddd;
       cursor: pointer;
   }

   .inv-group-item:hover {
       background: #333;
   }
   /* Outer overlay */
   .json-viewer-modal {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
     display: none;              /* shown via JS */
     justify-content: center;
     align-items: center;
     z-index: 9999;
   }

   /* Inner window */
   .json-viewer-content {
     background: #1e1e1e;
     color: #e0e0e0;
     width: 50%;
     height: 90%;
     padding: 20px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
     box-shadow: 0 0 20px rgba(0,0,0,0.6);
   }
   .json-viewer-content::-webkit-scrollbar {
     width: 12px;
   }

   .json-viewer-content::-webkit-scrollbar-track {
     background: #1e1e1e;
   }

   .json-viewer-content::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
     border: 1px solid #1e1e1e;
   }
   /* Heading */
   .json-viewer-content h3 {
     margin: 0 0 10px 0;
     font-weight: 500;
     color: #fff;
   }

   /* JSON text area */
   #jsonViewerTextarea {
     flex: 1;
     width: 100%;
     resize: none;
     border: 1px solid #333;
     border-radius: 6px;
     background: #0f0f0f;
     color: #dcdcdc;
     font-family: "JetBrains Mono", "Fira Code", monospace;
     font-size: 14px;
     padding: 12px;
     outline: none;
     overflow: auto;
   }

   /* Button row */
   .json-viewer-buttons {
     margin-top: 12px;
     display: flex;
     justify-content: flex-end;
   }

   /* Close button */
   #jsonViewerCloseBtn {
     padding: 8px 16px;
     border: none;
     background: #444;
     color: #fff;
     border-radius: 6px;
     cursor: pointer;
     font-size: 14px;
   }

   #jsonViewerCloseBtn:hover {
     background: #555;
   }
   .json-tree {
     flex: 1;
     /* width: 100%; */
     overflow: auto;
     background: #0f0f0f;
     border: 1px solid #333;
     border-radius: 6px;
     padding: 10px;
     font-family: "JetBrains Mono", "Fira Code", monospace;
     color: #e0e0e0;
     font-size: 14px;
   }

   /* indent children */
   .json-item {
     margin-left: 18px;
   }

   /* collapse markers */
   .json-toggle {
     cursor: pointer;
     color: #aaa;
     margin-right: 6px;
   }

   .json-key {
     color: #7dcfff;
   }

   .json-value-string {
     color: #c3e88d;
   }

   .json-value-number {
     color: #f78c6c;
   }

   .json-value-boolean {
     color: #ffcb6b;
   }

   .json-value-null {
     color: #ff5370;
   }
   .json-tree,
   .json-tree * {
     user-select: text;
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
   }
   #debug-panel {
     display: none;
   }


   .json-line {
       font-family: monospace;
       padding: 2px 0;
       white-space: pre;
   }

   .json-child {
       margin-left: 16px;
       border-left: 1px solid #3333;
       padding-left: 8px;
   }


   .column_label {
     font-family: 'Helvetica Neue', sans-serif;
     font-weight: 100 !important;
     font-style: italic !important;
     font-size: 12px !important;
   }
   .symbolPreview {
     width: 28px;
     height: 28px;
     min-width: 28px;
     min-hight: 28px;
   }
   #elUnitDescription {
     height: 50px;
     resize: none;
     padding: 4px;
     box-sizing: border-box;
     background: #222;
     font-family: inherit;
     color: #fff;
     border: 1px solid #333;
     resize: vertical;
     min-height: 50px;
     overflow-y: clip;
   }
   #elType {
     color: #a75baf;
   }
   .nodePin {
     position: absolute;
     width: 134px;
     height: 100px;
     z-index: 50;
     top: -63px;
     right: -68px;
   }
   .isPinned {
     box-shadow: 0 0 35px rgba(255, 0, 40, 1);
   }

   .slider-item {
      padding: 6px 12px;
      cursor: default;
    }

    .slider-label {
      font-size: 12px;
      margin-bottom: 4px;
      padding-right: 5px;
      justify-content: end;
    }

    .slider-track {
      position: relative;
      height: 14px;
      /* background: #444; */
      border-radius: 3px;
      width: 85px;
      border: 2px solid;
      border-radius: 13px;
      padding-left: 5px;
    }

    .slider-value {
      font-size: 12px;
      margin-bottom: 4px;
      padding-left: 10px;
      padding-right: 10px;
      width: 45px;
    }

    .slider-fill {
      position: absolute;
      height: 100%;
      /* background: #888; */
      border-radius: 13px;
    }

    .slider-knob {
      position: absolute;
      top: 50%;
      width: 12px;
      height: 12px;
      background: #ccc;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      left: 8px;
    }

    .inspectorSectionTitle {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #777;
      margin: 35px 0px 8px;
    }

    .inspectorSectionTitleNode {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #777;
      margin: 4px 13px 11px;
    }

    .inspRefAnchorGrid {
      padding-top: 20px;
      width: 30px;
      height: 30px;
      margin: 6px 0;
    }

    .reference-anchor-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      width: 100%;
      height: 100%;
      gap: 2px;
    }

    .reference-anchor-grid button {
      padding: 0;
      border: 1px solid #666;
      background: transparent;
      cursor: pointer;
    }

    .reference-anchor-grid button.active {
      background: #fff;
    }

    .reference-anchor-grid button::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: currentColor;
      opacity: 0.4;
    }
    .toolColumn {
      display: flex;
      flex-direction: row;
      padding-block: 5px;
      gap: 5px;
    }
    .toolRow {
      display: flex;
      flex-direction: column;
    }

    #elPointsArray {
      /* margin-top: 15px; */
      font-size: 10px;
      display: flex;
      flex-flow: column;
      border: 1px solid #333;
      padding: 5px;
      overflow-y: auto;
      height: 200px;
    }
    #elPointsArray::-webkit-scrollbar {
      width: 12px;
    }

    #elPointsArray::-webkit-scrollbar-track {
      background: #1e1e1e;
    }

    #elPointsArray::-webkit-scrollbar-thumb {
      background-color: #555;
      border-radius: 4px;
      border: 1px solid #1e1e1e;
    }
    #pointsArrayContainer {
      margin-top: 15px;
      font-size: 10px;
      display: flex;
      flex-flow: column;
      border: 1px solid #303034;
      padding: 5px;
    }
    .point-row {
      display: flex;
      flex-direction: row;
      gap: 10px;
      padding-top: 4px;
    }

    .inspDimLengthWrapper
    .inspNameWrapper,
    .inspTypeWrapper,
    .inspDescriptionWrapper,
    .inspAnchorPoints,
    .inspUnitWrapper,
    .inspItemWrapper,
    .inspDimensionWrapper,
    .inspRotationWrapper,
    .inspPositionWrapper,
    .inspPointsArrayWrapper,
    .inspPointABWrapper,
    .inspRadiusWrapper {
      display: flex;
      gap: 20px;
      width: 95%;
    }
    .inspPointsArrayWrapper {
      /* gap: 20px; */
      width: 100%;
      /* border: 1px solid #333; */
      display: flex;
      flex-direction: column;
    }

    .inspectorParameterHidden {
      display: none !important;
    }


    #sketchBrowserList {
      overflow-y: auto;
      height: 100%
    }

    #sketchBrowserList::-webkit-scrollbar {
      width: 12px;
    }

    #sketchBrowserList::-webkit-scrollbar-track {
      background: #1e1e1e;
    }

    #sketchBrowserList::-webkit-scrollbar-thumb {
      background-color: #555;
      border-radius: 4px;
      border: 1px solid #1e1e1e;
    }

    /* Container */
    .inspLayerDropDown {
      position: relative;
      width: 103%;
      font-size: 10px;
      color: #fff;
      background-color: #222;
      border: 2px solid #444;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
    }

    /* Selected item display */
    .inspLayerDropDown .selected {
      padding: 8px 12px;
    }

    /* Dropdown list */
    .inspLayerDropDown .dropdown-list {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: #333;
      border: 1px solid #444;
      border-radius: 4px;
      max-height: 200px;
      overflow-y: auto;
      display: none;
      z-index: 1000;
    }

    /* List items */
    .inspLayerDropDown .dropdown-list div {
      padding: 8px 12px;
      transition: background 0.2s;
    }

    .inspLayerDropDown .dropdown-list div:hover {
      background-color: #555;
    }
    .master-node-inspector {
      display: flex;
      flex-direction: column;
      /* gap: 6px; */
      padding: 4px 4px 4px 4px;
      background: rgba(20, 20, 20, 0.96);
      border-radius: 4px;
      border: 1px solid #222;
      border-radius: 10px;
      z-index: 5999;
      position: absolute;
      width: 280px;
    }
    .master-node-inspector.hidden {
      display: none !important;
    }

    .nodeImageGroup,
    .nodeTimingGroup,
    .colorInspectorGroup {
      display: flex;
      flex-direction: row;
      gap: 5px;
      border: 1px solid #444;
      border-radius: 8px;
      padding: 5px;
      box-shadow: 0 0 9px rgba(128, 201, 255, 0.12) inset;
      justify-content: space-around;
    }
    .master-node-inspector label {
      width: 100%;
      margin-top: 5px;
      font-size: 10px;
      display: flex;
      flex-flow: column;
      gap: 5px;
      justify-content: stretch;
    }
    .pageBlockNode {
      border: 1px solid #444;
      border-radius: 8px;
      padding: 12px;
      padding-top: 0px;
      gap: 5px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 9px rgba(204, 0, 249, 0.29) inset;
    }
    .master-node-inspector input {
      width: 97%;
      background: #222;
      color: #fff;
      border: 1px solid #333;
      padding: 4px 4px 4px 4px;
    }
    .pageInspInput {
      width: 95% !important;
    }
    .pageInspInputText {
      width: 100%;
      background: #222;
      color: #fff;
      border: 1px solid #333;
      padding: 4px;
      resize: vertical;
      min-height: 50px;
      overflow-y: clip;
    }

    .nodeInspInput {
      width: 100% !important;
    }
    .nodeInspInputText {
      width: 100%;
      background: #222;
      color: #fff;
      border: 1px solid #333;
      padding: 4px;
      resize: vertical;
      min-height: 25px;
      overflow-y: clip;
    }
    .nodeInspInputDescription {
      width: 100% !important;
      background: #222;
      color: #fff;
      border: 1px solid #333;
      padding: 4px;

      box-sizing: border-box;
      font-family: inherit;
      resize: vertical;
      overflow-y: clip;
    }