.network-scroll-wrapper,
.console-wrapper,
.tool-content-wrapper,
#tool-inspector {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
   max-height: 100%;
   /* This limits it to the parent's height */
   overflow: hidden;
}

/* .editor-window.editor-content.console-wrapper.tool-content-wrapper#tool-inspector#inspector-info-panel */

.network-item-wrapper,
.console-scroll-wrapper,
#inspector-info-panel {
   height: 100%;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-thumb) var(--scroll-background);
   position: relative;
}

#inspector-info-panel,
.console-scroll-wrapper,
.network-item-wrapper {
   padding-bottom: 36px;
}


.devtools-tabs {
   display: flex;
   flex-direction: row;
   background-color: var(--color-third);
   border-bottom: 1px solid var(--color-border-color);
   position: sticky;
   top: 0;
   height: 30px;
   align-items: center;
   padding: 1.0rem 0;
   /* padding-right: var(--spacing-sm); */
   /* padding-bottom: 1.05rem; */
   overflow: hidden;
}

.devtools-tab {
   padding: 8px;
   /* padding-right: 0px; */
   font-size: 1.0rem;
   font-weight: 500;
   cursor: pointer;
   color: var(--color-note-text);
   /* border-bottom: 2px solid transparent; */
   transition: background 0.2s ease, border-color 0.2s ease;
   display: flex;
   align-items: center;
   height: 100%;
   position: relative;
   padding-right: 11px;
}

.devtools-tab i {
   /* font-size: var(--font-size-lg); */
   margin-right: 0 !important;
}

.devtools-tab:hover {
   color: var(--color-text);
}

.devtools-tab.active {
   /* border-bottom: 2px solid var(--color-accent2); */
   color: var(--color-text);
   padding-right: 11px;
}

.devtools-tab.active::before {
   content: "";
   position: absolute;
   bottom: -8px;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: var(--color-accent2);
   pointer-events: none;
}

.devtools-tab.active:hover span,
.devtools-tab.active:hover {
   color: var(--color-textHilight) !important;
}

.devtools-tab span {
   font-size: var(--font-size-console);
   pointer-events: none;
   opacity: 1;
   max-width: 999px;
   margin-left: 5px;
   /* Add a transition for the display property */
   color: var(--color-note-text);

}

.devtools-tab:hover span {
   color: var(--color-text);

}

.devtools-tab.active span {
   opacity: 1;
   max-width: 999px;
   margin-left: 5px;
   color: var(--color-text);
}

@media (max-width:768px) {
   .devtools-tab span {
      display: none;
   }
}

.console-toolbar {
   display: flex;
   flex: 1;
   /* position: sticky;
   top: 30px; */
   align-items: center;
   /* padding: 0.2rem var(--spacing-sm); */
   padding: 0.25rem 0;
   padding-left: var(--spacing-sm);
   padding-right: var(--spacing-sm);
   margin-left: var(--spacing-sm);
   /* gap: var(--spacing-xsm); */
   /* background-color: var(--color-third);
   border-bottom: 1px solid var(--color-border-color); */
   border-left: 1px solid var(--color-border-color);
   min-height: 34px;
   /* background-color: var(--color-fourth); */
}

.console-toolbar button {
   padding: 8px;
   /* padding-right: 11px;
     padding-right: 0px; */
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
   color: var(--color-note-text);
   border-bottom: 2px solid transparent;
   transition: background 0.2s ease, border-color 0.2s ease;
   display: flex;
   align-items: center;
   height: 100%;
   background-color: transparent;
   border: none;
   border-radius: 6px;
   ;
}

.console-toolbar button:hover {
   color: var(--color-text);
}

.console-clearButton:hover {
   /* background-color: var(--color-fourth); */

}

.console-filter-wrapper {
   position: relative;
   flex: 1;

}

.console-toolbar button:last-of-type {
   /* margin-right: var(--spacing-sm); */

}

.console-filter-input {
   width: 100%;
   padding: 0.15rem var(--spacing-md);
   padding-left: 0.25rem;

   font-size: var(--font-size-xsm);
   font-family: var(--font-family);
   border: 1px solid transparent;
   border-radius: 4px;
   background-color: transparent;
   color: var(--color-text);
   outline: none;
   padding-right: 1.75rem;
   position: relative;
   /* top: -0.05rem; */
   /* min-height: 24px; */
   transition: all 0.2s ease;
}

.console-filter-input:focus {
   color: var(--color-text);
   border-color: var(--color-accent2);
   /* box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1); */
}

.console-filter-clear {
   position: absolute;
   right: 8px;
   top: calc(50% - 2px);
   transform: translateY(-50%);
   font-size: 1.5rem;
   color: var(--color-note-text);
   cursor: pointer;
   user-select: none;
   opacity: 0.75;
}

.console-filter-clear:hover {
   opacity: 1;
   color: var(--color-text);
}










.console-item-wrapper {
   display: flex;
   flex-direction: column;
}

/* Each log line */
.console-log-line {
   display: flex;
   align-items: flex-start;
   padding: 0.15rem 0.5rem;
   padding-right: 0;
   font-size: var(--font-size-console);
   font-family: var(--font-family);
   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
   align-items: center;
   border-bottom: 1px solid var(--color-border-color);
   color: var(--color-note-text);
   min-height: 25.5px;
   /* font-weight: 500; */
}

.console-log-line.truncated {
   font-style: italic;
   text-align: center;
   background: none;
   padding: 8px;
   color: var(--color-note-text);
   font-size: var(--font-size-console);
}

/* Counter badge */
.console-log-counter {
   background: var(--color-border-color);
   color: var(--color-text);
   border-radius: 12px;
   min-width: 15px;
   height: 15px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   margin-right: 10px;
   font-size: var(--font-size-console);
   font-weight: 500;
   padding: 0 4px;
}

/* Log message content */
.console-item-span {
   white-space: pre-wrap;
   line-height: 1.5;
}

/* Backgrounds by log level with refined colors */
.console-log-line.log {
   background-color: var(--color-third);
   color: var(--color-note-text);
   border-left: 2px solid var(--color-fourth);
}

.console-log-line:hover {
   color: var(--color-text);
   background-color: var(--color-fourth);
}

.console-log-line.info {
   color: var(--color-info);
   border-left: 2px solid var(--color-info);
   background-color: rgba(37, 85, 149, 0.05);
}

.console-log-line.warn {
   color: var(--color-warn);
   border-left: 2px solid var(--color-warn);
   background-color: rgba(255, 193, 7, 0.05);
}

.console-log-line.error {
   color: var(--color-error);
   border-left: 2px solid var(--color-error);
   background-color: rgba(220, 53, 69, 0.05);
}

.console-log-line.debug {
   color: var(--color-debug);
   border-left: 2px solid var(--color-debug);
   background-color: rgba(86, 51, 122, 0.05);
}

.console-log-line.info:hover {
   background-color: rgba(37, 85, 149, 0.12);
   /* color: var(--color-textHilight); */
}

.console-log-line.warn:hover {
   background-color: rgba(255, 193, 7, 0.12);
   /* color: var(--color-textHilight); */
}

.console-log-line.error:hover {
   background-color: rgba(220, 53, 69, 0.12);
   /* color: var(--color-textHilight); */
}

.console-log-line.debug:hover {
   background-color: rgba(86, 51, 122, 0.12);
   /* color: var(--color-textHilight); */
}

/* .console-log-line.info {
   background-color: rgba(37, 85, 149, 0.08);
   border-left: 3px solid rgba(37, 85, 149, 0.5);
   color: var(--color-text);
}

.console-log-line.info:hover {
   background-color: rgba(37, 85, 149, 0.15);
   color: var(--color-textHilight);
}

.console-log-line.warn {
   background-color: rgba(255, 193, 7, 0.08);
   border-left: 3px solid rgba(255, 193, 7, 0.5);
   color: var(--color-text);
}

.console-log-line.warn:hover {
   background-color: rgba(255, 193, 7, 0.15);
   color: var(--color-textHilight);
}

.console-log-line.error {
   background-color: rgba(220, 53, 69, 0.08);
   border-left: 3px solid rgba(220, 53, 69, 0.5);
   color: var(--color-text);
}

.console-log-line.error:hover {
   background-color: rgba(220, 53, 69, 0.15);
   color: var(--color-textHilight);
}

.console-log-line.debug {
   background-color: rgba(90, 63, 119, 0.08);
   border-left: 3px solid rgba(90, 63, 119, 0.5);
   color: var(--color-text);
}

.console-log-line.debug:hover {
   background-color: rgba(90, 63, 119, 0.15);
   color: var(--color-textHilight);
} */

/* .source-location {
   color: #ffd903;
   font-style: italic;
   font-size: 0.9em;
   padding-left: 4px;
}
.console-stack-trace {
   background-color: #ffd903;
   border-left: 3px solid #ffd903;
   padding: 6px 10px;
   margin-top: 6px;
   white-space: pre-wrap;
   font-family: monospace;
   color: #333;
   display: block;
} */



.console-stack-trace {
   overflow: hidden;
   white-space: pre-wrap;
}

.log-origin-btn {
   margin-left: auto;
   font-size: 0.85em;
   padding: 2px 15px;
   /* padding-right: 0; */
   cursor: pointer;
   white-space: nowrap;
   outline: none;
   border: none;
   font-size: var(--font-size-console);
   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
   color: var(--color-note-text);
   background-color: transparent;
   /* text-decoration: underline; */
   line-height: 1.5;
   /* opacity: 0.5; */
   align-self: flex-start;
}

.log-origin-btn:hover {
   text-decoration: underline;
   color: var(--color-href);
   opacity: 1;
}

/* Collapsible container */
.collapsible-container {
   border-left: 1px solid var(--color-fourth);
   margin-left: 10px;
   padding-left: 8px;
}

.collapsible-container:hover {
   border-left: 1px solid var(--color-border-hover);
}

.console-log-line.log:hover .collapsible-container {
   border-left: 1px solid var(--color-fifth);
   background-color: var(--color-fourth);
}

.console-log-line.log:hover .collapsible-container:hover {
   border-left: 1px solid var(--color-border-hover);
}

.console-log-line.log:hover .console-object-value {
   background-color: var(--color-fourth);
}

.collapsible-header {
   cursor: pointer;
   display: flex;
   align-items: center;
   margin-bottom: 4px;
   font-weight: 500;
   /* color: var(--color-note-text); */
}

.console-collapse-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   margin-right: 6px;
   color: var(--color-text);
}

.collapsible-header-text {
   font-weight: 500;
}

.collapsible-content {
   margin-left: 24px;
}

/* Array and Object formatting */
.console-array {
   list-style: none;
   padding-left: 0;
   margin: 4px 0;
}

.console-array li {
   /* margin: 4px 0;
   padding: 4px 0; */
   /* border-bottom: 1px dashed var(--color-border-color); */
}

.console-array li:last-child {
   border-bottom: none;
}

.console-object {
   border-collapse: collapse;
   width: 100%;
   margin-top: 6px;
   border-radius: 6px;
   overflow: hidden;
}

.console-object td {
   border: 1px solid var(--color-border-color);
   padding: 6px 10px;
}

.console-object-key {
   /* background: var(--color-fifth); */
   /* font-weight: 500;
   color: var(--color-accent); */
   width: 30%;
}

.console-object-value {
   background: var(--color-third);
   /* color: var(--color-text); */
}

.console-log-line.table {
   /* padding: 0;
   padding-left: 40px; */
   border-left: 3px solid var(--color-fourth);
}

.console-table {
   border-collapse: separate;
   border-spacing: 0;
   margin: 8px 0;
   width: 100%;
   font-size: var(--font-size-console);
   background-color: var(--color-third);
   color: var(--color-note-text);
   border-radius: 4px;
   overflow: hidden;
   /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); */
   border: 1px solid var(--color-border-color);
}

#network-table {
   border: none;
}

.console-table th,
.console-table td {
   padding: 0.25rem 0.5rem;
   text-align: left;
}

.console-table th {
   background-color: var(--color-fourth);
   color: var(--color-text);
   font-weight: 500;
   position: sticky;
   top: 0;
   border-bottom: 1px solid var(--color-border-color);
}

.console-table tr:nth-child(odd) {
   background-color: var(--color-third);
}

.console-table tr:hover {
   color: var(--color-text);
   background-color: var(--color-fourth);
}

.console-table tr:not(:last-child) td {
   border-bottom: 1px solid var(--color-border-color);
}

.console-table td:first-child {
   font-weight: 500;
}

.console-table th:not(:last-child),
.console-table td:not(:last-child) {
   border-right: 1px solid var(--color-border-color);
}

#network-table {
   border-radius: 0px !important;
   margin: 0 !important;
   font-size: var(--font-size-sm);
}

#network-table th {
   background-color: var(--color-fourth);
   color: var(--color-text);
   font-weight: 500;
   position: sticky;
   top: 0;
   border-bottom: 1px solid var(--color-border-color);
   border-right: 1px solid var(--color-border-color);
   z-index: 1;
}

#network-table td {
   border-right: 1px solid var(--color-border-color);
   border-bottom: 1px solid var(--color-border-color);
}

#network-table tr {
   background-color: var(--color-third);
}

#network-table tr:hover {
   background-color: var(--color-fourth);
}

.inspector-wrapper .dom-node {
   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
   /* background-color: var(--color-third); */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: calc(100% - 0px);
   flex-shrink: 1;
   min-width: 0;
   align-items: center;
}

.inspector-wrapper .dom-node-line {
   display: flex;
   align-items: center;
   gap: 6px;
   line-height: 1.4;
   font-size: 12px;
   color: var(--color-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
   max-width: calc(100% - 0px);
   padding-right: 10px;
}

.inspector-wrapper .dom-tag {
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-shrink: 1;
   min-width: 0;
   /* color: transparent; */
   color: var(--color-note-text);
   min-width: 40px;
}

.inspector-wrapper .dom-tag::after {
   content: '';
   position: absolute;
   right: 0;
   width: 1ch;
   background-color: inherit;
   /* match parent bg */
}

/* ✨ WRAP when selected */
.selected-tree-node .dom-node {
   white-space: normal;
   overflow: visible;
   text-overflow: unset;
   word-break: break-word;
}

.selected-tree-node .dom-tag {
   white-space: normal;
   overflow: visible;
   text-overflow: unset;
   word-break: break-word;
}

.inspector-wrapper .dom-node-line:hover {
   background-color: var(--color-fourth);
   color: var(--color-textHilight);
}

.inspector-wrapper .dom-tag {
   pointer-events: none;
   margin-left: 23px;
}

.inspector-wrapper .dom-ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-note-text);
   cursor: pointer;
   border-radius: 6px;
   font-size: 13px;
   height: 100%;
   /* Ensure it takes the full height of its parent */
   position: relative;
   top: -3px;
}

.dom-inline-close {
   padding-right: 10px;
}

.inspector-wrapper .dom-toggle {
   width: 12px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   color: var(--color-note-text);
   font-size: 13px;
   margin-right: -23px;
   margin-left: 5px;
}

.inspector-wrapper .dom-toggle:hover {
   color: var(--color-text);
}

.inspector-wrapper .dom-children {
   margin-left: 11px;
   border-left: 1px solid var(--color-fourth);
   padding-left: 5px;
}

.inspector-wrapper .dom-children:hover {
   border-left: 1px solid var(--color-fifth);

}

.inspector-wrapper .text-node {
   color: var(--color-note-text);
   /* font-style: italic; */
   margin-left: 15px;
   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
   white-space: pre;
   font-size: 12px;

}

.inspector-wrapper .text-node:hover {
   /* background-color: var(--color-fourth); */
}

.inspector-wrapper .comment {
   color: var(--token-comment);
   margin-left: 23px;
   font-size: 12px;
}

/* Remove default list bullets if using lists */
.inspector-wrapper ul,
.inspector-wrapper li {
   list-style: none;
   margin: 0;
   padding: 0;
}

.selected-tree-node {
   background-color: var(--color-selected);
   border-left: 3px solid #007bff;
}

/* The X is hidden by default */
.close-selected-node {
   display: none;
   margin-left: 6px;
   cursor: pointer;
   /* color, etc. as you like */
}

/* If the line is selected, show the X */
.selected-tree-node .close-selected-node {
   display: inline;
   /* or inline-flex */
   color: var(--color-textHilight);
   /* highlight color for X */
}

.selected-tree-node .dom-toggle {
   margin-left: 0 !important;
   margin-right: 0px;
}

.selected-tree-node .dom-tag {
   margin-left: 2px !important;
}

#tool-inspector {
   width: 50%;
}

.inspector-wrapper {
   /* border-right: 1px solid var(--color-border-color, rgb(0 0 0 / .1));
   padding-bottom: 100vh; */
}

#inspector-info-panel {

   overflow-x: hidden;
}

/* ----- Inline Inspector Detail Panel ----- */

#inspector-info-panel {
   position: relative;
   height: 100%;


}

#devtools-toolbar button.active {
   /* background: var(--color-fourth); */
   color: var(--color-accent2)
}

#devtools-toolbar button.active .disable-inspect-btn {
   /* background: var(--color-fourth); */
   color: rgb(204, 54, 51);
}

.tool-content-wrapper {
   display: flex;
   flex-direction: row;
}

.inline-inspector-detail {
   background: var(--color-third, #f8f9fa);
   /* width: 100%; */

   min-width: 270px;
   max-width: 50%;
   width: 40%;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-thumb) var(--scroll-background);
   position: relative;
   /* border-left: 1px solid var(--color-border-color, rgb(0 0 0 / .1)); */
   padding-bottom: 100px;
   position: relative;
}

.inline-inspector-detail.collapsed {
   min-width: 150px;
   width: 0;
}

.inspector-section {
   /* border-bottom: 1px solid var(--color-border-color, rgb(0 0 0 / .1)) */
   background-color: var(--color-third);
}

.inspector-section.expanded {
   border-bottom: 1px solid var(--color-border-color, rgb(0 0 0 / .1))
}

.inspector-section:last-child {
   border-bottom: none;
   margin-bottom: 0
}

.section-title {
   font-size: 13px;
   font-weight: 500;
   letter-spacing: .3px
}

.section-close {
   margin-left: auto;
   font-size: var(--font-size-lg);
   margin-right: 5px;
}

.inspector-info-line {
   font-size: 12px;
   display: block;
   margin: 4px 0;
   line-height: 1.4;
   color: var(--color-text, #333)
}

.inspector-info-line strong {
   font-size: 12px;
   font-weight: 500;
   color: var(--color-note-text, #555)
}

.attributes-container {
   padding-left: 12px;
   margin-top: 2px
}

.inspector-section-header {
   position: sticky;
   display: flex;
   align-items: center;
   cursor: pointer;
   padding: 4px 0;
   user-select: none;
   top: 0;
   background-color: var(--color-third);
   z-index: 1;
   border-bottom: 1px solid var(--color-border-color, rgb(0 0 0 / .1));
   color: var(--color-text);
}

.inspector-section-header:hover {
   background-color: var(--color-fourth);
   color: var(--color-textHilight);
}

.toggle-icon {
   display: inline-flex;
   width: 16px;
   height: 16px;
   align-items: center;
   justify-content: center;
   margin-right: 6px;
   margin-left: 6px;
   font-size: 13px;
   transition: transform 0.2s ease;
   color: var(--color-text, #3498db)
}

.inspector-section-content {
   padding-left: 28px;
   padding-top: 2px;
   overflow: hidden;
   transition: max-height 0.25s ease;
   padding-bottom: 8px;
}

.collapsible.collapsed .inspector-section-content {
   display: none
}

.layout-info {
   display: flex;
   flex-direction: column;
   /* ← stack vertically */
   gap: 4px;
   margin-bottom: 8px;
}


.box-model {
   position: relative;
   width: 200px;
   height: 200px;
   /* margin: 0 auto */
   margin-bottom: 15px;
   margin-right: 40px;
}

.box-model .margin-layer {
   position: absolute;
   top: 10px;
   left: 10px;
   right: 10px;
   bottom: 10px;
   background-color: #e7d2c1;
   border: 1px dashed #e67e22;
   display: flex;
   align-items: center;
   justify-content: center
}

.box-model .padding-layer {
   width: 75%;
   height: 75%;
   background-color: #b6cfb6;
   border: 1px dashed #27ae60;
   display: flex;
   align-items: center;
   justify-content: center
}

.box-model .content-layer {
   width: 70%;
   height: 70%;
   background-color: #c2daeb;
   border: 1px solid #2980b9;
   display: flex;
   align-items: center;
   justify-content: center
}

.box-model-label {
   position: absolute;
   font-size: 10px;
   font-weight: 500;
   color: var(--color-note-text, #666);
   background: var(--color-fourth);
   padding: 2px 5px;
   border-radius: 6px;
   /* box-shadow: 0 1px 2px rgb(0 0 0 / .1) */
}

.margin-label {
   top: -8px;
   left: 50%;
   transform: translateX(-50%);
   color: #e67e22;
   border: 1px solid rgb(230 126 34 / .3)
}

.padding-label {
   bottom: -8px;
   left: 50%;
   transform: translateX(-50%);
   color: #27ae60;
   border: 1px solid rgb(39 174 96 / .3)
}

.content-label {
   top: 50%;
   right: -40px;
   transform: translateY(-50%);
   color: #2980b9;
   border: 1px solid rgb(41 128 185 / .3)
}

.box-model .margin-top-value,
.box-model .margin-right-value,
.box-model .margin-bottom-value,
.box-model .margin-left-value,
.box-model .padding-top-value,
.box-model .padding-right-value,
.box-model .padding-bottom-value,
.box-model .padding-left-value {
   position: absolute;
   font-size: 9px;
   font-weight: 500;
   background: var(--color-fourth);
   border-radius: 2px;
   padding: 0 2px;
   color: #666
}

.margin-top-value {
   top: 5px;
   left: 50%;
   transform: translateX(-50%)
}

.margin-right-value {
   right: 5px;
   top: 50%;
   transform: translateY(-50%)
}

.margin-bottom-value {
   bottom: 5px;
   left: 50%;
   transform: translateX(-50%)
}

.margin-left-value {
   left: 5px;
   top: 50%;
   transform: translateY(-50%)
}

.padding-top-value {
   top: 15%;
   left: 50%;
   transform: translateX(-50%)
}

.padding-right-value {
   right: 15%;
   top: 50%;
   transform: translateY(-50%)
}

.padding-bottom-value {
   bottom: 15%;
   left: 50%;
   transform: translateX(-50%)
}

.padding-left-value {
   left: 15%;
   top: 50%;
   transform: translateY(-50%)
}

.content-dimensions {
   font-size: 12px;
   font-weight: 500;
   color: var(--color-accent2, #3498db)
}

.margin-label {
   top: -6px;
   left: 50%;
   transform: translateX(-50%);
   color: rgb(232 164 85 / .9)
}

.padding-label {
   bottom: -6px;
   left: 50%;
   transform: translateX(-50%);
   color: rgb(147 196 125 / .9)
}

.content-label {
   top: 50%;
   right: -32px;
   transform: translateY(-50%);
   color: rgba(41, 137, 255, 0.8)
}

@media (max-width:768px) {
   .inline-inspector-detail {
      max-width: 100%;
      margin-left: 12px
   }

   .layout-info {
      grid-template-columns: 1fr
   }
}

/* .inline-inspector-detail#text {
   display: none
}

.dom-node pre {
   background: transparent;
   margin: 4px 0;
   font-size: 12px;
   padding: 0;
   overflow-x: auto;
}

.html-tag {
   color: #aaa;
}

.inspector-wrapper .text-node {
   color: #d4d4d4;
}

.html-tag-name {
   color: #459cc2;
}

.html-attr-name {
   color: #9cdcfe;
}

.html-attr-eq {
   color: #d4d4d4;
}

.html-attr-value {
   color: #ce9178;
}

.hljs {
   background: #181b1d !important;
}

pre code.hljs {
   display: block;
   overflow-x: auto;
   padding: 0;
} */



/***********************
 * ENHANCED PERFORMANCE TOOL
 ***********************/

.performance-wrapper {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
   max-height: 100%;
   overflow: hidden;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.perf-control-buttons {
   display: flex;
   gap: 8px;
   align-items: center;
}

.perf-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.perf-timer {
   font-size: 12px;
   margin-left: 12px;
   color: var(--color-note-text);
   opacity: 0.8;
}

.performance-scroll-wrapper {
   height: 100%;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-thumb) var(--scroll-background);
   position: relative;
   padding: var(--spacing-md);
   padding-bottom: 100px;
   padding-top: var(--spacing-md);
   font-size: var(--font-size-sm);
}

.performance-item-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: 16px;
}

/* Summary section */
.perf-summary-section {
   background-color: var(--color-fourth);
   border: 1px solid var(--color-border-color);
   border-radius: var(--border-radius-button);
   padding: 12px 16px;
}

.perf-summary-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
}



/***********************
 * ENHANCED PERFORMANCE TOOL
 ***********************/

.sources-wrapper {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
   max-height: 100%;
   overflow: hidden;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sources-scroll-wrapper {
   height: 100%;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-thumb) var(--scroll-background);
   position: relative;
   padding: var(--spacing-md);
   padding-bottom: 100px;
   padding-top: var(--spacing-md);
   padding-left: 0;
   font-size: var(--font-size-sm);
}

.sources-scroll-wrapper .tree-item-header {
   user-select: auto !important
}

.sources-item-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: 16px;
}

/* Give #tool-sources the same flexible layout as the others */
#tool-sources {
   display: flex;
   flex-direction: column;
   flex: 1;
   /* fill the parent space */
   min-height: 0;
   /* allow children to shrink/scroll */
   max-height: 100%;
   overflow: hidden;
   /* hide overflow in the parent */
}

/* Let the .sources-scroll-wrapper auto-scroll internally */
.sources-scroll-wrapper {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0 0px 100px 0px;
   /* similar padding to your console or network logs */
}

#sources-list ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

#sources-list li {
   margin: 4px 0;
   line-height: 1.4;
}

/* A container or "explorer" style */
#sources-list.file-explorer {
   background-color: var(--color-third);
   padding: 0;
}

/* Each domain or path is a 'tree-item' */
.tree-item {
   display: flex;
   flex-direction: column;
   border-radius: var(--border-radius-button);
   /* optional spacing or border if you like */
}

/* The clickable header line for a domain or file */
.sources-scroll-wrapper .tree-item-header {
   display: flex;
   align-items: center;
   padding: var(--spacing-xsm) var(--spacing-sm);
   cursor: pointer;
   border-radius: var(--border-radius-button);
   user-select: none;
   font-size: var(--font-size-sm);
   color: var(--color-text);
   background-color: transparent;
   transition: background-color 0.2s, color 0.2s;
}

.sources-scroll-wrapper .tree-item-header:hover {
   background-color: var(--color-third);
   color: var(--color-textHilight);
}

/* The chevron (expand/collapse icon) */
.sources-scroll-wrapper .tree-item-chevron {
   margin-right: var(--spacing-xsm);
   font-size: 16px;
   /* your preference */
   color: var(--color-note-text);
}

/* The main icon (folder or file) */
.sources-scroll-wrapper .tree-item-icon {
   margin-right: var(--spacing-xsm);
   font-size: 16px;
   color: var(--color-note-text);
}

/* If it's a folder icon, you can color differently */
.sources-scroll-wrapper .folder-icon {
   color: var(--color-accent2);
}

.tree-item-header .ti-world {
   /* margin-top: -1px; */
}

.tree-item-header:hover .ti-world {
   color: var(--color-text);

}