.fixed-elements {
    z-index: 10;
    position: absolute;
}

.fixed-elements#dynamic-btn-container {
    top: 2.5rem;
    left: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.non-zoomable-button {
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: white;
    font-family: sans-serif;
    cursor: pointer;
    user-select: none;
    font-size: 10px;
    text-anchor: middle;

}

#meta-confirmButton.non-zoomable-button {
    width: 80px;
    height: 20px;
    background-color: #c64afd;
}

#meta-computeButton.non-zoomable-button {
    width: 80px;
    height: 20px;
    background-color: #c64afd;
}

#meta-undoButton.non-zoomable-button {
    width: 60px;
    height: 20px;
    background-color: #1dbf45;
}

.fixed-elements#right-toolbar-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: flex-end;
    height: 100%;
    right: 2.5rem;
    top: 2.5rem;
}

#investigate-tool,
#navi-tool,
#zoominfo {
    position: relative;
}

#zoominfo-wrapper {
    font-family: "Comfortaa", sans-serif;
    font-weight: var(--normal-20-font-weight);
    font-size: 10px;
    letter-spacing: var(--normal-20-letter-spacing);
    color: var(--GRAY-TEXT);
}

#investigate-tool .expanded-toolbar,
#navi-tool .expanded-toolbar {
    position: relative;
    height: 100%;
}

#investigate-tool .toolbtn,
#navi-tool .toolbtn,
#zoominfo .toolbtn {
    position: absolute;
    top: -1.8rem;
    right: -1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 3rem;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    /* Vertical centering */
    justify-content: center;
    /* Horizontal centering */
    border: 1px solid #ccc;
}

#investigate-tool .toolbtn:hover,
#navi-tool .toolbtn:hover,
#zoominfo .toolbtn:hover {
    background-color: var(--THEME-PURPLE);
}

#investigate-tool .toolbtn.minimized-toolbar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M19.94 10C19.48 5.83 16.17 2.52 12 2.06V0H10V2.06C5.83 2.52 2.52 5.83 2.06 10H0V12H2.06C2.52 16.17 5.83 19.48 10 19.94V22H12V19.94C16.17 19.48 19.48 16.17 19.94 12H22V10H19.94ZM11 18C7.13 18 4 14.87 4 11C4 7.13 7.13 4 11 4C14.87 4 18 7.13 18 11C18 14.87 14.87 18 11 18Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: 60%;
}



.toolbtn.minimize-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4' fill='none'%3E%3Cpath d='M0 2H12' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: 60%;
}

#investigate-tool .expanded-toolbar {
    display: flex;
    position: relative;
    height: 2rem;
    padding: 0.5rem 1.25rem;
    justify-content: flex-end;
    align-items: flex-start;
    border-radius: 3rem;
    flex-shrink: 0;
    background: var(--THEME-PURPLE);
}

#investigate-tool .expanded-toolbar>div {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 1rem;
    flex-shrink: 0;
}

#investigate-tool .expanded-toolbar .searchbox {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

#investigate-tool .expanded-toolbar .searchbox #searchwindow {
    width: 15rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 1rem;
    background: #fff;
}

#searchList {
    position: absolute;
    left: 100px;
    top: 2rem;
    background: white;
    width: 240px;
    border: 1px solid lightgray;
    list-style-type: none;
    padding: 0px;
    z-index: 1000;
}

#searchList li {
    border-bottom: 1px solid lightgray;
    padding: 5px;
}

/* navigation */
#navi-tool .toolbtn.minimized-toolbar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M0 4H4V0H0V4ZM6 16H10V12H6V16ZM0 16H4V12H0V16ZM0 10H4V6H0V10ZM6 10H10V6H6V10ZM12 0V4H16V0H12ZM6 4H10V0H6V4ZM12 10H16V6H12V10ZM12 16H16V12H12V16Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: 60%;
}

#zoominfo .toolbtn.minimized-toolbar {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M12 0L14.3 2.3L11.41 5.17L12.83 6.59L15.7 3.7L18 6V0H12ZM0 6L2.3 3.7L5.17 6.59L6.59 5.17L3.7 2.3L6 0H0V6ZM6 18L3.7 15.7L6.59 12.83L5.17 11.41L2.3 14.3L0 12V18H6ZM18 12L15.7 14.3L12.83 11.41L11.41 12.83L14.3 15.7L12 18H18V12Z" fill="black"/></svg>');
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-size: 60%;
}

#navi-tool #navibar-wrapper,
#zoominfo #zoominfo-wrapper {
    overflow-y: hidden;
    border-radius: 0.5rem;
    box-shadow: 6px 6px 24px 11px rgba(136, 148, 179, 0.25);
    background-color: white;
    padding: 1rem 1rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    width: 15rem;
}

#navi-tool {
    max-height: 60vh;
    height: fit-content;
}

#navibar-wrapper #navibar-container {
    display: flex;
    flex-direction: column;
    overflow-x: none;
    overflow-y: scroll;
    font-family: "Comfortaa", sans-serif;
    font-weight: var(--normal-20-font-weight);
    font-size: 10px;
    letter-spacing: var(--normal-20-letter-spacing);
    color: var(--GRAY-TEXT);
    padding: 0px;
    margin: 0px;
    gap: 1rem;
}
#navibar-container .toggle {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#navibar-container .syswrapper-div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#navibar-container ul,
#zoominfo-wrapper ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-inline-start: 30px;
    text-decoration: none;
}
#navibar-container ul li:hover{
    text-decoration: underline;
}
#navibar-container .system-title {
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: var(--normal-20-letter-spacing);
    color: var(--GRAY-TEXT);
    padding: 0px;
    margin: 0px;
}

#navibar-container.sysicon {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

#navibar-container .icon-common {
    height: 1.875rem;
    width: 1.875rem;
    display: flex;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--regular);
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    z-index: inherit;

    /* Add this to prevent shrinking */
    flex-shrink: 0;
}


#wiki-tooltip {
  position: absolute;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 8px;
  border-radius: 4px;
  font-size: 12px;
  max-width: 180px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10000;
  font-family: "Inter", sans-serif;
  /* High z-index ensures visibility */
}