.preview-tool-wrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: var(--color-third);
   overflow: hidden;
}

.preview-tool-header {
   display: flex;
   align-items: center;
   padding: 0.2rem var(--spacing-sm);
   gap: var(--spacing-xsm);
   background-color: var(--color-third);
   border-bottom: 1px solid var(--color-border-color);
}

.preview-tool-controls-left,
.preview-tool-controls-right {
   display: flex;
   align-items: center;
   gap: var(--spacing-xsm);
}

.preview-tool-controls-right {
   margin-left: auto;
}

.preview-tool-header button {
   background: transparent;
   border: none;
   color: var(--color-note-text);
   font-size: 1.0rem;
   padding: var(--spacing-xsm);
   cursor: pointer;
   border-radius: var(--border-radius-button);
   transition: background 0.2s;
}

.preview-tool-header button:hover {
   /* background-color: var(--color-fourth); */
   color: var(--color-text);
}

.preview-tool-capture-btn {
   margin-left: 0 !important;
}

.preview-search-wrapper {
   position: relative;
   flex: 1;
}

.preview-tool-search {
   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;
   transition: all 0.2s ease;
}

.preview-tool-search:focus {
   border-color: var(--color-border-hover);
   border-color: var(--color-accent2);
   color: var(--color-text);
}

.console-filter-clear {
   position: absolute;
   right: 8px;
   top: 50%;
   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);
}

.preview-tool-content {
   flex: 1;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   height: 100%;
   /* max-height: calc(100% - 40.6px); */
   /* ✅ Force full height */
}

.preview-tool-iframe {
   width: 100%;
   height: 100%;
   /* max-height: calc(100% - 41px); */
   flex: 1 1 auto;
   /* ✅ Let it grow properly */
   border: none;
   display: block;
   background-color: var(--color-preview-background)
}

.preview-tool-header {
   display: var(--preview-header-visibility);
}

.preview-tool-content {
   max-height: calc(100% - var(--preview-height-offset));
}

.preview-tools-shown {
   --preview-header-visibility: flex;
   --preview-height-offset: 33px;
}

.preview-tools-hidden {
   --preview-header-visibility: none;
   --preview-height-offset: 0px;
}












/* content area needs positioning context */
.preview-tool-content {
   position: relative;
   background: var(--preview-bg, transparent);
   /* smooth fade of iframe when stopping/starting */
}

/* the placeholder sits behind the iframe */
.preview-placeholder {
   position: absolute;
   inset: 0;
   z-index: 0;
   /* behind the iframe */
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   /* clicks go to iframe when visible */
   opacity: 1;
   transition: opacity 150ms ease-in-out;
}

.preview-placeholder-inner {
   text-align: center;
   max-width: 520px;
   padding: 24px;
   border-radius: 16px;
   pointer-events: auto;
}

.preview-placeholder-icon svg {
   width: 80px;
   height: 80px;
   display: block;
   margin: 0 auto 12px auto;
   fill: currentColor;
   color: var(--color-text);
}

.preview-placeholder-title {
   font-size: 1.1rem;
   font-weight: 500;
   margin-bottom: 0.5rem;
   margin-top: 0.25rem;
   color: var(--color-text);
}

.preview-placeholder-subtitle {
   font-size: 0.85rem;
   margin-bottom: 1rem;
   color: var(--color-text);
   opacity: 0.75;
}

.preview-placeholder-run-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 0;
   border-radius: 4px;
   padding: 7px 14px;
   padding-left: 7px;
   font-weight: 500;
   cursor: pointer;
   font-family: var(--font-family);
   font-size: var(--font-size-xsm);
   background: var(--color-fourth);
   color: var(--color-textHilight);
   transition: all 120ms ease;
   height: 26px;
   background-color: var(--color-accent2);
   color: var(--color-accent2-text);
}

.preview-icon-placeholder {
   color: var(--color-note-text);
   font-size: 3rem;
   opacity: 0.75;
}

.preview-placeholder-run-btn:hover {
   background-color: var(--color-accent2-hover);
   color: var(--color-accent2-text);
}

/* iframe sits above the placeholder; fades in/out */
.preview-tool-iframe {
   position: relative;
   z-index: 0;
   /* below placeholder */
   transition: opacity 150ms ease-in-out;
}

/* when running, show the iframe and dim the placeholder */
.preview-tool-content.is-running .preview-tool-iframe {
   opacity: 1;
   display: block;
}

.preview-tool-content.is-running .preview-placeholder {
   opacity: 0;
   pointer-events: none;
   display: none;
}