/* based on https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/v1.6.0/style.css */

:root {
  --scene-right-panel-min-width: 320px;
  --scene-right-panel-flex: 0.82fr;
  --advanced-column-width: clamp(360px, 30vw, 430px);
  --simpai-dark-text-color: #d7dce3;
  --simpai-dark-text-muted: #aeb6c2;
  --simpai-dark-text-faint: #8f9aaa;
}

:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
.dark {
  --body-text-color: var(--simpai-dark-text-color);
  --body-text-color-subdued: var(--simpai-dark-text-muted);
  --body-text-color-subdued-faded: var(--simpai-dark-text-faint);
  --block-title-text-color: var(--simpai-dark-text-color);
  --block-label-text-color: var(--simpai-dark-text-muted);
  --input-label-color: var(--simpai-dark-text-muted);
  --input-placeholder-color: var(--simpai-dark-text-faint);
  --button-secondary-text-color: var(--simpai-dark-text-color);
  --button-secondary-text-color-hover: #eef2f7;
  --button-secondary-text-color-disabled: #7f8796;
}

:root[data-theme="dark"] .gradio-container,
html[data-theme="dark"] .gradio-container,
body[data-theme="dark"] .gradio-container,
.dark .gradio-container,
.gradio-container.dark {
  --body-text-color: var(--simpai-dark-text-color);
  --body-text-color-subdued: var(--simpai-dark-text-muted);
  --body-text-color-subdued-faded: var(--simpai-dark-text-faint);
  --block-title-text-color: var(--simpai-dark-text-color);
  --block-label-text-color: var(--simpai-dark-text-muted);
  --input-label-color: var(--simpai-dark-text-muted);
  --input-placeholder-color: var(--simpai-dark-text-faint);
  --button-secondary-text-color: var(--simpai-dark-text-color);
  --button-secondary-text-color-hover: #eef2f7;
  --button-secondary-text-color-disabled: #7f8796;
}

.loader-container {
  display: flex; /* Use flex to align items horizontally */
  align-items: center; /* Center items vertically within the container */
  white-space: nowrap; /* Prevent line breaks within the container */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 42px;
  max-height: 42px;
  padding: 0 14px;
}

.loader {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  animation: spin 2s linear infinite;
}

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

/* Style the progress bar */
progress {
  appearance: none; /* Remove default styling */
  height: 14px; /* Set the height of the progress bar */
  border-radius: 5px; /* Round the corners of the progress bar */
  background-color: #f3f3f3; /* Light grey background */
  width: 100%;
  vertical-align: middle !important;
}

/* Style the progress bar container */
.progress-container {
  margin-left: 20px;
  margin-right: 20px;
  flex-grow: 1; /* Allow the progress container to take up remaining space */
  flex-basis: 520px;
  max-width: 680px;
  min-width: 0;
}

.loader-container.sai-generation-progress {
  gap: 0;
}

.loader-container.sai-generation-progress .sai-progress-track {
  position: relative;
  height: 14px;
  border-radius: 3px;
  background: rgba(151, 157, 166, 0.78);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.loader-container.sai-generation-progress .sai-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--sai-progress, 0%);
  max-width: 100%;
  min-width: 0;
  border-radius: inherit;
  background: #1d95e5;
}

.loader-container.sai-generation-progress .sai-progress-marker {
  position: absolute;
  top: 50%;
  left: clamp(38px, var(--sai-progress, 0%), calc(100% - 38px));
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.loader-container.sai-generation-progress .sai-progress-marker > span {
  display: block;
  width: max-content;
  min-width: 58px;
  max-width: 112px;
  padding: 0 4px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

/* Set the color of the progress bar fill */
progress::-webkit-progress-value {
  background-color: #3498db; /* Blue color for the fill */
}

progress::-moz-progress-bar {
  background-color: #3498db; /* Blue color for the fill in Firefox */
}

/* Style the text on the progress bar */
progress::after {
  content: attr(value '%'); /* Display the progress value followed by '%' */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* Set text color */
  font-size: 14px; /* Set font size */
}

/* Style other texts */
.loader-container > span {
  margin-left: 5px; /* Add spacing between the progress bar and the text */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-bar > .generating {
  display: none !important;
}

.progress-bar{
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#progress-bar,
#progress-bar > *,
#progress-bar .html-container,
#progress-bar .prose,
#progress-bar .generating {
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#progress-bar > *,
#progress-bar .html-container,
#progress-bar .prose {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.progress-bar .loader-container > span {
    text-align: right;
    flex: 0 1 320px;
    width: auto;
    max-width: 42%;
}

.progress-bar .sai-progress-marker > span {
    flex: 0 0 auto;
    width: max-content;
    max-width: 112px;
    text-align: center;
}
div:has(> #positive_prompt) {
    border: none;
}

#positive_prompt {
    padding: 0px;
    background: var(--background-fill-primary);
}

.type_row{
  height: 96px !important;
}

.type_row_half{
  height: 48px !important;
  font-size: 14px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qwen_tts_preset_stack{
  gap: 0 !important;
}

.qwen_tts_preset_stack > .qwen_tts_stack_item{
  margin-top: 0 !important;
}

.qwen_tts_preset_stack > .qwen_tts_stack_item + .qwen_tts_stack_item{
  margin-top: -1px !important;
}

.qwen_tts_preset_stack > .qwen_tts_stack_item :is(button, input, textarea, select){
  border-radius: 0 !important;
}

.qwen_tts_preset_stack > .qwen_tts_stack_item:first-child :is(button, input, textarea, select){
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

.qwen_tts_preset_stack > .qwen_tts_stack_item:last-child :is(button, input, textarea, select){
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.qwen_speaker_note{
  min-width: 0 !important;
}

.qwen-speaker-note{
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--block-border-color);
  border-radius: 8px;
  background: var(--block-background-fill);
  color: var(--body-text-color);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.qwen-speaker-note-empty{
  color: var(--body-text-color-subdued);
}

.qwen-speaker-note-row{
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.qwen-speaker-note-row span,
.qwen-speaker-note-sample span{
  color: var(--body-text-color-subdued);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.qwen-speaker-note-row b{
  min-width: 0;
  font-weight: 700;
}

.qwen-speaker-note-sample{
  display: grid;
  gap: 4px;
}

.qwen-speaker-note-sample p{
  min-width: 0;
  margin: 0;
}

/* Gradio Audio uses WaveSurfer inside shadow DOM. Long audio can expose the
   native horizontal scrollbar on top of the timestamp row, so hide that bar
   while keeping the waveform scrollable by drag/wheel/auto-follow. */
.gradio-container [data-testid^="waveform-"] [id="waveform"] > div::part(scroll),
.gradio-container [data-testid="unlabelled-audio"] [id="waveform"] > div::part(scroll) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.gradio-container [data-testid^="waveform-"] [id="waveform"] > div::part(scroll)::-webkit-scrollbar,
.gradio-container [data-testid="unlabelled-audio"] [id="waveform"] > div::part(scroll)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.gradio-container [data-testid^="waveform-"] .timestamps,
.gradio-container [data-testid="unlabelled-audio"] .timestamps {
  position: relative !important;
  z-index: 2 !important;
}

.type_row_third{
  height: 32px !important;
  font-size: 14px !important; 
  white-space: nowrap;
  overflow: hidden;
}

.refresh_button {
  border: none !important;
  background: none !important;
  font-size: none !important;
  box-shadow: none !important;
}

.ip_detect_style {
  display: none !important;
}

#ip_auto_detect label span {
  white-space: pre-line !important;
}

/* Keep Image Prompt control images in a stable 2x2 layout. */
#ip_image_grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#ip_image_grid > .ip_image_cell {
  flex: 0 0 calc(50% - 4px) !important;
  max-width: calc(50% - 4px) !important;
  min-width: 0 !important;
}

.model-dropdown{
  position: relative !important;
}

.models-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
  width: 100% !important;
}

.models-grid > .form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
}

.models-grid .model-grid-column {
  display: contents !important;
}

.models-grid .model-grid-column > .form:not([id]),
.models-grid .model-grid-column > div:not([id]) {
  display: contents !important;
}

.models-grid .model-grid-column > .form,
.models-grid .model-grid-column > .block,
.models-grid .model-grid-column > div {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.models-grid .model-dropdown {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.models-grid #model_dropdown_base {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.models-grid #model_dropdown_refiner {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.models-grid #model_dropdown_clip {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.models-grid #model_dropdown_vae {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.models-grid #model_dropdown_upscale {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

.models-grid.models-refiner-hidden #model_dropdown_base {
  grid-column: 1 / -1 !important;
}

html.simpai-hide-base-model #model_dropdown_base,
html.simpai-hide-refiner-model #model_dropdown_refiner,
html.simpai-hide-refiner-switch #refiner_switch {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.simpai-hide-refiner-model .models-grid #model_dropdown_base {
  grid-column: 1 / -1 !important;
}

.models-grid .model-dropdown label,
.models-grid .model-dropdown .wrap {
  min-width: 0 !important;
}

.simpai-models-js-panel-host {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#models_js_panel,
#models_js_panel > .html-container,
#models_js_panel .html-container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.simpai-models-js-panel {
  /* Tune these four columns to rebalance LoRA label / model / weight / browse. */
  --models-lora-label-col: 46px;
  --models-lora-model-col: 1fr;
  --models-lora-weight-col: 118px;
  --models-lora-browse-col: 34px;
  --models-lora-slider-idle-width: 32px;
  --models-lora-slider-active-width: 220px;
  --models-lora-slider-popout-extra: 16px;
  --models-weight-number-min: 64px;
  --models-weight-number-max: 78px;
  --models-select-menu-width: 440px;
  --models-select-menu-max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color-primary, rgba(255, 255, 255, 0.14));
  border-radius: 6px;
  background: var(--block-background-fill, rgba(42, 42, 47, 0.96));
  padding: 16px 18px 18px;
  color: var(--body-text-color, #f2f2f2);
  font-size: 14px;
}

.simpai-models-js-subhead {
  color: var(--body-text-color-subdued, rgba(255, 255, 255, 0.62));
  font-size: 12px;
  line-height: 1.3;
}

.simpai-models-js-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
}

.simpai-models-js-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.simpai-models-js-field.is-disabled {
  opacity: 0.54;
}

.simpai-models-js-field.is-disabled > span {
  color: color-mix(in srgb, var(--body-text-color, #fff) 62%, transparent);
}

.simpai-models-js-inputrow,
.simpai-models-js-lora-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.simpai-models-js-inputrow:has(> input:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.simpai-models-js-panel input[type="text"],
.simpai-models-js-panel input[type="number"],
.simpai-models-js-panel select {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  border: 1px solid var(--border-color-primary, rgba(255, 255, 255, 0.16)) !important;
  border-radius: 4px !important;
  background: var(--input-background-fill, rgba(17, 17, 20, 0.86)) !important;
  color: inherit !important;
  padding: 0 9px !important;
  font-size: 13px !important;
  line-height: 34px !important;
  text-overflow: ellipsis;
}

.simpai-models-js-panel input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  accent-color: var(--button-primary-background-fill, #ff7a18);
}

.simpai-models-js-panel button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  height: 34px !important;
  border: 1px solid var(--border-color-primary, rgba(255, 255, 255, 0.18)) !important;
  border-radius: 4px !important;
  background: var(--button-secondary-background-fill, rgba(255, 255, 255, 0.08)) !important;
  color: var(--button-secondary-text-color, var(--body-text-color, #f2f2f2)) !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer;
  white-space: nowrap;
}

.simpai-models-js-panel .simpai-models-js-browse {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.simpai-models-js-panel button:hover {
  border-color: rgba(255, 122, 24, 0.65) !important;
  background: rgba(255, 122, 24, 0.14) !important;
}

.simpai-models-js-panel :disabled {
  cursor: not-allowed !important;
  opacity: 0.78;
}

.simpai-models-js-panel button:disabled:hover {
  border-color: var(--border-color-primary, rgba(255, 255, 255, 0.18)) !important;
  background: var(--button-secondary-background-fill, rgba(255, 255, 255, 0.08)) !important;
}

.simpai-models-js-loras {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simpai-models-js-lora-row {
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  grid-template-columns:
    var(--models-lora-label-col)
    minmax(0, var(--models-lora-model-col))
    minmax(0, var(--models-lora-weight-col))
    var(--models-lora-browse-col);
  padding: 0;
}

.simpai-models-js-lora-row.is-disabled {
  opacity: 0.72;
}

.simpai-models-js-lora-row:has(.simpai-models-js-lora-weight-control:hover),
.simpai-models-js-lora-row:has(.simpai-models-js-lora-weight-control:focus-within) {
  position: relative;
  z-index: 5;
}

.simpai-models-js-sliderrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--models-weight-number-min), var(--models-weight-number-max));
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.simpai-models-js-lora-weight-control {
  position: relative;
  overflow: visible;
  grid-template-columns: minmax(0, var(--models-lora-slider-idle-width)) minmax(var(--models-weight-number-min), var(--models-weight-number-max));
}

.simpai-models-js-lora-weight-control::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(var(--models-weight-number-max) + 2px);
  width: calc(var(--models-lora-slider-active-width) + var(--models-lora-slider-popout-extra));
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--border-color-primary, rgba(255, 255, 255, 0.22)) 80%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--block-background-fill, rgba(42, 42, 47, 0.96)) 82%, transparent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 120ms ease;
}

.simpai-models-js-lora-weight-control:hover::before,
.simpai-models-js-lora-weight-control:focus-within::before {
  opacity: 1;
}

.simpai-models-js-lora-weight-control input[type="range"] {
  justify-self: end;
  width: var(--models-lora-slider-idle-width) !important;
  max-width: none !important;
  position: relative;
  z-index: 2;
  transition: width 120ms ease, filter 120ms ease;
}

.simpai-models-js-lora-weight-control:hover input[type="range"],
.simpai-models-js-lora-weight-control:focus-within input[type="range"],
.simpai-models-js-lora-weight-control input[type="range"]:is(:active) {
  width: var(--models-lora-slider-active-width) !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
}

.simpai-models-js-lora-weight-control input[type="number"] {
  position: relative;
  z-index: 3;
}

.simpai-models-js-panel input[type="number"] {
  padding-left: 7px !important;
  padding-right: 5px !important;
}

.simpai-models-js-lora-split {
  height: 1px;
  margin: 2px 0;
  background: color-mix(in srgb, var(--body-text-color, #fff) 22%, transparent);
}

.simpai-models-js-check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.simpai-models-js-check span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simpai-models-js-lora-title {
  min-width: 0;
  overflow: hidden;
  color: var(--body-text-color-subdued, rgba(255, 255, 255, 0.68));
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simpai-models-js-select-menu {
  position: fixed;
  z-index: 2147483400;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  overflow-x: hidden;
  border: 1px solid var(--border-color-primary, rgba(255, 255, 255, 0.22));
  border-radius: 4px;
  background: var(--input-background-fill, #242428);
  color: var(--body-text-color, #f2f2f2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  padding: 4px;
  font-size: 13px;
}

.simpai-models-js-select-search {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border-color-primary, rgba(255, 255, 255, 0.24)) 86%, #fff);
  border-radius: 3px;
  background: color-mix(in srgb, var(--input-background-fill, #242428) 84%, #000);
  color: var(--body-text-color, #f2f2f2);
  padding: 0 9px;
  font-size: 13px;
  outline: none;
}

.simpai-models-js-select-search:focus {
  border-color: color-mix(in srgb, var(--button-primary-background-fill, #ff7a18) 76%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--button-primary-background-fill, #ff7a18) 38%, transparent);
}

.simpai-models-js-select-options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.simpai-models-js-select-option {
  min-height: 30px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simpai-models-js-select-option.is-empty {
  cursor: default;
  color: var(--body-text-color-subdued, rgba(255, 255, 255, 0.62));
}

.simpai-models-js-select-option:hover,
.simpai-models-js-select-option.is-selected {
  background: color-mix(in srgb, var(--button-primary-background-fill, #ff7a18) 82%, #1f2937);
  color: var(--button-primary-text-color, #fff);
}

.simpai-models-js-select-option.is-empty:hover {
  background: transparent;
  color: var(--body-text-color-subdued, rgba(255, 255, 255, 0.62));
}

@media (max-width: 780px) {
  .simpai-models-js-grid,
  .simpai-models-js-lora-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .simpai-models-js-inputrow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .simpai-models-js-sliderrow {
    grid-template-columns: minmax(0, 1fr) minmax(var(--models-weight-number-min), var(--models-weight-number-max));
  }

  .simpai-models-js-lora-weight-control {
    grid-template-columns: minmax(0, 1fr) minmax(var(--models-weight-number-min), var(--models-weight-number-max));
  }

  .simpai-models-js-lora-weight-control::before {
    display: none;
  }

  .simpai-models-js-lora-weight-control input[type="range"],
  .simpai-models-js-lora-weight-control:hover input[type="range"],
  .simpai-models-js-lora-weight-control:focus-within input[type="range"],
  .simpai-models-js-lora-weight-control input[type="range"]:is(:active) {
    width: 100% !important;
  }
}

.models_panel_footer_shell,
.gr-group:has(> .styler > .models_panel_footer_row) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.models_panel_footer_shell > .styler,
.gr-group:has(> .styler > .models_panel_footer_row) > .styler {
  --block-radius: 0px !important;
  --block-border-width: 0px !important;
  --layout-gap: 0px !important;
  --form-gap-width: 0px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
}

.models_panel_footer_shell > .styler > .row:not(.models_panel_footer_row),
.gr-group:has(> .styler > .models_panel_footer_row) > .styler > .row:not(.models_panel_footer_row) {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.models_panel_footer_row {
  --models-footer-check-height: 44px;
  --models-footer-refresh-height: 58px;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color-primary, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 6px !important;
  background: var(--block-background-fill, rgba(42, 42, 47, 0.96)) !important;
}

.models_panel_footer_row > * {
  box-sizing: border-box !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.models_panel_footer_row > *:not(.models_refresh_button),
.models_panel_footer_row > .form > * {
  min-height: var(--models-footer-check-height, 44px) !important;
  height: var(--models-footer-check-height, 44px) !important;
}

.models_panel_footer_row > .form {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--models-footer-check-height, 44px) !important;
  height: var(--models-footer-check-height, 44px) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.models_panel_footer_row > .form > * {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.models_panel_footer_row > .form > * :is(.wrap, label) {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.models_panel_footer_row > .form > *:first-child {
  border-right: 1px solid var(--border-color-primary, rgba(255, 255, 255, 0.14)) !important;
}

.models_panel_footer_row :is(.wrap, .form, .block, label) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.models_panel_footer_row label,
.models_panel_footer_row label span,
.models_panel_footer_row .wrap,
.models_panel_footer_row .wrap span {
  white-space: nowrap !important;
}

.models_panel_footer_row .models_refresh_button {
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--models-footer-refresh-height, 58px) !important;
  height: var(--models-footer-refresh-height, 58px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.models_panel_footer_row .models_refresh_button button,
.models_panel_footer_row button.models_refresh_button {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--models-footer-refresh-height, 58px) !important;
  height: var(--models-footer-refresh-height, 58px) !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--border-color-primary, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 0 !important;
  background: var(--button-secondary-background-fill, rgba(255, 255, 255, 0.08)) !important;
  color: var(--body-text-color, #f2f2f2) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.models_panel_footer_row .models_refresh_button:hover,
.models_panel_footer_row .models_refresh_button button:hover,
.models_panel_footer_row button.models_refresh_button:hover {
  background: rgba(255, 122, 24, 0.14) !important;
  color: var(--body-text-color, #fff) !important;
}

.min_check {
  min-width: min(1px, 100%) !important;
}

.advanced_check_row {
  width: max-content !important;
  max-width: 100% !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.advanced_check_row > * {
  flex: 0 0 auto !important;
}

.advanced_check_row .topbar_toggle_check {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.advanced_check_row :is(#input_image_checkbox, #prompt_panel_checkbox, #qwen_tts_checkbox, #advanced_checkbox) {
  box-sizing: border-box !important;
}

.advanced_check_row #input_image_checkbox {
  flex-basis: 128px !important;
  width: 128px !important;
  max-width: 128px !important;
  min-width: 128px !important;
}

.advanced_check_row #prompt_panel_checkbox {
  flex-basis: 144px !important;
  width: 144px !important;
  max-width: 144px !important;
  min-width: 144px !important;
}

.advanced_check_row #qwen_tts_checkbox {
  flex-basis: 122px !important;
  width: 122px !important;
  max-width: 122px !important;
  min-width: 122px !important;
}

.advanced_check_row #advanced_checkbox {
  flex-basis: 126px !important;
  width: 126px !important;
  max-width: 126px !important;
  min-width: 126px !important;
}

.advanced_check_row .topbar_toggle_check label,
.advanced_check_row .topbar_toggle_check span,
.advanced_check_row .topbar_toggle_check .wrap {
  white-space: nowrap !important;
  overflow-x: hidden !important;
}

.advanced_check_row .topbar_toggle_check label {
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.advanced_check_row .topbar_toggle_check span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Gradio 6 raises several focused/accordion borders to bright white in dark
   mode. Remove those migrated borders on primary prompt controls. */
#positive_prompt,
.prompt-container,
#translation_preview_accordion,
.translation_preview_accordion,
#aspect_ratios_accordion,
#prompt_history,
#prompt_wildcards {
  border-color: transparent !important;
  border-width: 0 !important;
  outline-color: #4b5563 !important;
  outline-width: 0 !important;
  box-shadow: none !important;
}

#positive_prompt:focus-within,
.prompt-container:focus-within,
#translation_preview_accordion:focus-within,
.translation_preview_accordion:focus-within,
#aspect_ratios_accordion:focus-within,
#prompt_history:focus-within,
#prompt_wildcards:focus-within {
  border-color: transparent !important;
  border-width: 0 !important;
  outline-color: #6b7280 !important;
  outline-width: 0 !important;
  box-shadow: none !important;
}

.resizable_area {
  resize: vertical;
  overflow: auto !important;
}

textarea[rows]:not([rows="1"]) {
  resize: vertical !important;
  overflow: auto !important;
}

textarea[rows="1"] {
  resize: none !important;
  overflow-y: hidden !important;
}

textarea[rows="1"]::-webkit-scrollbar {
  display: none !important;
}

#positive_prompt textarea,
#negative_prompt textarea,
#describe_prompt textarea {
  resize: vertical !important;
  overflow: auto !important;
}

#positive_prompt textarea {
  min-height: 96px !important;
}

html.simpai-scene-director-mode-enabled #positive_prompt.scene-director-prompt-readonly textarea,
html.simpai-scene-director-mode-enabled #positive_prompt.scene-director-prompt-readonly [data-testid="textbox"] {
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

#negative_prompt textarea {
  min-height: 56px !important;
}

#describe_prompt textarea {
  min-height: 38px !important;
  padding-right: var(--describe-vlm-chat-input-pad-right, 58px) !important;
}

#describe_prompt {
  --describe-vlm-chat-button-size: 36px;
  --describe-vlm-chat-button-right: 8px;
  --describe-vlm-chat-button-y-nudge: 0px;
  --describe-vlm-chat-button-y-shift: -50%;
  --describe-vlm-chat-input-pad-right: 58px;
  position: relative !important;
  overflow: visible !important;
}

#describe_prompt > *,
#describe_prompt .form,
#describe_prompt .block {
  overflow: visible !important;
}

#describe_prompt_box {
  overflow: visible !important;
  width: 100% !important;
}

#describe_prompt_box > *,
#describe_prompt_box .form,
#describe_prompt_box .block {
  min-width: 0 !important;
}

#describe_prompt .describe-vlm-chat-anchor-host {
  position: relative !important;
  overflow: visible !important;
}

#describe_vlm_chat_button {
  position: absolute !important;
  right: calc(var(--describe-vlm-chat-button-base-right, 0px) + var(--describe-vlm-chat-button-right)) !important;
  top: calc(var(--describe-vlm-chat-button-base-y, 50%) + var(--describe-vlm-chat-button-y-nudge)) !important;
  bottom: auto !important;
  transform: translateY(var(--describe-vlm-chat-button-y-shift)) !important;
  display: none !important;
  width: var(--describe-vlm-chat-button-size) !important;
  min-width: var(--describe-vlm-chat-button-size) !important;
  max-width: var(--describe-vlm-chat-button-size) !important;
  height: var(--describe-vlm-chat-button-size) !important;
  min-height: var(--describe-vlm-chat-button-size) !important;
  max-height: var(--describe-vlm-chat-button-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

#describe_vlm_chat_button.is-describe-prompt-anchored {
  display: block !important;
}

#describe_vlm_chat_button,
#describe_vlm_chat_button .html-container,
#describe_vlm_chat_button .prose {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
}

#describe_vlm_chat_button .html-container,
#describe_vlm_chat_button .prose {
  display: block !important;
}

#describe_vlm_chat_button button.describe-vlm-chat-entry {
  width: var(--describe-vlm-chat-button-size) !important;
  height: var(--describe-vlm-chat-button-size) !important;
  min-width: var(--describe-vlm-chat-button-size) !important;
  min-height: var(--describe-vlm-chat-button-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #f7f7fb !important;
  background: #5f626d !important;
  border: 1px solid #777b88 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  cursor: pointer !important;
}

#describe_vlm_chat_button button.describe-vlm-chat-entry:hover {
  background: #737682 !important;
}

@media (max-width: 640px) {
  #describe_prompt {
    --describe-vlm-chat-button-size: 34px;
    --describe-vlm-chat-button-right: 7px;
    --describe-vlm-chat-input-pad-right: 50px;
  }

  #describe_vlm_chat_button,
  #describe_vlm_chat_button button.describe-vlm-chat-entry {
    width: var(--describe-vlm-chat-button-size) !important;
    min-width: var(--describe-vlm-chat-button-size) !important;
    max-width: var(--describe-vlm-chat-button-size) !important;
    height: var(--describe-vlm-chat-button-size) !important;
    min-height: var(--describe-vlm-chat-button-size) !important;
    max-height: var(--describe-vlm-chat-button-size) !important;
  }
}

#describe_prompt.describe-prompt-hidden-bridge {
  display: none !important;
}

#describe_vlm_chat_button.describe-vlm-chat-entry-card,
#describe_vlm_chat_button.is-describe-chat-card {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 1 !important;
}

#describe_vlm_chat_button.describe-vlm-chat-entry-card,
#describe_vlm_chat_button.describe-vlm-chat-entry-card .html-container,
#describe_vlm_chat_button.describe-vlm-chat-entry-card .prose,
#describe_vlm_chat_button.is-describe-chat-card,
#describe_vlm_chat_button.is-describe-chat-card .html-container,
#describe_vlm_chat_button.is-describe-chat-card .prose {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  overflow: visible !important;
}

#describe_vlm_chat_button.describe-vlm-chat-entry-card .html-container,
#describe_vlm_chat_button.describe-vlm-chat-entry-card .prose,
#describe_vlm_chat_button.is-describe-chat-card .html-container,
#describe_vlm_chat_button.is-describe-chat-card .prose {
  display: block !important;
  width: 100% !important;
}

#describe_vlm_chat_button.describe-vlm-chat-entry-card button.describe-vlm-chat-entry-wide,
#describe_vlm_chat_button.is-describe-chat-card button.describe-vlm-chat-entry-wide {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 22px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 58px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border: 1px solid color-mix(in srgb, var(--button-primary-background-fill, #f97316) 58%, var(--border-color-primary, #555866)) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--button-primary-background-fill, #f97316) 22%, var(--block-background-fill, #24262b)), var(--block-background-fill, #24262b)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 18px rgba(0, 0, 0, 0.18) !important;
  color: var(--body-text-color, #f8fafc) !important;
  cursor: pointer !important;
  text-align: left !important;
}

#describe_vlm_chat_button.describe-vlm-chat-entry-card button.describe-vlm-chat-entry-wide:hover,
#describe_vlm_chat_button.is-describe-chat-card button.describe-vlm-chat-entry-wide:hover {
  border-color: color-mix(in srgb, var(--button-primary-background-fill, #f97316) 78%, #ffffff) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--button-primary-background-fill, #f97316) 30%, var(--block-background-fill, #24262b)), color-mix(in srgb, var(--block-background-fill, #24262b) 86%, #ffffff)) !important;
}

#describe_vlm_chat_button .describe-vlm-chat-entry-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--button-primary-background-fill, #f97316) 72%, #ffffff) !important;
  color: #111318 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

#describe_vlm_chat_button .describe-vlm-chat-entry-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
  line-height: 1.2 !important;
}

#describe_vlm_chat_button .describe-vlm-chat-entry-copy strong {
  min-width: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

#describe_vlm_chat_button .describe-vlm-chat-entry-copy span {
  min-width: 0 !important;
  color: color-mix(in srgb, var(--body-text-color, #f8fafc) 76%, transparent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

#describe_vlm_chat_button .describe-vlm-chat-entry-arrow {
  justify-self: end !important;
  color: color-mix(in srgb, var(--body-text-color, #f8fafc) 72%, transparent) !important;
  font-size: 14px !important;
}

@media (max-width: 640px) {
  #describe_vlm_chat_button.describe-vlm-chat-entry-card button.describe-vlm-chat-entry-wide,
  #describe_vlm_chat_button.is-describe-chat-card button.describe-vlm-chat-entry-wide {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 54px !important;
    padding: 8px 11px !important;
  }

  #describe_vlm_chat_button .describe-vlm-chat-entry-arrow {
    display: none !important;
  }
}

.sai-webui-danbooru-autocomplete {
  position: fixed;
  z-index: 2147483647;
  display: grid;
  gap: 1px;
  padding: 5px;
  width: min(560px, calc(100vw - 20px));
  max-width: min(560px, calc(100vw - 20px));
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border-color-primary, #3f3f46);
  border-radius: 6px;
  background: color-mix(in srgb, var(--block-background-fill, #24262b) 96%, #000 4%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  color: var(--body-text-color, #f8fafc);
}

.sai-webui-danbooru-autocomplete[hidden] {
  display: none;
}

.sai-webui-danbooru-runtime-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 2147483647;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 24px));
  padding: 9px 12px;
  border-radius: 6px;
  color: #ffffff;
  background: #242424;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.24);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sai-webui-danbooru-runtime-toast[data-level="warning"] {
  background: #78350f;
}

.sai-webui-danbooru-runtime-toast[hidden] {
  display: none;
}

.sai-webui-danbooru-autocomplete-item {
  display: grid;
  grid-template-columns: minmax(110px, 0.48fr) minmax(120px, 0.52fr);
  align-items: start;
  gap: 2px 12px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sai-webui-danbooru-autocomplete-item:hover,
.sai-webui-danbooru-autocomplete-item.is-selected {
  border-color: color-mix(in srgb, var(--button-primary-background-fill, #f97316) 42%, var(--border-color-primary, #3f3f46));
  background: color-mix(in srgb, var(--button-primary-background-fill, #f97316) 14%, transparent);
}

.sai-webui-danbooru-autocomplete-tag {
  min-width: 0;
  color: var(--body-text-color, #f8fafc);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sai-webui-danbooru-autocomplete-translation {
  min-width: 0;
  color: color-mix(in srgb, var(--body-text-color, #f8fafc) 78%, transparent);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
  white-space: normal;
}

.dark .sai-webui-danbooru-autocomplete-translation,
html[data-theme="dark"] .sai-webui-danbooru-autocomplete-translation {
  color: color-mix(in srgb, var(--body-text-color, #f8fafc) 78%, transparent);
}

.sai-webui-danbooru-autocomplete-meta,
.sai-webui-danbooru-autocomplete-aliases {
  min-width: 0;
  color: var(--body-text-color-subdued, #94a3b8);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sai-webui-danbooru-autocomplete-aliases {
  text-align: right;
}

@media (max-width: 640px) {
  .sai-webui-danbooru-autocomplete-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .sai-webui-danbooru-autocomplete-translation,
  .sai-webui-danbooru-autocomplete-aliases {
    text-align: left;
  }
}

.performance_selection label {
    width: 100px !important;
}

html.simpai-hide-performance-selection #performance_selection,
html.simpai-scene-frontend #performance_selection,
html.simpai-scene-frontend .performance_selection,
html.simpai-hide-performance-selection .performance_selection {
    display: none !important;
}

html.simpai-scene-frontend #quick_enhance,
html.simpai-scene-parameter-normalized #scene_image_number_row,
html.simpai-scene-parameter-normalized #scene_steps {
    display: none !important;
}

html.simpai-scene-parameter-normalized #general_setting_tabs button[data-tab-id="control"],
html.simpai-scene-parameter-normalized #general_setting_tabs button[data-tab-id="inpaint"] {
    display: none !important;
}

.aspect_ratios label {
    flex: calc(50% - 5px) !important;
}

.aspect_ratios label span {
    white-space: nowrap !important;
}

.aspect_ratios label input {
    margin-left: -5px !important;
}

.aspect_ratios_sd3 label {
    width: 100px !important;
}

.aspect_ratios_sd3 label span {
    white-space: nowrap !important;
}

.aspect_ratios_sd3 label input {
    margin-left: -5px !important;
}

.simpai-resolution-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(120, 120, 128, 0.34);
  border-radius: 8px;
  background: rgba(32, 32, 36, 0.72);
}

#parameter_profile_row.parameter-profile-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 8px !important;
}

#parameter_profile_row.parameter-profile-row > *,
#parameter_profile_row.parameter-profile-row .form,
#parameter_profile_row.parameter-profile-row .wrap,
#parameter_profile_row.parameter-profile-row .block {
  min-width: 0 !important;
}

#parameter_profile_select,
#parameter_profile_select .wrap,
#parameter_profile_select input,
#parameter_profile_select [role="combobox"] {
  min-height: 30px !important;
}

#parameter_profile_select input::placeholder {
  color: rgba(228, 228, 231, 0.62) !important;
  opacity: 1 !important;
}

#parameter_profile_row :is(#parameter_profile_save, #parameter_profile_save button) {
  min-width: 58px !important;
  min-height: 30px !important;
  border-color: color-mix(in srgb, #fdba74 78%, #f97316) !important;
  background: linear-gradient(180deg, #fb923c 0%, #f97316 100%) !important;
  color: #fff7ed !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#parameter_profile_row :is(#parameter_profile_save, #parameter_profile_save button):hover:not(:disabled),
#parameter_profile_row :is(#parameter_profile_save, #parameter_profile_save button):focus-visible {
  border-color: #fed7aa !important;
  background: linear-gradient(180deg, #fdba74 0%, #f97316 100%) !important;
  color: #fff7ed !important;
}

#parameter_profile_row :is(#parameter_profile_delete, #parameter_profile_delete button) {
  min-width: 58px !important;
  min-height: 30px !important;
  border-color: color-mix(in srgb, #fca5a5 70%, #dc2626) !important;
  background: color-mix(in srgb, var(--button-secondary-background-fill, #3f3f46) 62%, #7f1d1d) !important;
  color: #fee2e2 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#parameter_profile_row :is(#parameter_profile_delete, #parameter_profile_delete button):hover:not(:disabled),
#parameter_profile_row :is(#parameter_profile_delete, #parameter_profile_delete button):focus-visible {
  border-color: #fecaca !important;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  color: #fff5f5 !important;
}

#aspect_ratios_selection,
#random_aspect_ratio_checkbox,
#use_resolution_override_checkbox,
#resolution_original_input_checkbox,
#resolution_quantize_step,
#resolution_edit_mode,
#resolution_multiplier,
#resolution_source_meta,
#scene_aspect_ratio_row,
#scene_aspect_ratio,
#scene_use_resolution_override_checkbox,
#scene_resolution_control_html,
#scene_resolution_override_accordion,
.resolution-hidden-control {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.resolution-control-toolbar,
.resolution-control-grid,
.resolution-control-modes,
.resolution-control-ratio-lock {
  display: grid;
  gap: 8px;
  width: 100%;
}

.resolution-control-toolbar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resolution-control-options {
  align-items: center;
}

.resolution-control-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resolution-control-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resolution-control-ratio-lock {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  padding-top: 2px;
}

.resolution-control-ratio-lock .resolution-control-ratio-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px;
}

.resolution-control-ratio-lock .resolution-control-ratio-toggle input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.resolution-control-ratio-lock .resolution-control-ratio-toggle span {
  line-height: 1;
}

.resolution-control-toggle,
.resolution-control-grid label,
.resolution-control-ratio-lock label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--body-text-color);
}

.resolution-control-toggle {
  flex-direction: row;
  align-items: center;
  padding: 6px 8px;
  min-height: 30px;
  border: 1px solid rgba(120, 120, 128, 0.34);
  border-radius: 6px;
  background: rgba(24, 24, 27, 0.58);
}

.resolution-control-grid span,
.resolution-control-ratio-lock span {
  opacity: 0.72;
}

.resolution-control-grid select,
.resolution-control-grid input,
.resolution-control-ratio-lock select,
.resolution-control-ratio-lock input[type="text"],
.resolution-control-ratio-lock input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 4px 7px;
  border: 1px solid rgba(120, 120, 128, 0.42);
  border-radius: 6px;
  background: var(--input-background-fill);
  color: var(--body-text-color);
  box-sizing: border-box;
  font-size: 12px;
  line-height: 20px;
}

.resolution-control-ratio-lock select,
.resolution-control-ratio-lock input[type="text"],
.resolution-control-ratio-lock input[type="number"] {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 28px;
}

.resolution-control-ratio-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  height: 30px;
  padding: 0 4px;
  border: 1px solid rgba(120, 120, 128, 0.42);
  border-radius: 6px;
  background: var(--input-background-fill);
  box-sizing: border-box;
  transition: opacity 120ms ease, border-color 120ms ease, background 120ms ease, filter 120ms ease;
}

.resolution-control-ratio-custom input[type="number"] {
  min-width: 0;
  height: 24px;
  padding: 0 1px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: center;
  line-height: 24px;
}

.resolution-control-ratio-separator {
  opacity: 0.85 !important;
  text-align: center;
  line-height: 1;
  font-weight: 700;
}

.resolution-control-ratio-custom.resolution-ratio-custom-disabled {
  pointer-events: none;
  opacity: 0.42;
  filter: grayscale(0.8);
  border-style: dashed;
  border-color: rgba(120, 120, 128, 0.24);
  background: color-mix(in srgb, var(--input-background-fill) 64%, transparent);
}

.resolution-control-ratio-custom.resolution-ratio-custom-disabled input,
.resolution-control-ratio-custom.resolution-ratio-custom-disabled .resolution-control-ratio-separator {
  cursor: not-allowed;
}

.simpai-resolution-control:not(.resolution-ratio-custom-active) .resolution-control-ratio-lock label:has(.resolution-control-ratio-custom) > span:first-child {
  opacity: 0.38;
}

.resolution-control-modes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resolution-control-modes button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  background: rgba(84, 84, 92, 0.72);
  color: var(--body-text-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.resolution-control-modes button.active {
  border-color: rgba(249, 115, 22, 0.72);
  background: rgba(249, 115, 22, 0.34);
  color: #fff7ed;
}

.simpai-resolution-control.resolution-ratio-lock-active .resolution-control-ratio-toggle {
  border-color: rgba(249, 115, 22, 0.62);
  background: rgba(249, 115, 22, 0.16);
}

.simpai-resolution-control.resolution-original-input-active .resolution-control-toggle:has([data-role="original-input-toggle"]) {
  border-color: rgba(249, 115, 22, 0.62);
  background: rgba(249, 115, 22, 0.16);
}

.simpai-resolution-control.resolution-original-input-active .resolution-control-modes {
  opacity: 0.5;
}

.simpai-resolution-control.resolution-control-disabled select,
.simpai-resolution-control.resolution-control-disabled input,
.simpai-resolution-control.resolution-control-disabled button {
  cursor: not-allowed;
  opacity: 0.68;
}

.simpai-resolution-control.resolution-control-disabled .resolution-control-toggle,
.simpai-resolution-control.resolution-control-disabled .resolution-control-grid label,
.simpai-resolution-control.resolution-control-disabled .resolution-control-modes {
  opacity: 0.78;
}

.simpai-resolution-control.resolution-control-disabled .resolution-control-pad {
  cursor: default;
}

.resolution-control-pad {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(180, 180, 185, 0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(180, 180, 185, 0.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(180, 180, 185, 0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(180, 180, 185, 0.06) 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
  user-select: none;
  touch-action: none;
}

.resolution-control-pad canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.resolution-control-rect {
  position: absolute;
  box-sizing: border-box;
  min-width: 16px;
  min-height: 16px;
  border: 2px solid rgba(226, 232, 240, 0.86);
  border-radius: 6px;
  background: rgba(22, 22, 24, 0.1);
  box-shadow: 0 0 0 1px rgba(18, 18, 20, 0.58), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.resolution-control-rect [data-role="rect-label"] {
  position: absolute;
  left: 6px;
  top: 5px;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(24, 24, 27, 0.82);
  color: #f8fafc;
  font-size: 11px;
  line-height: 1.2;
}

.resolution-control-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 23, 42, 0.55);
  border-radius: 50%;
  background: #f8fafc;
  transform: translate(50%, 50%);
}

.resolution-control-status {
  min-height: 16px;
  text-align: right;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.78);
}

@media (max-width: 760px) {
  .resolution-control-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resolution-control-grid,
  .resolution-control-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resolution-control-ratio-lock {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .resolution-control-toolbar,
  .resolution-control-grid,
  .resolution-control-ratio-lock {
    grid-template-columns: 1fr;
  }

  .resolution-control-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lora_enable {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.row:has(> .form > .lora_enable) > .form:has(> .lora_enable) {
  display: flex !important;
  align-items: stretch !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
}

.row:has(> .form > .lora_enable) > .form:has(> .lora_enable) > .lora_enable {
  flex: 1 1 auto !important;
  align-self: stretch !important;
  margin: 0 !important;
}

.lora_enable label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lora_enable label input {
  margin: 0;
}

.lora_enable label span {
  display: none;
}

@-moz-document url-prefix() {
  .lora_weight input[type=number] {
    width: 80px;
  }
}

#context-menu{
    z-index:9999;
    position:absolute;
    display:block;
    padding:0px 0;
    border:2px solid #a55000;
    border-radius:8px;
    box-shadow:1px 1px 2px #CE6400;
    width: 200px;
}

.context-menu-items{
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu-items a{
    display:block;
    padding:5px;
    cursor:pointer;
}

.context-menu-items a:hover{
    background: #a55000;
}

.canvas-tooltip {
  position: absolute;
  inset: 0;
  --canvas-tooltip-bottom: 4px;
  --canvas-tooltip-left: 4px;
  pointer-events: none;
  z-index: 120;
}

.simpai-sketch > .canvas-tooltip {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

.canvas-tooltip-info {
  position: absolute;
  top: auto !important;
  right: auto !important;
  bottom: var(--canvas-tooltip-bottom) !important;
  left: var(--canvas-tooltip-left) !important;
  cursor: help;
  background-color: rgba(0, 0, 0, 0.3);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  z-index: 100;
  pointer-events: auto;
}

.canvas-tooltip-info::after {
  content: '';
  display: block;
  width: 2px;
  height: 7px;
  background-color: white;
  margin-top: 2px;
}

.canvas-tooltip-info::before {
  content: '';
  display: block;
  width: 2px;
  height: 2px;
  background-color: white;
}

.canvas-tooltip-content {
  display: none;
  background-color: #f9f9f9;
  color: #333;
  border: 1px solid #ddd;
  padding: 15px;
  position: absolute;
  top: auto !important;
  right: auto !important;
  bottom: calc(var(--canvas-tooltip-bottom) + 32px) !important;
  left: calc(var(--canvas-tooltip-left) + 8px) !important;
  width: 250px;
  font-size: 16px;
  opacity: 0;
  border-radius: 8px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 100;
  pointer-events: auto;
}

.canvas-tooltip:hover .canvas-tooltip-content {
  display: block;
  animation: fadeIn 0.5s;
  opacity: 1;
}

.note_close_btn {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    background: transparent !important;
    border: none !important;
    color: var(--body-text-color) !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 102 !important;
}

.note_close_btn:hover {
    color: var(--error-color, #ff4d4f) !important;
}

.styler {
  overflow:inherit !important;
  border-radius: 5px !important;
}

.gradio-container{
  overflow: visible;
}

/* Gradio 6 can leave an empty form wrapper above the top preset bar after
   hidden/utility components are mounted. It has no user-facing content but
   still paints a thin horizontal strip. */
.gradio-container div.form:empty,
.gradio-container div.form[style*="flex-grow: 0"][style*="min-width: min(0px, 100%)"]:empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.simpai-mounted-hidden {
  display: none !important;
}

.simpai-preset-switch-gallery-hidden {
  display: none !important;
}

.simpai-catalog-linked-gallery-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

html.simpai-preset-switch-gallery-suppressed #finished_gallery,
html.simpai-preset-nav-active #finished_gallery,
html.simpai-preset-switch-gallery-suppressed #final_gallery,
html.simpai-preset-nav-active #final_gallery,
html.simpai-preset-switch-gallery-suppressed #progress_video,
html.simpai-preset-nav-active #progress_video,
html.simpai-preset-switch-gallery-suppressed #comparison_box,
html.simpai-preset-nav-active #comparison_box,
html.simpai-preset-switch-gallery-suppressed #image_toolbox,
html.simpai-preset-nav-active #image_toolbox,
html.simpai-preset-switch-gallery-suppressed #compare_btn,
html.simpai-preset-nav-active #compare_btn,
html.simpai-preset-switch-gallery-suppressed #model_browser_modal,
html.simpai-preset-nav-active #model_browser_modal,
html.simpai-preset-switch-gallery-suppressed #model_browser_modal_content,
html.simpai-preset-nav-active #model_browser_modal_content {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#finished_images_catalog.simpai-preset-switch-catalog-collapsed > :not(button.label-wrap),
html.simpai-preset-switch-gallery-suppressed #finished_images_catalog > :not(button.label-wrap),
html.simpai-preset-nav-active #finished_images_catalog > :not(button.label-wrap) {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* fullpage image viewer */

#lightboxModal{
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(20, 20, 20, 0.95);
    user-select: none;
    -webkit-user-select: none;
    flex-direction: column;
}

.modalControls {
    display: flex;
    position: absolute;
    right: 0px;
    left: 0px;
    gap: 1em;
    padding: 1em;
    background-color:rgba(0,0,0,0);
    z-index: 1;
    transition: 0.2s ease background-color;
}
.modalControls:hover {
    background-color:rgba(0,0,0,0.9);
}
.modalClose {
    margin-left: auto;
}
.modalControls span{
    color: white;
    text-shadow: 0px 0px 0.25em black;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    width: 1em;
}

.modalControls span:hover, .modalControls span:focus{
    color: #999;
    text-decoration: none;
}

#lightboxModal > img {
    display: block;
    margin: auto;
    width: auto;
}

#lightboxModal > img.modalImageFullscreen{
    object-fit: contain;
    height: 100%;
    width: 100%;
    min-height: 0;
}

.modalPrev,
.modalNext {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.modalNext {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.modalPrev:hover,
.modalNext:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

#imageARPreview {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 2px solid red;
    background: rgba(255, 0, 0, 0.3);
    z-index: 900;
    pointer-events: none;
    display: none;
}

#stylePreviewOverlay {
    opacity: 0;
    pointer-events: none;
    width: 128px;
    height: 128px;
    position: fixed;
    top: 0px;
    left: 0px;
    border: solid 1px lightgrey;
    transform: translate(-140px, 20px);
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    z-index: 100;
    transition: transform 0.1s ease, opacity 0.3s ease;
}

#stylePreviewOverlay.lower-half {
    transform: translate(-140px, -140px);
}

/* scrollable box for style selections */
.contain .tabs {
  height: 100%;
}

.contain .tabs .tabitem.style_selections_tab {
  height: 100%;
}

.contain .tabs .tabitem.style_selections_tab > div:first-child {
  height: 100%;
}

.contain .tabs .tabitem.style_selections_tab .style_selections {
  min-height: 200px;
  height: 100%;
}

.contain .tabs .tabitem.style_selections_tab .legacy_style_selections_state {
  position: absolute !important;
  left: -10000px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] {
  position: absolute; /* 删除此以禁用复选框组中的滚动 */ 
  overflow: auto; 
  padding-right: 2px;
  max-height: 100%;
  scrollbar-width: thin;      /* Firefox */
  -ms-overflow-style: none;   /* IE 和 Edge */
}

/* 针对Webkit内核浏览器（如Chrome、Safari） */
#style_selections_tab::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] label {
  /* max-width: calc(35% - 15px) !important; /* 添加此选项以启用3列布局 */
  flex: calc(50% - 5px) !important;
}

.contain .tabs .tabitem.style_selections_tab .style_selections .wrap[data-testid="checkbox-group"] label span {
  /* white-space:nowrap; */ /* 添加此功能以禁用文本换行 (3列布局的更好选择) */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* styles preview tooltip */
.preview-tooltip {
  background-color: #fff8;
  font-family: monospace;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  display: none; /* remove this to enable tooltip in preview image */
}

.model-preview-tooltip {
  z-index: 2147483647 !important;
}

#inpaint_canvas,
#inpaint_mask_canvas,
#scene_canvas,
#inpaint_canvas.image-container,
#inpaint_mask_canvas.image-container,
#scene_canvas.image-container {
  position: relative !important;
}

#inpaint_canvas img,
#inpaint_canvas canvas,
#inpaint_mask_canvas img,
#inpaint_mask_canvas canvas,
#scene_canvas img,
#scene_canvas canvas {
    max-width: 100% !important;
    object-fit: contain !important;
}

.download-button {
    display: none !important;
}

.systemMsg {
    position: absolute;
    z-index: 1002;
    top: 0%;
    left: 0%;
    right: 0%;
    height: 45px;
    overflow: auto;
    user-select: none;
    -webkit-user-select: none;
}

.systemMsgBox {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 2px;
    font-size: 12px;
}
.systemMsgBox::-webkit-scrollbar {
    border: 1px !important;
}

.systemMsgClose {
    position: absolute;
    top: 0px;
    right: 5px;
}

iframe::-webkit-scrollbar {
    display: none;
}

.preset_bar {
    text-align: center;
    padding: 0px;
}

#topbar_row {
    container-type: inline-size;
    --topbar-button-base: clamp(86px, 10vw, 132px);
    flex-wrap: wrap;
    column-gap: 2px;
    row-gap: 2px;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 4px 6px 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color-primary) 34%, transparent);
    background: color-mix(in srgb, var(--body-background-fill) 94%, #202226);
    position: sticky;
    top: 0;
    z-index: 120;
}

@supports (width: 1cqw) {
    #topbar_row {
        --topbar-button-base: clamp(86px, 12cqw, 132px);
    }
}

#topbar_row > *,
#topbar_row > .form,
#topbar_row > .block {
    min-width: 0 !important;
}

#topbar_row .bar_store,
#topbar_row .bar_button {
    flex: 1 1 var(--topbar-button-base) !important;
    width: auto !important;
    min-width: 106px !important;
    max-width: none !important;
}

#topbar_row > .bar_store,
#topbar_row > *:has(.bar_store),
#topbar_row .bar_store {
    flex: 1 1 var(--topbar-button-base) !important;
    width: auto !important;
    min-width: 86px !important;
    max-width: none !important;
}

#topbar_row > .bar_button,
#topbar_row > *:has(.bar_button),
#topbar_row .bar_button {
    flex: 1 1 var(--topbar-button-base) !important;
    width: auto !important;
    min-width: 106px !important;
    max-width: none !important;
}

.topbar_line_break {
    display: none !important;
    flex-basis: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    overflow: hidden !important;
}

@media (max-width: 640px) {
    .gradio-container > .main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 640px) and (pointer: coarse) {
    #topbar_row {
        --topbar-mobile-button-width: clamp(116px, 34vw, 136px);
        display: grid !important;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, 28px);
        grid-auto-columns: var(--topbar-mobile-button-width);
        column-gap: 2px;
        row-gap: 2px;
        justify-content: flex-start !important;
        align-content: start;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        padding: 4px 6px 5px;
    }

    #topbar_row::-webkit-scrollbar {
        display: none;
    }

    #topbar_row .bar_store,
    #topbar_row .bar_button,
    #topbar_row > .bar_store,
    #topbar_row > *:has(.bar_store),
    #topbar_row > .bar_button,
    #topbar_row > *:has(.bar_button) {
        flex: none !important;
        width: var(--topbar-mobile-button-width) !important;
        min-width: var(--topbar-mobile-button-width) !important;
        max-width: var(--topbar-mobile-button-width) !important;
        scroll-snap-align: start;
    }
}

@media (max-width: 768px) {
    .advanced_check_row{
        width: max-content !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 640px) {
    .advanced_check_row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: initial !important;
        justify-content: stretch !important;
    }

    .advanced_check_row > *,
    .advanced_check_row :is(#input_image_checkbox, #prompt_panel_checkbox, #qwen_tts_checkbox, #advanced_checkbox) {
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

.bar_store {
    width: auto !important;
    min-width: 86px !important;
    height: 28px;
    min-height: 28px !important;
    padding: 0px 9px;
    left: 1px;
    top: 1px;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 4px !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 44%, transparent) !important;
    background: color-mix(in srgb, var(--block-background-fill) 86%, #262a30) !important;
    color: var(--body-text-color) !important;
    font-weight: 600;
    box-shadow: none !important;
}

.bar_button {
    width: auto !important;
    min-width: 106px !important;
    height: 28px;
    min-height: 28px !important;
    padding: 0px 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#presetPreviewOverlay {
    opacity: 0;
    pointer-events: none;
    width: 128px;
    height: 128px;
    position: fixed;
    top: 0px;
    left: 0px;
    border: solid 1px lightgrey;
    transform: translate(-140px, 20px);
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    z-index: 1500;
    transition: transform 0.1s ease, opacity 0.3s ease;
}

.preset-tooltip {
  background-color: #fff8;
  font-family: monospace;
  text-align: center;
  border-radius: 5px 5px 0 0 !important;
  font-size: 12px;
  max-width: 128px;
  overflow: hidden;
  line-height: 18px;
}

#presetPreviewOverlay.has-preview-image .preset-tooltip {
  display: none;
}

div.block.tagHelper {
  width: auto;
  position: absolute;
  right: 0.4em;
  bottom: 0.4em;
  padding: 0 0.3em;
  opacity: 0.5;
  color: var(--neutral-100);
  background-color: var(--secondary-400);
  border-radius: var(--radius-md);
  cursor: pointer;
}

div.block.tagHelper:hover {
  opacity: 0.9;
}

div.block.tagHelper:hover::after {
  content: "标签助手"; 
  position: absolute;
  top: -2em; 
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2em 0.5em;
  background-color: var(--secondary-600); 
  color: var(--neutral-50); 
  border-radius: var(--radius-sm);
  font-size: 0.8em;
  white-space: nowrap;
  opacity: 0.9;
  pointer-events: none; 
  z-index: 1001;
}

div.block.tagHelper.active {
  opacity: 1;
}

#tag_helper_btn.block,
.prompt-container div.block.tagHelper {
  width: auto !important;
  min-width: 48px !important;
  min-height: 22px !important;
  position: absolute !important;
  right: 1.75em !important;
  bottom: 0.4em !important;
  margin: 0 !important;
  padding: 0 0.6em !important;
  opacity: 0.8 !important;
  color: var(--neutral-100) !important;
  background-color: var(--secondary-400) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  z-index: 7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  border: 1px solid color-mix(in srgb, var(--secondary-400) 82%, white) !important;
}

#tag_helper_btn.block .wrap,
#tag_helper_btn.block .html-container,
#tag_helper_btn.block .prose,
#tag_helper_btn.block p,
.prompt-container div.block.tagHelper .wrap,
.prompt-container div.block.tagHelper .html-container,
.prompt-container div.block.tagHelper .prose,
.prompt-container div.block.tagHelper p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
}

#tag_helper_btn.block .tag-helper-inline,
.prompt-container div.block.tagHelper .tag-helper-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4em !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

#tag_helper_btn.block i,
.prompt-container div.block.tagHelper i {
  font-size: 12px !important;
  line-height: 1 !important;
}

#tag_helper_btn.block:hover,
.prompt-container div.block.tagHelper:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
}

#tag_helper_btn.block:hover::after,
.prompt-container div.block.tagHelper:hover::after {
  content: "Tag Assistant";
  position: absolute;
  top: -2em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2em 0.5em;
  background-color: var(--secondary-600);
  color: var(--neutral-50);
  border-radius: var(--radius-sm);
  font-size: 0.8em;
  white-space: nowrap;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1001;
}

#tag_helper_btn.block.active,
.prompt-container div.block.tagHelper.active {
  opacity: 1 !important;
}

.engineClass {
  width: auto; 
  position: absolute;
  right: 4px;
  top: 10px;
  padding: 1px 8px;
  opacity: 1;
  color: var(--neutral-100);
  background-color: var(--secondary-400);
  border-radius: var(--radius-md);
  z-index: 1001;
  /*font-size: 1.6em !important; */
}

#engine_class,
#engine_class > .html-container {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html:not(.simpai-engine-class-visible) #engine_class {
  display: none !important;
}

.identityIntroduce {
  width: auto;
  padding: 4px 3px 4px 6px;
  opacity: 1;
  border-radius: var(--radius-md);
}

.htmlcontent {
  width: auto;
  padding: 4px 8px;
  opacity: 1;
  border-radius: var(--radius-md);
}

.preview_column {
    position: relative;
    background: var(--block-background-fill) !important;
    --simpai-preview-min-height: 320px;
    --simpai-gallery-preview-thumbnails-height: clamp(48px, 10dvh, 64px);
    --simpai-preview-fit-height: clamp(var(--simpai-preview-min-height), calc(100dvh - 260px), 768px);
    min-height: var(--simpai-preview-fit-height, clamp(320px, calc(100dvh - 260px), 768px)) !important;
}

#main_layout_row > .preview_column {
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
}

.preview_column > .row:has(#preview_generating),
.preview_column > .row:has(#finished_gallery),
.preview_column > .row:has(#comparison_box),
.preview_column > .row:has(#video_player),
.preview_column > .row:has(#final_gallery) {
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    background: var(--block-background-fill) !important;
    align-items: stretch !important;
}

.preview_column > .row:has(#preview_generating) > .form:has(#preview_generating),
.preview_column > .row:has(#preview_generating) > .block:has(#preview_generating),
.preview_column > .row:has(#preview_generating):has(#finished_gallery) > #preview_generating,
.preview_column > .row:has(#preview_generating):has(#finished_gallery) > #finished_gallery,
.preview_column > .row:has(#preview_generating):has(#final_gallery) > #preview_generating,
.preview_column > .row:has(#preview_generating):has(#final_gallery) > #final_gallery,
.preview_column > .row:has(#preview_generating):has(#comparison_box) > #preview_generating,
.preview_column > .row:has(#preview_generating):has(#comparison_box) > #comparison_box,
.preview_column > .row:has(#preview_generating):has(#video_player) > #preview_generating,
.preview_column > .row:has(#preview_generating):has(#video_player) > #video_player,
.preview_column > .row:has(#finished_gallery) > .form:has(#finished_gallery),
.preview_column > .row:has(#finished_gallery) > .block:has(#finished_gallery),
.preview_column > .row:has(#final_gallery) > .form:has(#final_gallery),
.preview_column > .row:has(#final_gallery) > .block:has(#final_gallery) {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

#preview_generating,
#preview_generating.main_view {
    width: 100% !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    min-height: 0 !important;
    max-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    overflow: hidden !important;
}

html.simpai-gallery-browser-welcome-pending .preview_column > .row:has(#simpleai_gallery_welcome_guard_placeholder),
html.simpai-gallery-browser-overlay-active .preview_column > .row:has(#simpleai_gallery_welcome_guard_placeholder),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row {
    position: relative !important;
    display: block !important;
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    overflow: hidden !important;
    background: var(--block-background-fill) !important;
}

html.simpai-gallery-browser-welcome-pending .preview_column,
html.simpai-gallery-browser-overlay-active .preview_column {
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
}

.preview_column > .row:has(#simpleai_gallery_welcome_guard_placeholder) {
    position: relative !important;
    display: block !important;
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    overflow: hidden !important;
    background: var(--block-background-fill) !important;
}

.preview_column > .simpleai-gallery-welcome-guard-row {
    position: relative !important;
    display: block !important;
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    overflow: hidden !important;
    background: var(--block-background-fill) !important;
}

html.simpai-comparison-preview #simpleai_gallery_welcome_guard_row,
html.simpai-comparison-preview #simpleai_gallery_welcome_guard_placeholder {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.preview_column [data-simpleai-post-generation-collapsed="1"] {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

#simpleai_result_surface_guard {
    display: none !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

#simpleai_result_surface_guard[data-simpleai-result-surface-guard="1"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    background: var(--block-background-fill) !important;
    border: 1px solid var(--border-color-primary) !important;
    border-radius: var(--block-radius) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#simpleai_result_surface_guard .simpleai-result-surface-guard-frame {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.preview_column > .row[data-simpleai-post-generation-surface="1"] {
    position: relative !important;
    display: flex !important;
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    overflow: hidden !important;
    background: var(--block-background-fill) !important;
    align-items: stretch !important;
}

.preview_column > .row[data-simpleai-post-generation-surface="1"] > :is(.form, .block)[data-simpleai-post-generation-surface="1"],
.preview_column > .row[data-simpleai-post-generation-surface="1"] > :is(.form, .block):has(#finished_gallery),
.preview_column > .row[data-simpleai-post-generation-surface="1"] > :is(.form, .block):has(#comparison_box) {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
}

.preview_column > .row[data-simpleai-post-generation-surface="1"] > #comparison_box {
    display: block !important;
    visibility: visible !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
}

.preview_column > .row[data-simpleai-post-generation-surface="1"] #finished_gallery {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

.simpai-post-generation-missing-gallery-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    overflow: hidden !important;
    background: var(--block-background-fill) !important;
    border: 1px solid var(--border-color-primary) !important;
    border-radius: var(--block-radius) !important;
}

.simpai-post-generation-missing-gallery-placeholder > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#preview_generating),
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#preview_generating),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#finished_gallery),
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#finished_gallery),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#comparison_box),
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#comparison_box),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#video_player),
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#video_player),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#final_gallery),
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#final_gallery) {
    position: absolute !important;
    inset: 0 !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}

html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > #finished_gallery,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > #finished_gallery,
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > #comparison_box,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > #comparison_box,
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > #video_player,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > #video_player,
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > #final_gallery,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > #final_gallery,
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > #simpleai_gallery_welcome_guard_placeholder,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > #simpleai_gallery_welcome_guard_placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}

html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#preview_generating),
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#preview_generating),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #preview_generating,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row #preview_generating,
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #simpleai_gallery_welcome_guard_placeholder,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row #simpleai_gallery_welcome_guard_placeholder {
    z-index: 1 !important;
}

html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#finished_gallery),
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row > :is(.form, .block):has(#finished_gallery),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #finished_gallery,
html.simpai-gallery-browser-overlay-active .preview_column > .row.simpai-gallery-browser-overlay-row #finished_gallery {
    z-index: 5 !important;
}

html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #finished_gallery {
    opacity: 0 !important;
    pointer-events: none !important;
}

html.simpai-gallery-browser-overlay-active:not(.simpai-gallery-browser-welcome-pending) .preview_column > .row.simpai-gallery-browser-overlay-row #finished_gallery {
    opacity: 1 !important;
}

html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > .form:has(#preview_generating),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row > .block:has(#preview_generating),
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #preview_generating,
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #preview_generating.main_view,
html.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #simpleai_gallery_welcome_guard_placeholder {
    display: flex !important;
    visibility: visible !important;
}

html.simpai-gallery-browser-loading-silent .preview_column > .row.simpai-gallery-browser-overlay-row > .form:has(#preview_generating),
html.simpai-gallery-browser-loading-silent .preview_column > .row.simpai-gallery-browser-overlay-row > .block:has(#preview_generating),
html.simpai-gallery-browser-loading-silent .preview_column > .row.simpai-gallery-browser-overlay-row #preview_generating,
html.simpai-gallery-browser-loading-silent .preview_column > .row.simpai-gallery-browser-overlay-row #preview_generating.main_view,
html.simpai-gallery-browser-loading-silent .preview_column > .row.simpai-gallery-browser-overlay-row #simpleai_gallery_welcome_guard_placeholder {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html.simpai-gallery-browser-loading-silent.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #finished_gallery:has(.gallery-container > .preview),
html.simpai-gallery-browser-loading-silent.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #finished_gallery:has(.grid-wrap .gallery-item),
html.simpai-gallery-browser-loading-silent.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #finished_gallery:has(img),
html.simpai-gallery-browser-loading-silent.simpai-gallery-browser-welcome-pending .preview_column > .row.simpai-gallery-browser-overlay-row #finished_gallery:has(video) {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.preview_column [data-simpleai-gallery-welcome-hidden-for-gallery="1"],
.preview_column .simpai-gallery-browser-welcome-hidden {
    display: none !important;
    visibility: hidden !important;
}

html.simpai-gallery-browser-has-media .preview_column:has(#finished_images_catalog > button.label-wrap.open):has(#finished_gallery :is(img, video, .gallery-item, .gallery-container > .preview)) > .row:has(#preview_generating):not(:has(#finished_gallery)),
html.simpai-gallery-browser-has-media .preview_column:has(#finished_images_catalog > button.label-wrap[aria-expanded="true"]):has(#finished_gallery :is(img, video, .gallery-item, .gallery-container > .preview)) > .row:has(#preview_generating):not(:has(#finished_gallery)) {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

html.simpai-gallery-browser-has-media .preview_column > .row:has(#finished_gallery) #preview_generating,
html.simpai-gallery-browser-has-media .preview_column > .row:has(#finished_gallery) > :is(.form, .block):has(#preview_generating):not(:has(#finished_gallery)),
html.simpai-gallery-browser-has-media .preview_column #simpleai_gallery_welcome_guard_placeholder {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

html.simpai-gallery-browser-welcome-pending #simpleai_gallery_welcome_guard_placeholder,
.simpleai-gallery-welcome-guard-placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    min-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    max-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: var(--block-background-fill) !important;
    border-radius: var(--block-radius, 8px) !important;
}

html.simpai-gallery-browser-welcome-pending #simpleai_gallery_welcome_guard_placeholder img,
.simpleai-gallery-welcome-guard-placeholder img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

#preview_generating [data-testid="image"],
#preview_generating .image-container,
#preview_generating .upload-container,
#preview_generating .image-frame,
#preview_generating .wrap,
#preview_generating .wrap-inner,
#preview_generating .container,
#preview_generating .image-preview,
#preview_generating button:has(img) {
    width: 100% !important;
    height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    min-height: 0 !important;
    max-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#preview_generating img,
#preview_generating button:has(img) img,
#preview_generating .image-frame img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: var(--simpai-preview-fit-height, min(768px, calc(100vh - 260px))) !important;
    object-fit: contain !important;
}

#comparison_box,
#comparison_box.main_view {
    width: 100% !important;
    height: var(--simpai-preview-fit-height, clamp(320px, calc(100dvh - 260px), 768px)) !important;
    min-height: var(--simpai-preview-fit-height, clamp(320px, calc(100dvh - 260px), 768px)) !important;
    max-height: var(--simpai-preview-fit-height, clamp(320px, calc(100dvh - 260px), 768px)) !important;
    overflow: hidden !important;
}

#comparison_box .image-container,
#comparison_box .slider-wrap,
#comparison_box .wrap,
#comparison_box .content {
    height: 100% !important;
    min-height: 0 !important;
}

#comparison_box .content {
    touch-action: none;
}

#comparison_box img {
    position: absolute !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
    transform-origin: top left !important;
}

#finished_gallery,
#finished_gallery.main_view,
#final_gallery,
#final_gallery.main_view {
    width: 100% !important;
    height: var(--simpai-preview-fit-height, clamp(320px, calc(100dvh - 260px), 768px)) !important;
    min-height: var(--simpai-preview-fit-height, clamp(320px, calc(100dvh - 260px), 768px)) !important;
    max-height: none !important;
    overflow: hidden !important;
}

#finished_gallery .gallery-container,
#final_gallery .gallery-container {
    height: 100% !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: var(--block-background-fill) !important;
}

#finished_gallery .grid-wrap,
#final_gallery .grid-wrap {
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

#finished_gallery .grid-wrap:has(.grid-container > .gallery-item:only-child),
#final_gallery .grid-wrap:has(.grid-container > .gallery-item:only-child) {
    overflow: hidden !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

#finished_gallery .grid-container:has(> .gallery-item:only-child),
#final_gallery .grid-container:has(> .gallery-item:only-child) {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

#finished_gallery .grid-container:has(> .gallery-item:only-child) > .gallery-item,
#final_gallery .grid-container:has(> .gallery-item:only-child) > .gallery-item {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(720px, 100%) !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

#finished_gallery .grid-container:has(> .gallery-item:only-child) > .gallery-item img,
#finished_gallery .grid-container:has(> .gallery-item:only-child) > .gallery-item video,
#final_gallery .grid-container:has(> .gallery-item:only-child) > .gallery-item img,
#final_gallery .grid-container:has(> .gallery-item:only-child) > .gallery-item video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: auto !important;
}

#finished_gallery.simpleai-gallery-generation-grid .grid-wrap:has(.grid-container > .gallery-item:only-child),
#final_gallery.simpleai-gallery-generation-grid .grid-wrap:has(.grid-container > .gallery-item:only-child) {
    overflow-x: auto !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

#finished_gallery.simpleai-gallery-generation-grid .grid-container:has(> .gallery-item:only-child),
#final_gallery.simpleai-gallery-generation-grid .grid-container:has(> .gallery-item:only-child) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(128px, auto) !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
}

#finished_gallery.simpleai-gallery-generation-grid .grid-container:has(> .gallery-item:only-child) > .gallery-item,
#final_gallery.simpleai-gallery-generation-grid .grid-container:has(> .gallery-item:only-child) > .gallery-item {
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
}

#finished_gallery.simpleai-gallery-generation-grid .grid-container:has(> .gallery-item:only-child) > .gallery-item img,
#finished_gallery.simpleai-gallery-generation-grid .grid-container:has(> .gallery-item:only-child) > .gallery-item video,
#final_gallery.simpleai-gallery-generation-grid .grid-container:has(> .gallery-item:only-child) > .gallery-item img,
#final_gallery.simpleai-gallery-generation-grid .grid-container:has(> .gallery-item:only-child) > .gallery-item video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
}

#finished_gallery .gallery-container:has(> .preview) > .grid-wrap,
#final_gallery .gallery-container:has(> .preview) > .grid-wrap {
    visibility: hidden !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

#finished_gallery .gallery-container > .preview,
#final_gallery .gallery-container > .preview {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 20 !important;
    overflow: hidden !important;
    background: var(--block-background-fill) !important;
    border-radius: calc(var(--block-radius) - var(--block-border-width)) !important;
}

#finished_gallery .gallery-container > .preview::before,
#final_gallery .gallery-container > .preview::before {
    background: var(--block-background-fill) !important;
    opacity: 1 !important;
}

#finished_gallery .preview .media-button,
#final_gallery .preview .media-button {
    width: 100% !important;
    height: calc(100% - var(--simpai-gallery-preview-thumbnails-height, 64px)) !important;
    min-height: 0 !important;
    background: var(--background-fill-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.simpai-media-resolution-host {
    position: relative !important;
}

.simpai-media-resolution-badge {
    position: absolute !important;
    left: 8px !important;
    bottom: 8px !important;
    z-index: 12 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 20px !important;
    max-width: calc(100% - 16px) !important;
    padding: 2px 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, 0.58) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

.simpai-media-resolution-badge[hidden] {
    display: none !important;
}

#finished_gallery .grid-wrap .gallery-item .simpai-media-resolution-badge,
#final_gallery .grid-wrap .gallery-item .simpai-media-resolution-badge {
    left: 4px !important;
    bottom: 4px !important;
    min-height: 17px !important;
    max-width: calc(100% - 8px) !important;
    padding: 1px 5px !important;
    font-size: 9px !important;
    border-radius: 4px !important;
}

[data-testid="image"].image-container .simpai-media-resolution-badge,
.gradio-image .simpai-media-resolution-badge,
.image-container .simpai-media-resolution-badge,
.image-frame .simpai-media-resolution-badge {
    left: 8px !important;
    bottom: 8px !important;
}

#finished_gallery .preview .media-button img,
#final_gallery .preview .media-button img,
#finished_gallery .preview .media-button video,
#final_gallery .preview .media-button video {
    flex: 0 1 auto !important;
    align-self: center !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: auto !important;
}

#finished_gallery .preview .thumbnails,
#final_gallery .preview .thumbnails {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-content: safe center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--simpai-gallery-preview-thumbnails-height, 64px) !important;
    min-height: var(--simpai-gallery-preview-thumbnails-height, 64px) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: var(--block-background-fill) !important;
    box-sizing: border-box !important;
    overscroll-behavior-x: contain !important;
}

#finished_gallery .preview .thumbnails > *,
#final_gallery .preview .thumbnails > * {
    flex: 0 0 auto !important;
}

.preview_column > .row[data-simpleai-post-generation-surface="1"] #finished_gallery .gallery-container,
.preview_column > .row[data-simpleai-post-generation-surface="1"] #finished_gallery .grid-wrap,
.preview_column > .row[data-simpleai-post-generation-surface="1"] #finished_gallery .preview .thumbnails {
    min-width: 0 !important;
    max-width: 100% !important;
}

.preview_column > .row[data-simpleai-post-generation-surface="1"] #finished_gallery .grid-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable both-edges !important;
}

#finished_gallery .thumbnail-item,
#final_gallery .thumbnail-item {
    position: relative !important;
    isolation: isolate !important;
}

#finished_gallery .thumbnail-item:hover,
#final_gallery .thumbnail-item:hover {
    --ring-color: transparent !important;
    border-color: #ff7a1a !important;
    box-shadow: var(--shadow-drop) !important;
}

#finished_gallery .thumbnail-item:hover::after,
#final_gallery .thumbnail-item:hover::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border: 2px solid #ff7a1a !important;
    box-sizing: border-box !important;
}

#finished_gallery.simpleai-gallery-fullscreen,
#final_gallery.simpleai-gallery-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    z-index: 2147483600 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
}

#finished_gallery.simpleai-gallery-fullscreen .gallery-container,
#final_gallery.simpleai-gallery-fullscreen .gallery-container,
#finished_gallery.simpleai-gallery-fullscreen .gallery-container > .preview,
#final_gallery.simpleai-gallery-fullscreen .gallery-container > .preview {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: #000 !important;
}

#finished_gallery.simpleai-gallery-fullscreen .preview::before,
#final_gallery.simpleai-gallery-fullscreen .preview::before {
    background: #000 !important;
    opacity: 1 !important;
}

#finished_gallery.simpleai-gallery-fullscreen .preview .media-button,
#final_gallery.simpleai-gallery-fullscreen .preview .media-button {
    height: calc(100vh - 72px) !important;
    background: #000 !important;
}

#finished_gallery.simpleai-gallery-fullscreen .preview .media-button img,
#final_gallery.simpleai-gallery-fullscreen .preview .media-button img,
#finished_gallery.simpleai-gallery-fullscreen .preview .media-button video,
#final_gallery.simpleai-gallery-fullscreen .preview .media-button video {
    max-width: 100vw !important;
    max-height: calc(100vh - 72px) !important;
}

#finished_gallery.simpleai-gallery-fullscreen .preview .thumbnails,
#final_gallery.simpleai-gallery-fullscreen .preview .thumbnails {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 8px 12px !important;
    background: rgba(0, 0, 0, 0.92) !important;
}

body.simpleai-gallery-fullscreen-open {
    overflow: hidden !important;
}

.preview_column > div:has(button.toolbox_icon_btn),
.preview_column .row:has(button.toolbox_icon_btn),
.preview_column .gr-group:has(button.toolbox_icon_btn) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
}

#image_toolbox,
.gr-group:has(> .styler > button.toolbox_icon_btn),
.toolbox {
    box-sizing: border-box;
    height: auto;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: fit-content !important;
    max-width: calc(100% - 16px);
    z-index: 100;
    text-align: center;
    background: #202126 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 7px !important;
    padding: 3px 4px !important;
    margin: 2px auto 4px !important;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible !important;
}

#image_toolbox,
#image_toolbox > div,
#image_toolbox > .styler,
#image_toolbox .styler,
#image_toolbox .styler > *,
#image_toolbox .form,
#image_toolbox .wrap,
.gr-group:has(> .styler > button.toolbox_icon_btn),
.gr-group:has(> .styler > button.toolbox_icon_btn) > .styler,
.gr-group:has(> .styler > button.toolbox_icon_btn) > .styler > *,
.toolbox,
.toolbox > div,
.toolbox > .styler,
.toolbox .styler,
.toolbox .styler > *,
.toolbox .form,
.toolbox .wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: visible !important;
}

#image_toolbox .styler,
.gr-group:has(> .styler > button.toolbox_icon_btn) > .styler,
.toolbox .styler {
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}

#image_toolbox .block,
#image_toolbox .padded,
#image_toolbox .hide-container,
#image_toolbox .auto-margin,
.gr-group:has(> .styler > button.toolbox_icon_btn) .block,
.gr-group:has(> .styler > button.toolbox_icon_btn) .padded,
.gr-group:has(> .styler > button.toolbox_icon_btn) .hide-container,
.gr-group:has(> .styler > button.toolbox_icon_btn) .auto-margin,
.toolbox .block,
.toolbox .padded,
.toolbox .hide-container,
.toolbox .auto-margin {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#image_toolbox .styler > .block:not(:has(button.toolbox_icon_btn)),
.gr-group:has(> .styler > button.toolbox_icon_btn) > .styler > .block:not(:has(button.toolbox_icon_btn)),
.toolbox .styler > .block:not(:has(button.toolbox_icon_btn)) {
    display: none !important;
}

#image_toolbox .markdown,
#image_toolbox p,
.gr-group:has(> .styler > button.toolbox_icon_btn) .markdown,
.gr-group:has(> .styler > button.toolbox_icon_btn) p,
.toolbox .markdown,
.toolbox p {
    display: none !important;
}

#image_toolbox button:not(.hidden),
.gr-group:has(> .styler > button.toolbox_icon_btn) button.toolbox_icon_btn:not(.hidden),
.toolbox button:not(.hidden) {
    flex: 0 0 30px !important;
    min-width: 30px !important;
    width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2b2c32 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
}

#image_toolbox .toolbox_icon_btn,
.gr-group:has(> .styler > button.toolbox_icon_btn) .toolbox_icon_btn,
.toolbox .toolbox_icon_btn {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
}

#image_toolbox #compare_btn,
.gr-group:has(> .styler > button.toolbox_icon_btn) #compare_btn,
.toolbox #compare_btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

#image_toolbox .toolbox_icon_btn.hidden,
#image_toolbox button.hidden,
.gr-group:has(> .styler > button.toolbox_icon_btn) > .styler > button.toolbox_icon_btn.hidden,
.toolbox .toolbox_icon_btn.hidden,
.toolbox button.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#image_toolbox #compare_btn.simpleai-compare-ready,
.gr-group:has(> .styler > button.toolbox_icon_btn) #compare_btn.simpleai-compare-ready,
.toolbox #compare_btn.simpleai-compare-ready,
#image_toolbox #compare_btn.primary,
.gr-group:has(> .styler > button.toolbox_icon_btn) #compare_btn.primary,
.toolbox #compare_btn.primary {
    color: #fff !important;
    background: #2368ee !important;
    border-color: rgba(180, 216, 255, 0.95) !important;
    outline: 2px solid rgba(255, 184, 77, 0.98) !important;
    outline-offset: 1px !important;
    box-shadow: inset 0 0 0 1px rgba(219, 234, 254, 0.95), 0 0 0 1px rgba(147, 197, 253, 0.72), 0 0 10px rgba(255, 184, 77, 0.64) !important;
    z-index: 1 !important;
}

#image_toolbox[style*="display: none"],
#image_toolbox.hidden,
html.simpai-gallery-toolbox-deferred #image_toolbox,
html.simpai-gallery-toolbox-deferred .preview_column .toolbox,
html.simpai-gallery-toolbox-deferred .preview_column .gr-group:has(> .styler > button.toolbox_icon_btn),
html:not(.simpai-video-result-preview):not(.simpai-comparison-preview):not(.simpai-post-generation-result-surface) #image_toolbox.simpleai-gallery-toolbox-hidden,
html:not(.simpai-video-result-preview):not(.simpai-comparison-preview):not(.simpai-post-generation-result-surface) .toolbox.simpleai-gallery-toolbox-hidden,
html:not(.simpai-video-result-preview):not(.simpai-comparison-preview):not(.simpai-post-generation-result-surface) .gr-group.simpleai-gallery-toolbox-hidden:has(> .styler > button.toolbox_icon_btn),
.gr-group:has(> .styler > button.toolbox_icon_btn):not(:has(> .styler > button.toolbox_icon_btn:not(.hidden))),
html:not(.simpai-video-result-preview):not(.simpai-comparison-preview):not(.simpai-post-generation-result-surface) .preview_column:not(:has(#finished_gallery .gallery-container > .preview)):not(:has(#final_gallery .gallery-container > .preview)) #image_toolbox,
html:not(.simpai-video-result-preview):not(.simpai-comparison-preview):not(.simpai-post-generation-result-surface) .preview_column:not(:has(#finished_gallery .gallery-container > .preview)):not(:has(#final_gallery .gallery-container > .preview)) .toolbox,
html:not(.simpai-video-result-preview):not(.simpai-comparison-preview):not(.simpai-post-generation-result-surface) .preview_column:not(:has(#finished_gallery .gallery-container > .preview)):not(:has(#final_gallery .gallery-container > .preview)) .gr-group:has(> .styler > button.toolbox_icon_btn) {
    display: none !important;
}

html:not(.simpai-gallery-toolbox-deferred).simpai-post-generation-result-surface .preview_column #image_toolbox:not([style*="display: none"]):not(.hidden):not(.simpleai-gallery-toolbox-hidden),
html:not(.simpai-gallery-toolbox-deferred).simpai-post-generation-result-surface .preview_column .toolbox:not([style*="display: none"]):not(.hidden):not(.simpleai-gallery-toolbox-hidden),
html:not(.simpai-gallery-toolbox-deferred).simpai-post-generation-result-surface .preview_column .gr-group:not([style*="display: none"]):not(.hidden):not(.simpleai-gallery-toolbox-hidden):has(> .styler > button.toolbox_icon_btn:not(.hidden)) {
    display: flex !important;
}

html:not(.simpai-gallery-toolbox-deferred).simpai-video-result-preview #image_toolbox:not([style*="display: none"]):not(.hidden),
html:not(.simpai-gallery-toolbox-deferred).simpai-video-result-preview .preview_column #image_toolbox:not([style*="display: none"]):not(.hidden),
html:not(.simpai-gallery-toolbox-deferred).simpai-video-result-preview .preview_column .toolbox:not([style*="display: none"]):not(.hidden),
html:not(.simpai-gallery-toolbox-deferred).simpai-video-result-preview .preview_column .gr-group:not([style*="display: none"]):not(.hidden):has(> .styler > button.toolbox_icon_btn) {
    display: flex !important;
}

html:not(.simpai-gallery-toolbox-deferred).simpai-comparison-preview #image_toolbox:not([style*="display: none"]):not(.hidden),
html:not(.simpai-gallery-toolbox-deferred).simpai-comparison-preview .preview_column #image_toolbox:not([style*="display: none"]):not(.hidden),
html:not(.simpai-gallery-toolbox-deferred).simpai-comparison-preview .preview_column .toolbox:not([style*="display: none"]):not(.hidden),
html:not(.simpai-gallery-toolbox-deferred).simpai-comparison-preview .preview_column .gr-group:not([style*="display: none"]):not(.hidden):has(> .styler > button.toolbox_icon_btn) {
    display: flex !important;
}

html.simpleai-image-tools-disabled #image_toolbox,
html.simpleai-image-tools-disabled #compare_btn,
html.simpleai-image-tools-disabled .preview_column .toolbox,
html.simpleai-image-tools-disabled .preview_column .gr-group:has(> .styler > button.toolbox_icon_btn) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html:has(#image_tools_checkbox input[type="checkbox"]:not(:checked)) #image_toolbox,
html:has(#image_tools_checkbox input[type="checkbox"]:not(:checked)) #compare_btn,
html:has(#image_tools_checkbox input[type="checkbox"]:not(:checked)) .preview_column .toolbox,
html:has(#image_tools_checkbox input[type="checkbox"]:not(:checked)) .preview_column .gr-group:has(> .styler > button.toolbox_icon_btn),
html:has(input#image_tools_checkbox[type="checkbox"]:not(:checked)) #image_toolbox,
html:has(input#image_tools_checkbox[type="checkbox"]:not(:checked)) #compare_btn,
html:has(input#image_tools_checkbox[type="checkbox"]:not(:checked)) .preview_column .toolbox,
html:has(input#image_tools_checkbox[type="checkbox"]:not(:checked)) .preview_column .gr-group:has(> .styler > button.toolbox_icon_btn) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.preset_store {
    --simpleai-resize-handle-offset-x: 8px !important;
    --simpleai-resize-handle-offset-y: 8px !important;
    --simpleai-resize-handle-hitbox: 18px;
    --simpleai-resize-handle-icon-size: 10px;
    --preset-store-top: clamp(16px, 12dvh, 118px);
    --preset-store-bottom-reserve: 28px;
    height: min(76dvh, 760px, calc(100dvh - var(--preset-store-top) - var(--preset-store-bottom-reserve)));
    min-height: min(520px, calc(100dvh - var(--preset-store-top) - var(--preset-store-bottom-reserve)));
    max-height: calc(100dvh - var(--preset-store-top) - var(--preset-store-bottom-reserve));
    overflow: hidden;
    overscroll-behavior: contain;
    position: fixed;
    top: var(--preset-store-top) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(1280px, calc(100vw - 72px)) !important;
    max-width: calc(100vw - 72px) !important;
    min-width: min(560px, calc(100vw - 72px)) !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    transform: translateX(-50%);
    z-index: 1300;
    text-align: left;
    padding: 0;
    background: #18191d !important;
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45), 0 0 0 100vmax rgba(0, 0, 0, 0.42);
    flex-direction: column !important;
}

.simpleai-floating-host > .preset_store:not([hidden]):not(.hidden):not(.hide) {
    display: flex !important;
}

.gradio-container .preset_store:not(.simpleai-floating-portal-node) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.gradio-container .form:has(> .preset_store:not(.simpleai-floating-portal-node)),
.gradio-container .block:has(> .preset_store:not(.simpleai-floating-portal-node)),
.gradio-container .row:has(> .preset_store:not(.simpleai-floating-portal-node)) {
    display: none !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
}

.preset_store::before {
    display: none;
}

.preset-store-tools {
    padding: 12px 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: #202227;
}

#preset_store_tools {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 32px;
}

.preset-store-titlebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: grab;
    user-select: none;
}

.preset-store-titlebar:active {
    cursor: grabbing;
}

.preset-store-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: #ffffff;
}

.preset-store-subtitle {
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: #aeb4bd;
}

.preset-store-close {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: #2b2e35;
    color: #f3f4f6;
    cursor: pointer;
    font-size: 18px;
    line-height: 26px;
}

.preset-store-controls {
    display: grid;
    grid-template-columns: minmax(180px, 280px) 1fr auto;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.preset-store-editor {
    flex: 0 0 auto;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    background: #181a1f;
}

.preset-store-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #dfe5ee;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.preset-store-draft-count {
    color: #8fbfff;
}

.preset-store-nav-draft {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 30px;
    align-items: center;
    position: relative;
    padding: 3px;
    border-radius: 6px;
    outline: 1px dashed transparent;
    outline-offset: 2px;
    transition: background 140ms ease, outline-color 140ms ease, box-shadow 140ms ease;
}

.preset-store-nav-draft.is-drag-over {
    background: rgba(99, 167, 255, 0.08);
    outline-color: rgba(99, 167, 255, 0.56);
}

.preset-store-status {
    margin-top: 7px;
    color: #ffd28a;
    font-size: 12px;
    line-height: 1.35;
}

.preset-store-status[hidden] {
    display: none !important;
}

.preset-store-draft-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px !important;
    max-width: 164px;
    margin: 0 !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
    border-color: rgba(99, 167, 255, 0.50) !important;
    background: #20314a !important;
    color: #eef6ff !important;
    cursor: grab;
    font-size: 13px;
    position: relative;
    will-change: transform, opacity;
    transition: transform 140ms ease, opacity 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.preset-store-draft-chip.is-drag-source {
    opacity: 0.12;
    transform: none;
    box-shadow: none;
    cursor: grabbing;
}

.preset-store-draft-placeholder {
    pointer-events: none;
}

.preset-store-draft-handle {
    color: #8fbfff;
    font-weight: 800;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.preset-store-draft-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

.preset-store-draft-remove {
    color: #cfd8e5;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    border: 0 !important;
    background: transparent !important;
    min-height: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.preset-store-drag-ghost {
    position: fixed;
    z-index: 1600;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    max-width: 164px;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid rgba(99, 167, 255, 0.62);
    background: #20314a;
    color: #eef6ff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
    transform: translate3d(0, 0, 0) scale(1.03);
    transform-origin: 18px 12px;
    will-change: transform, left, top;
}

body.preset-store-dragging .preset-store-draft-handle {
    cursor: grabbing;
}

body.preset-store-dragging-candidate .preset-store-nav-draft {
    outline-color: rgba(99, 167, 255, 0.34);
}

.preset-store-editor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.preset-store-pool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 8px;
    color: #dfe5ee;
    font-size: 12px;
    font-weight: 700;
}

.preset-store-user-pool-head[hidden],
.preset-store-user-candidate-pool[hidden] {
    display: none !important;
}

.preset-store-candidate-pool {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0;
    gap: 5px;
    align-content: flex-start;
    align-items: flex-start;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 8px 28px 2px;
    scrollbar-color: rgba(128, 128, 128, 0.4) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.preset-store-user-candidate-pool {
    flex: 0 0 auto;
    min-height: 0;
    max-height: clamp(64px, 16dvh, 180px);
    margin-bottom: 2px;
}

.preset-store-candidate-pool::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
}

.preset-store-candidate-pool::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.4) !important;
    border-radius: 10px !important;
}

.preset-store-candidate-pool::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.6) !important;
}

.preset-store-candidate-pool::-webkit-scrollbar-track {
    background-color: transparent !important;
}

.preset-store-candidate,
.preset_store button.preset-store-candidate {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    flex: 0 0 auto;
    gap: 6px;
    min-height: 29px !important;
    max-width: 172px;
    margin: 2px !important;
    padding: 4px 22px 4px 8px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: #252830;
    color: #eef2f7;
    font-size: 13px;
    line-height: 1.15;
    cursor: pointer;
    user-select: none;
    position: relative;
    touch-action: none;
    transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease, background 140ms ease;
}

.preset-store-candidate:hover {
    border-color: rgba(99, 167, 255, 0.42);
    background: #2c3340;
}

.preset-store-candidate.sai-store-pinned {
    border-color: rgba(99, 167, 255, 0.62);
    background: #20314a;
}

.preset-store-candidate.is-drag-source {
    opacity: 0.28;
    transform: scale(0.98);
    cursor: grabbing;
}

.preset-store-candidate.is-user-preset {
    padding-right: 28px !important;
}

.preset-store-candidate.is-user-preset.preset-missing::after {
    right: 26px;
}

.preset-store-user-delete {
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    transform: translateY(-50%);
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: #cfd8e5 !important;
    font-size: 11px !important;
    line-height: 16px !important;
    cursor: pointer;
}

.preset-store-user-delete:hover {
    background: rgba(180, 35, 24, 0.24) !important;
    color: #ffd7d2 !important;
}

.preset-store-candidate.preset-missing {
    border-color: rgba(240, 184, 75, 0.55);
}

.preset-store-candidate-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preset-store-candidate-meta {
    color: #aeb8c6;
    font-size: 10px;
}

.preset-store-candidate.preset-missing::after {
    content: "\26A0";
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    color: #f0b84b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.preset-store-search {
    height: 34px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #111216;
    color: #f8fafc;
    padding: 0 10px;
    outline: none;
}

.preset-store-search:focus {
    border-color: #63a7ff;
    box-shadow: 0 0 0 2px rgba(99, 167, 255, 0.18);
}

.preset-store-filter-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.preset-store-filter {
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: #2a2d33;
    color: #d7dce3;
    padding: 4px 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.preset-store-filter.is-active {
    color: #06111f;
    background: #63a7ff;
    border-color: #8ec1ff;
}

.preset_store > .form,
.preset_store > .block {
    padding: 4px 6px 6px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    background: #18191d !important;
}

.preset_store > .form > .html-container,
.preset_store > .block > .html-container,
.preset_store > .form > .html-container > .prose,
.preset_store > .block > .html-container > .prose {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.preset_store > .form:has(> #preset_store_source_bridge),
.preset_store > .block:has(> #preset_store_source_bridge) {
    display: none !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
}

.preset_store button {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none;
    margin: 4px;
    min-height: 34px;
    border-radius: 6px !important;
    background: #252830 !important;
    color: #eef2f7 !important;
    position: relative;
}

.preset_store .preset-store-close {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #2b2e35 !important;
}

.preset_store .preset-store-filter {
    min-height: 28px !important;
    margin: 0 !important;
    padding: 4px 9px !important;
    background: #2a2d33 !important;
    color: #d7dce3 !important;
}

.preset_store .preset-store-filter.is-active {
    color: #06111f !important;
    background: #63a7ff !important;
    border-color: #8ec1ff !important;
}

.preset_store button.preset-complete {
    box-shadow: none;
}

.preset_store button.preset-complete div.gallery {
    text-shadow: none;
}

.preset_store button.preset-missing {
    border: 1px solid rgba(240, 184, 75, 0.55) !important;
}

.preset_store button.preset-missing::after {
    content: "\26A0";
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    color: #f0b84b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.preset_store button.sai-store-pinned {
    border-color: rgba(99, 167, 255, 0.62) !important;
    background: #20314a !important;
}

:root[data-theme="light"] .preset_store button.preset-missing,
html[data-theme="light"] .preset_store button.preset-missing,
body[data-theme="light"] .preset_store button.preset-missing {
    border-color: #ffffff !important;
}

:root[data-theme="dark"] .preset_store button.preset-missing,
html[data-theme="dark"] .preset_store button.preset-missing,
body[data-theme="dark"] .preset_store button.preset-missing {
    border-color: #4B5563 !important;
}

.preset_store .gallery,
.preset_store .grid,
.preset_store .dataset {
    display: none !important;
}

.preset_store button.sai-store-filter-hidden {
    display: none !important;
}

.preset-store-candidate.sai-store-filter-hidden {
    display: none !important;
}

@media (max-width: 860px) {
    .preset_store {
        --preset-store-top: clamp(8px, 6dvh, 48px);
        --preset-store-bottom-reserve: 10px;
        top: var(--preset-store-top) !important;
        height: calc(100dvh - var(--preset-store-top) - var(--preset-store-bottom-reserve)) !important;
        min-height: min(420px, calc(100dvh - var(--preset-store-top) - var(--preset-store-bottom-reserve))) !important;
        max-height: calc(100dvh - var(--preset-store-top) - var(--preset-store-bottom-reserve)) !important;
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        min-width: 0 !important;
    }
    .preset-store-tools {
        padding: 10px 10px 18px;
    }
    .preset-store-titlebar {
        gap: 10px;
    }
    .preset-store-title {
        font-size: 15px;
        line-height: 19px;
    }
    .preset-store-subtitle {
        font-size: 11px;
        line-height: 15px;
    }
    .preset-store-close {
        width: 28px;
        height: 28px;
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 16px;
        line-height: 24px;
    }
    .preset-store-controls {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 10px;
    }
    .preset-store-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .preset-store-filter-row::-webkit-scrollbar {
        display: none;
    }
    .preset-store-filter {
        flex: 0 0 auto;
        min-height: 26px;
        padding: 3px 8px;
        font-size: 11px;
    }
    .preset-store-editor {
        margin-top: 10px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        max-height: clamp(148px, 28dvh, 206px);
        min-height: 0;
        overflow: hidden;
    }
    .preset-store-editor-head {
        margin-bottom: 6px;
    }
    .preset-store-nav-draft {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, minmax(28px, 1fr));
        grid-auto-columns: minmax(132px, 44%);
        gap: 4px;
        align-items: stretch;
        align-content: start;
        min-height: 64px;
        max-height: 72px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 3px 3px 5px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .preset-store-nav-draft::-webkit-scrollbar {
        display: none;
    }
    .preset-store-draft-chip {
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 28px !important;
        box-sizing: border-box;
        scroll-snap-align: start;
    }
    .preset-store-candidate,
    .preset_store button.preset-store-candidate {
        max-width: min(176px, calc(100vw - 64px));
        font-size: 12px;
    }
    .preset-store-editor-actions {
        display: grid;
        grid-template-columns: minmax(76px, 0.75fr) minmax(0, 1fr);
        justify-content: stretch;
        gap: 6px;
        margin-top: 8px;
    }
    .preset-store-editor-actions .preset-store-filter {
        flex: 1 1 auto;
        min-width: 0;
    }
    #preset_store_apply_draft_close {
        grid-column: 1 / -1;
    }
    .preset-store-pool-head {
        margin: 10px 0 6px;
    }
}

.infobox {
    height: auto;
    width: 100% !important;
    text-align: left;
    opacity: 1;
    border-radius: 8px;
    padding: 0;
    line-height: 120%;
    border: none;
    color: var(--body-text-color);
}

#scrollable-box-hidden {
  overflow-x: hidden;
  box-sizing: border-box;
  border: 1px solid var(--border-color-primary, #374151);
  border-radius: 6px;
  padding: 0 12px 12px;
}

#scrollable-box-hidden > *,
#scrollable-box-hidden .tabs,
#scrollable-box-hidden .tabitem,
#scrollable-box-hidden .form,
#scrollable-box-hidden .block {
  max-width: 100%;
  box-sizing: border-box;
}

#describe_output_options_row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#describe_output_options_row > * {
  min-width: 0 !important;
}

.describe-vlm-chat-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1004 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.34);
  box-sizing: border-box;
  pointer-events: auto;
  overscroll-behavior: contain;
}

.describe-vlm-chat-modal.modal {
  background-color: rgba(5, 7, 12, 0.58) !important;
}

.describe-vlm-chat-modal[hidden] {
  display: none !important;
}

.describe-vlm-chat-panel {
  position: fixed !important;
  container-type: inline-size;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(180px, 1fr) auto auto;
  width: min(620px, calc(100vw - 28px)) !important;
  height: min(680px, calc(100dvh - 32px)) !important;
  min-height: 420px;
  max-height: calc(100dvh - 32px) !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--border-color-primary, #4b5563) 78%, #ffffff 22%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--block-background-fill, #24262b) 96%, #000000 4%);
  color: var(--body-text-color, #f8fafc);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.42);
  overflow: hidden !important;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

.describe-vlm-chat-panel.simpleai-resizable-popup {
  --simpleai-resize-handle-offset-x: 4px;
  --simpleai-resize-handle-offset-y: 4px;
  --simpleai-resize-handle-hitbox: 18px;
  --simpleai-resize-handle-icon-size: 12px;
}

.describe-vlm-chat-resize-handle {
  color: inherit;
}

.describe-vlm-chat-resize-handle.is-resizing {
  opacity: 1 !important;
}

html.describe-vlm-chat-resizing,
html.describe-vlm-chat-resizing * {
  cursor: nwse-resize !important;
  user-select: none !important;
}

.describe-vlm-chat-modal.is-drag-over .describe-vlm-chat-panel {
  border-color: color-mix(in srgb, var(--button-primary-background-fill, #f97316) 62%, #ffffff 38%);
}

.describe-vlm-chat-head {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.22);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.describe-vlm-chat-head.is-dragging,
.describe-vlm-chat-head:active {
  cursor: grabbing;
}

.describe-vlm-chat-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.describe-vlm-chat-title-text,
.describe-vlm-chat-model-pill b,
.describe-vlm-chat-model-pill select {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.describe-vlm-chat-model-pill {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 7px;
  border: 1px solid rgba(127, 127, 127, 0.22);
  background: rgba(127, 127, 127, 0.11);
  color: color-mix(in srgb, var(--body-text-color, #f8fafc) 82%, transparent);
  font-size: 12px;
  line-height: 1;
}

.describe-vlm-chat-model-pill > span {
  flex: 0 0 auto;
  opacity: 0.72;
}

.describe-vlm-chat-model-pill b {
  font-weight: 700;
}

.describe-vlm-chat-model-pill select {
  flex: 0 1 auto;
  width: min(300px, 36vw);
  max-width: 100%;
  min-width: 150px;
  height: 24px;
  padding: 0 20px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  color-scheme: dark;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  outline: none;
}

.describe-vlm-chat-model-pill select:focus {
  box-shadow: none;
}

.describe-vlm-chat-model-pill select:focus-visible {
  border-radius: 4px;
  outline: 1px solid color-mix(in srgb, var(--body-text-color, #f8fafc) 46%, transparent);
  outline-offset: 2px;
}

.describe-vlm-chat-model-pill select option {
  background: #1f2024;
  color: #f3f4f8;
}

.describe-vlm-chat-model-pill select option:checked {
  background: #2563eb;
  color: #ffffff;
}

.describe-vlm-chat-head-actions {
  display: inline-flex;
  justify-self: end;
  gap: 6px;
}

.describe-vlm-chat-head button,
.describe-vlm-chat-compose button,
.describe-vlm-chat-actions button {
  border-radius: 6px;
}

.describe-vlm-chat-head button,
.describe-vlm-chat-compose button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@container (max-width: 780px) {
  .describe-vlm-chat-head {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
  }

  .describe-vlm-chat-title {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
  }

  .describe-vlm-chat-head-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .describe-vlm-chat-model-pill {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }

  .describe-vlm-chat-model-pill select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}

.describe-vlm-chat-controls {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.22);
}

.describe-vlm-chat-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
}

.describe-vlm-chat-controls label > span {
  color: color-mix(in srgb, var(--body-text-color, #f8fafc) 78%, transparent);
  font-weight: 700;
}

.describe-vlm-chat-system-field {
  grid-column: 1 / -1;
}

.describe-vlm-chat-mode-hint {
  grid-column: 1 / -1;
  margin-top: -2px;
  color: color-mix(in srgb, var(--body-text-color, #f8fafc) 62%, transparent);
  font-size: 12px;
  line-height: 1.35;
}

.describe-vlm-chat-mode-hint[hidden] {
  display: none !important;
}

.describe-vlm-chat-controls select,
.describe-vlm-chat-controls textarea {
  width: 100%;
  min-width: 0;
  border-radius: 6px;
  background: var(--input-background-fill, transparent);
  color: var(--body-text-color, #f8fafc);
  border: 1px solid var(--border-color-primary, #4b5563);
  box-sizing: border-box;
}

.describe-vlm-chat-controls select {
  height: 44px;
  min-height: 44px;
  padding: 0 10px;
}

.describe-vlm-chat-controls textarea {
  height: 44px;
  min-height: 44px;
  max-height: 92px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.35;
  overscroll-behavior: contain;
}

.describe-vlm-chat-log {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.describe-vlm-chat-empty,
.describe-vlm-chat-status {
  color: color-mix(in srgb, var(--body-text-color, #f8fafc) 70%, transparent);
  font-size: 13px;
}

.describe-vlm-chat-empty {
  align-self: center;
  justify-self: center;
}

.describe-vlm-chat-msg {
  width: fit-content;
  max-width: min(96%, calc(100% - 12px));
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid rgba(127, 127, 127, 0.16);
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.describe-vlm-chat-msg.is-user {
  justify-self: end;
  background: color-mix(in srgb, #2563eb 22%, var(--block-background-fill, #24262b) 78%);
}

.describe-vlm-chat-msg.is-assistant {
  justify-self: start;
}

.describe-vlm-chat-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.describe-vlm-chat-msg-head span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.describe-vlm-chat-msg-head button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 6px;
  font-size: 11px;
}

.describe-vlm-chat-msg-head button.is-danger:hover {
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
  background: rgba(127, 29, 29, 0.34) !important;
}

.describe-vlm-chat-msg p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.describe-vlm-chat-msg b {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  opacity: 0.82;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.describe-vlm-chat-msg.is-pending p {
  opacity: 0.72;
}

.describe-vlm-chat-actions {
  display: grid;
  gap: 8px;
}

.describe-vlm-chat-actions .describe-vlm-chat-action-card {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.describe-vlm-chat-prompt-preview-label {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.82;
}

.describe-vlm-chat-prompt-preview {
  max-height: 168px;
  margin: 0;
  padding: 9px 10px;
  overflow: auto;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 6px;
  border: 1px solid rgba(127, 127, 127, 0.22);
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font: inherit;
  line-height: 1.45;
}

.describe-vlm-chat-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.describe-vlm-chat-actions button {
  min-height: 30px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.describe-vlm-chat-status {
  min-height: 20px;
  padding: 0 10px 8px;
}

.describe-vlm-chat-status.is-error {
  color: #f87171;
}

.describe-vlm-chat-status.is-actionable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
}

.describe-vlm-chat-status.is-actionable span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.describe-vlm-chat-status [data-describe-vlm-chat-download-models] {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
}

.describe-vlm-chat-compose {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) 42px;
  grid-template-rows: auto 42px 42px 42px;
  align-items: stretch;
  gap: 8px 10px;
  padding: 10px;
  border-top: 1px solid rgba(127, 127, 127, 0.22);
  border-bottom: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.describe-vlm-chat-compose-tools {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: max-content;
  align-self: end;
}

.describe-vlm-chat-compose-tools button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 8px !important;
}

.describe-vlm-chat-image-toggle {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: max-content;
  height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  align-self: center;
  box-sizing: border-box;
}

.describe-vlm-chat-unload-toggle {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: max-content;
  height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  align-self: center;
  box-sizing: border-box;
}

.describe-vlm-chat-attachments {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  align-self: end;
}

.describe-vlm-chat-attachments[hidden] {
  display: none !important;
}

.describe-vlm-chat-image-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.describe-vlm-chat-image-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 26px;
  padding: 3px 6px;
  border: 1px solid rgba(127, 127, 127, 0.2);
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.12);
  font-size: 12px;
  line-height: 1.2;
}

.describe-vlm-chat-image-chip img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.describe-vlm-chat-image-chip span {
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.describe-vlm-chat-image-chip button {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  font-size: 11px !important;
}

.describe-vlm-chat-compose textarea {
  grid-column: 2 / 3;
  grid-row: 2 / 5;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 86px;
  height: 100%;
  max-height: 130px;
  resize: none !important;
  align-self: stretch;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--input-background-fill, transparent);
  color: var(--body-text-color, #f8fafc);
  border: 1px solid var(--border-color-primary, #4b5563);
  overflow: auto;
  overscroll-behavior: contain;
}

.describe-vlm-chat-compose textarea[data-describe-vlm-chat-input][rows] {
  resize: none !important;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-send] {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
  align-self: end;
  width: 38px;
  height: 42px;
  min-width: 38px;
  min-height: 42px;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-stop] {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  align-self: center;
  width: 38px;
  height: 42px;
  min-width: 38px;
  min-height: 42px;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-stop][hidden] {
  display: none !important;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-pick-image] {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  align-self: start;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) {
  grid-template-rows: 42px 42px 42px;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) .describe-vlm-chat-compose-tools {
  grid-row: 1 / 2;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) .describe-vlm-chat-image-toggle {
  grid-row: 2 / 3;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) .describe-vlm-chat-unload-toggle {
  grid-row: 3 / 4;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) textarea {
  grid-row: 1 / 4;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) [data-describe-vlm-chat-pick-image] {
  grid-row: 1 / 2;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) [data-describe-vlm-chat-stop] {
  grid-row: 2 / 3;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) [data-describe-vlm-chat-send] {
  grid-row: 3 / 4;
}

@media (max-width: 640px) {
  .describe-vlm-chat-modal {
    padding: 8px;
  }

  .describe-vlm-chat-panel {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    min-height: 0;
    max-height: calc(100dvh - 16px) !important;
  }

  .describe-vlm-chat-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: auto auto auto auto auto;
  }

  .describe-vlm-chat-controls {
    grid-template-columns: 1fr;
  }

  .describe-vlm-chat-head {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
  }

  .describe-vlm-chat-title {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
  }

  .describe-vlm-chat-head-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .describe-vlm-chat-model-pill {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }

  .describe-vlm-chat-model-pill select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .describe-vlm-chat-compose-tools {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    justify-self: start;
  }

  .describe-vlm-chat-image-toggle {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    justify-self: start;
  }

  .describe-vlm-chat-unload-toggle {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    justify-self: start;
  }

  .describe-vlm-chat-compose [data-describe-vlm-chat-pick-image] {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .describe-vlm-chat-compose [data-describe-vlm-chat-stop] {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }

  .describe-vlm-chat-attachments {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
  }

  .describe-vlm-chat-compose textarea {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }

  .describe-vlm-chat-compose [data-describe-vlm-chat-send] {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
  }

  .describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) {
    grid-template-rows: auto auto auto auto;
  }

  .describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) .describe-vlm-chat-compose-tools {
    grid-row: 1 / 2;
  }

  .describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) .describe-vlm-chat-image-toggle {
    grid-row: 2 / 3;
  }

  .describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) .describe-vlm-chat-unload-toggle {
    grid-row: 3 / 4;
  }

  .describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) textarea {
    grid-row: 4 / 5;
  }

  .describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) [data-describe-vlm-chat-pick-image] {
    grid-row: 2 / 3;
  }

  .describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) [data-describe-vlm-chat-stop] {
    grid-row: 3 / 4;
  }

  .describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) [data-describe-vlm-chat-send] {
    grid-row: 4 / 5;
  }
}

.describe-vlm-chat-modal {
  background: rgba(5, 7, 12, 0.58);
}

.describe-vlm-chat-panel {
  --describe-chat-panel: #242529;
  --describe-chat-panel-soft: #2b2c31;
  --describe-chat-panel-deep: #1f2024;
  --describe-chat-line: #494c56;
  --describe-chat-line-soft: #393b43;
  --describe-chat-text: #f3f4f8;
  --describe-chat-muted: #a4a8b4;
  --describe-chat-user: #253961;
  --describe-chat-user-line: #365487;
  --describe-chat-assistant: #303137;
  --describe-chat-button: #3b3d46;
  --describe-chat-button-hover: #4c4f5a;
  --describe-chat-accent: #f97316;
  background: var(--describe-chat-panel) !important;
  color: var(--describe-chat-text) !important;
  border-color: #626774 !important;
}

.describe-vlm-chat-head {
  min-height: 58px;
  padding: 12px 16px;
  background: var(--describe-chat-panel);
}

.describe-vlm-chat-title {
  font-size: 18px;
  line-height: 1.2;
  color: var(--describe-chat-text);
}

.describe-vlm-chat-model-pill {
  border-color: var(--describe-chat-line-soft);
  background: var(--describe-chat-panel-deep);
  color: var(--describe-chat-text);
}

.describe-vlm-chat-model-pill select {
  color: var(--describe-chat-text);
}

.describe-vlm-chat-model-pill > span {
  color: var(--describe-chat-muted);
}

.describe-vlm-chat-head button,
.describe-vlm-chat-compose button,
.describe-vlm-chat-msg-head button,
.describe-vlm-chat-actions button {
  color: var(--describe-chat-text) !important;
  background: var(--describe-chat-button) !important;
  border: 1px solid #5d616d !important;
  box-shadow: none !important;
}

.describe-vlm-chat-head button:hover,
.describe-vlm-chat-compose button:hover,
.describe-vlm-chat-msg-head button:hover,
.describe-vlm-chat-actions button:hover {
  background: var(--describe-chat-button-hover) !important;
}

.describe-vlm-chat-controls {
  padding: 10px 14px;
  background: var(--describe-chat-panel-soft);
  border-bottom-color: var(--describe-chat-line-soft);
}

.describe-vlm-chat-controls label > span {
  color: var(--describe-chat-muted);
}

.describe-vlm-chat-mode-hint {
  color: var(--describe-chat-muted);
}

.describe-vlm-chat-controls select,
.describe-vlm-chat-controls textarea {
  background: var(--describe-chat-panel-deep) !important;
  color: var(--describe-chat-text) !important;
  border-color: #686b75 !important;
  outline: none !important;
}

.describe-vlm-chat-controls select:focus,
.describe-vlm-chat-controls textarea:focus {
  border-color: #d7dbe5 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
}

.describe-vlm-chat-log {
  display: flex;
  flex-direction: column;
  align-content: normal;
  gap: 12px;
  padding: 18px 20px;
  background: var(--describe-chat-panel);
}

.describe-vlm-chat-empty {
  margin: auto;
  color: var(--describe-chat-muted);
  font-size: 14px;
}

.describe-vlm-chat-msg {
  width: fit-content;
  max-width: min(96%, calc(100% - 12px));
  gap: 7px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--describe-chat-text);
}

.describe-vlm-chat-msg.is-user {
  align-self: flex-end;
  justify-self: auto;
  background: var(--describe-chat-user);
  border-color: var(--describe-chat-user-line);
}

.describe-vlm-chat-msg.is-assistant {
  align-self: flex-start;
  justify-self: auto;
  background: var(--describe-chat-assistant);
  border-color: #484b54;
}

.describe-vlm-chat-msg p {
  font-size: 14px;
  line-height: 1.55;
}

.describe-vlm-chat-msg b {
  color: color-mix(in srgb, var(--describe-chat-text) 86%, transparent);
  font-size: 12px;
}

.describe-vlm-chat-actions button {
  min-height: 28px;
  padding: 4px 8px;
}

.describe-vlm-chat-actions .describe-vlm-chat-action-card {
  width: 100%;
}

.describe-vlm-chat-prompt-preview-label {
  color: var(--describe-chat-muted);
}

.describe-vlm-chat-prompt-preview {
  max-height: 180px;
  border-color: var(--describe-chat-line-soft);
  background: var(--describe-chat-panel-deep);
  color: var(--describe-chat-text);
}

.describe-vlm-chat-status {
  min-height: 24px;
  padding: 0 16px 8px;
  background: var(--describe-chat-panel);
  color: var(--describe-chat-muted);
}

.describe-vlm-chat-compose {
  grid-template-columns: max-content minmax(0, 1fr) 42px;
  grid-template-rows: auto 42px 42px 42px;
  align-items: stretch;
  gap: 8px 10px;
  padding: 12px 14px;
  background: var(--describe-chat-panel-soft);
  border-top-color: var(--describe-chat-line-soft);
}

.describe-vlm-chat-panel.simpleai-resizable-popup .describe-vlm-chat-compose {
  padding-right: 30px;
  padding-bottom: 30px;
}

.describe-vlm-chat-compose-tools button {
  border: 1px solid var(--describe-chat-line-soft) !important;
  background: var(--describe-chat-panel-deep) !important;
  color: var(--describe-chat-text) !important;
}

.describe-vlm-chat-compose-tools button:hover {
  border-color: color-mix(in srgb, var(--describe-chat-accent) 54%, #ffffff 46%) !important;
  background: color-mix(in srgb, var(--describe-chat-accent) 18%, var(--describe-chat-panel-deep)) !important;
}

.describe-vlm-chat-compose:has(.describe-vlm-chat-attachments[hidden]) {
  grid-template-rows: 42px 42px 42px;
  row-gap: 6px;
}

.describe-vlm-chat-image-toggle,
.describe-vlm-chat-unload-toggle {
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--describe-chat-line-soft);
  border-radius: 8px;
  background: var(--describe-chat-panel-deep);
  color: var(--describe-chat-text);
}

.describe-vlm-chat-image-toggle input,
.describe-vlm-chat-unload-toggle input {
  accent-color: var(--describe-chat-accent);
}

.describe-vlm-chat-compose [data-describe-vlm-chat-pick-image],
.describe-vlm-chat-compose [data-describe-vlm-chat-stop],
.describe-vlm-chat-compose [data-describe-vlm-chat-send] {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-stop] {
  color: #fff1f2 !important;
  background: #be123c !important;
  border-color: color-mix(in srgb, #be123c 70%, #ffffff 30%) !important;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-stop]:hover {
  background: #e11d48 !important;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-stop][hidden] {
  display: none !important;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-send] {
  color: #fff7ed !important;
  background: var(--describe-chat-accent) !important;
  border-color: color-mix(in srgb, var(--describe-chat-accent) 72%, #ffffff 28%) !important;
}

.describe-vlm-chat-compose [data-describe-vlm-chat-send]:hover {
  background: #fb8c2a !important;
}

.describe-vlm-chat-compose textarea {
  min-height: 86px;
  height: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--describe-chat-panel-deep) !important;
  color: var(--describe-chat-text) !important;
  border-color: #686b75 !important;
  outline: none !important;
}

.describe-vlm-chat-compose textarea:focus {
  border-color: #d7dbe5 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
}

.describe-vlm-chat-image-chip {
  background: #34363d;
  border-color: #535762;
  color: var(--describe-chat-text);
}

.describe-vlm-chat-image-chip button {
  color: var(--describe-chat-text) !important;
  background: #464954 !important;
  border-color: #5b5f6b !important;
}

@media (max-width: 640px) {
  .describe-vlm-chat-compose {
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: auto auto auto auto auto;
  }
}

#describe_vlm_model_bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  box-sizing: border-box !important;
  background: color-mix(in srgb, var(--block-background-fill, #24262b) 88%, var(--body-text-color, #ffffff) 12%) !important;
  border: 0 !important;
  border-radius: 0 0 6px 6px !important;
  overflow: hidden !important;
}

#describe_vlm_model_dropdown {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#describe_vlm_model_dropdown::before {
  content: var(--simpai-vlm-model-label, "🤖 VLM Model:");
  flex: 0 0 auto;
  color: var(--body-text-color, #f8fafc);
  font-weight: 700;
  white-space: nowrap;
}

#describe_vlm_model_dropdown,
#describe_vlm_model_dropdown > div,
#describe_vlm_model_dropdown .wrap,
#describe_vlm_model_dropdown .wrap-inner,
#describe_vlm_model_dropdown .secondary-wrap {
  min-height: 22px !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#describe_vlm_model_dropdown > div,
#describe_vlm_model_dropdown .wrap,
#describe_vlm_model_dropdown .secondary-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#describe_vlm_model_dropdown input,
#describe_vlm_model_dropdown select,
#describe_vlm_model_dropdown button,
#describe_vlm_model_dropdown span,
#describe_vlm_model_dropdown .single-select {
  color: #2196f3 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#describe_vlm_model_dropdown button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#describe_vlm_model_dropdown input {
  padding: 0 18px 0 0 !important;
  line-height: 22px !important;
}

#describe_vlm_model_status .describe-vlm-model-state {
  display: none !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 18px !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
}

#describe_vlm_model_status .describe-vlm-model-state.ready {
  color: #52d273 !important;
  border-color: rgba(82, 210, 115, 0.28) !important;
  background: rgba(82, 210, 115, 0.1) !important;
}

#describe_vlm_model_status .describe-vlm-model-state.missing {
  color: #f5b041 !important;
  border-color: rgba(245, 176, 65, 0.32) !important;
  background: rgba(245, 176, 65, 0.12) !important;
}

#describe_vlm_custom_help {
  margin: 0 0 10px !important;
}

#describe_vlm_custom_help .describe-vlm-custom-help-row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--body-text-color);
  font-size: 13px;
  line-height: 20px;
}

#describe_vlm_custom_help .describe-vlm-custom-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(120, 144, 156, 0.55);
  border-radius: 50%;
  color: #2196f3;
  background: rgba(33, 150, 243, 0.08);
  font-size: 12px;
  font-weight: 700;
  cursor: help;
  user-select: none;
}

#describe_vlm_custom_help .describe-vlm-custom-help-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  display: none;
  width: min(340px, calc(100vw - 40px));
  padding: 9px 11px;
  border: 1px solid rgba(120, 144, 156, 0.28);
  border-radius: 8px;
  background: var(--block-background-fill);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  color: var(--body-text-color);
  font-size: 12px;
  line-height: 1.4;
}

#describe_vlm_custom_help .describe-vlm-custom-help-tip p {
  margin: 4px 0 0;
}

#describe_vlm_custom_help .describe-vlm-custom-help-tip code {
  font-size: 12px;
  white-space: nowrap;
}

#describe_vlm_custom_help .describe-vlm-custom-help:hover + .describe-vlm-custom-help-tip,
#describe_vlm_custom_help .describe-vlm-custom-help:focus + .describe-vlm-custom-help-tip,
#describe_vlm_custom_help .describe-vlm-custom-help-tip:hover {
  display: block;
}

#describe_vlm_custom_panel .form,
#describe_vlm_custom_panel .block {
  min-width: 0 !important;
}

#describe_vlm_custom_panel label span {
  font-size: 13px !important;
}

#describe_vlm_custom_action_row {
  display: grid !important;
  grid-template-columns: minmax(140px, 1fr) minmax(132px, 1fr) minmax(132px, 1fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

#describe_vlm_custom_action_row > * {
  min-width: 0 !important;
  width: 100% !important;
}

#describe_vlm_custom_supports_images {
  min-height: 40px !important;
}

#describe_vlm_custom_supports_images label {
  min-height: 40px !important;
  align-items: center !important;
  gap: 8px !important;
}

#describe_vlm_custom_supports_images label span {
  white-space: nowrap !important;
}

#describe_vlm_custom_fetch_models,
#describe_vlm_custom_test {
  width: 100% !important;
  min-height: 40px !important;
}

#describe_vlm_custom_fetch_models button,
#describe_vlm_custom_test button,
#describe_vlm_custom_action_row button {
  width: 100% !important;
  min-height: 40px !important;
  justify-content: center !important;
}

@media (max-width: 720px) {
  #describe_vlm_custom_action_row {
    grid-template-columns: 1fr !important;
  }
}

.infobox_group {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto 4px !important;
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    z-index: 20;
    pointer-events: auto;
}

.simpleai-prompt-info-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.42);
    z-index: 2600;
    box-sizing: border-box;
}

.simpleai-prompt-info-card {
    width: min(760px, calc(100vw - 48px));
    max-height: min(72vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--body-text-color);
    background: #202126;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
}

.simpleai-prompt-info-header {
    flex: 0 0 auto;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    background: #2a2b31;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-sizing: border-box;
}

.simpleai-prompt-info-title {
    font-size: 14px;
    font-weight: 700;
}

.simpleai-prompt-info-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--body-text-color);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.simpleai-prompt-info-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--error-color, #ff4d4f);
}

.simpleai-prompt-info-body {
    overflow: auto;
    padding: 12px;
    line-height: 1.45;
}

.simpleai-prompt-info-body > div {
    background: transparent !important;
    color: var(--body-text-color) !important;
    padding: 0 !important;
}

.simpleai-toolbox-note-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.42);
    z-index: 2600;
    box-sizing: border-box;
}

.simpleai-toolbox-note-card {
    width: min(440px, calc(100vw - 48px));
    overflow: hidden;
    color: var(--body-text-color);
    background: #202126;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
}

.simpleai-toolbox-note-header {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    background: #2a2b31;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.simpleai-toolbox-note-title {
    font-size: 14px;
    font-weight: 700;
}

.simpleai-toolbox-note-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--body-text-color);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.simpleai-toolbox-note-body {
    padding: 14px 16px;
    line-height: 1.45;
}

.simpleai-toolbox-note-body p {
    margin: 0;
}

.simpleai-toolbox-note-input {
    width: calc(100% - 32px);
    height: 36px;
    margin: 0 16px 4px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: #1f2026;
    color: var(--body-text-color);
}

.simpleai-toolbox-note-input:focus {
    border-color: #2f6fed;
    outline: 1px solid #2f6fed;
}

.simpleai-toolbox-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
}

.simpleai-toolbox-note-actions button {
    min-width: 88px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--body-text-color);
    background: #2b2c32;
    cursor: pointer;
}

.simpleai-toolbox-note-confirm {
    background: #2f6fed !important;
    color: #fff !important;
}

.simpleai-toolbox-note-confirm.danger {
    background: #b42318 !important;
}

.infobox_mobi {
    height: auto;
    position: absolute;
    top: -16rem;
    left: 50%;
    transform: translateX(-50%);
    width: 22rem !important;
    z-index: 20;
    text-align: left;
    opacity: 0.85;
    border-radius: 8px;
    padding: 6px;
    line-height: 120%;
    border: groove;
}

.toolbox_note {
    display: none !important;
    height: auto;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px !important;
    z-index: 1001;
    text-align: left;
    opacity: 1;
    background: var(--block-background-fill);
    border: 1px solid var(--border-color-primary);
    border-radius: var(--radius-md);
    padding: 10px;
}

.identity_note {
    height: auto;
    position: fixed !important;
    top: 90px;
    left: 27%;
    right: auto !important;
    bottom: auto !important;
    /* transform: translateX(-50%); */
    width: 400px !important;
    z-index: 1001;
    text-align: left;
    opacity: 1;
    border-radius: 8px;
    padding: 0px;
    border: groove;
    pointer-events: auto;
}

.note_info {
    padding: 8px;
}

.input_note_info {
    top: 6px;
}

.input_id_info {
    padding: 6px 10px 0px 4px !important;
    min-width: 50% !important;
    height: 24px !important;
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
}

.note_text {
    padding: 2px;
    text-align: center;
}
.preset_input textarea {
    width: 120px;
}

.tag_array {
    height: auto;
    position: absolute;
    top: 180px;
    left: 15%;
    width: 580px !important;
    z-index: 22;
}

.taglib_button {
    height: 35px;
    transform: translate(5%, 35%);
}

.min_pad0 {
    padding: 0px !important;
}

.min_pad {
    padding: 2px !important;
}

.scene_input {
    padding: 8px 8px !important;
    width: 50px !important;
}

.scene_input input {
    width: 180px !important;  
}

.scene_input_2 {
    padding: 8px 8px !important;
}

.identity_input {
    padding: 0px 0px !important;
    height: 42px;
    min-width: min(160px, 100%) !important;
}

.identity_input2 {
    padding: 0px 0px !important;
    height: 42px;
    min-width: min(40px, 100%) !important;
}

.identity_input3:not(#areacode) {
    padding: 0px 0px !important;
    height: 42px;
    min-width: min(20px, 100%) !important;
}

.identity_qr {
    align-content: flex-start;
}

.identity_input textarea,
.identity_input input {
    border-radius: 0 !important;
}

.identity_input3:not(#areacode) input {
    border-radius: 0 !important;
    width: 35px !important;
}

.identity_button {
    height: 28pt;
    padding: unset !important;
    margin: auto !important;
    font-weight: bold !important;
}

.identity_export {
    height: 20pt;
    padding: unset !important;
    margin: auto !important;
    font-weight: bold !important;
    margin-top: 6px !important;
}

.uov_image_size {
    height: auto;
}

.uov_image_size textarea {
    height: 38px !important;
}

.simpleai-status-textbox textarea,
.simpleai-status-textbox input {
    resize: none !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
}

.simpleai-status-textbox textarea::-webkit-scrollbar,
.simpleai-status-textbox input::-webkit-scrollbar {
    display: none !important;
}

.iclight_source {
    max-width: 390px;
}

#scrollable-box {
  max-height: 100vh;  /* 设定最大高度 */
  overflow-y: auto !important;   /* 启用垂直滚动条 */
  position: sticky;   /* 设为sticky */
  top: 0;             /* 设置sticky的顶部位置 */
  z-index: 1;
  
  scrollbar-width: thin !important;      /* Firefox */
  -ms-overflow-style: -ms-autohiding-scrollbar !important;   /* IE 和 Edge */
}

#main_layout_row {
    align-items: flex-start !important;
    background: var(--background-fill-primary) !important;
    width: 100% !important;
    min-width: 0 !important;
}

#main_layout_row > .preview_column {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#main_layout_row > #scene_panel,
#main_layout_row > .scene_panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
}

#pose_studio {
    width: 100% !important;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) summary::marker,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) summary::-webkit-details-marker {
    display: none !important;
    content: "" !important;
    font-size: 0 !important;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) summary,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    list-style: none !important;
    position: relative !important;
    padding-right: 30px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap > svg,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap > svg,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap > .icon {
    display: none !important;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap > .icon,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap .icon,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap .icon {
    display: none !important;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap > input,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap > input,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap > select {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap > select {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap::after {
    content: "◀";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--body-text-color-subdued);
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap::after {
    content: "◀";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--body-text-color-subdued);
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap.open::after,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > button.label-wrap[aria-expanded="true"]::after {
    content: "▼";
}

:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap[open]::after,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap.open::after,
:where(
    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #sam3_video_mask_accordion,
    #pose_studio,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #scene_advanced_parameters_accordion
) > .label-wrap[aria-expanded="true"]::after {
    content: "▼";
}

@media (min-width: 768px) {
    #main_layout_row:has(> #scene_panel:not([style*="display: none"]):not(.hidden):not(.simpai-force-hidden):not(.hide):not([hidden])),
    html.simpai-scene-frontend #main_layout_row:has(> #scene_panel:not([style*="display: none"]):not(.hidden):not(.simpai-force-hidden):not([hidden])) {
        display: grid !important;
        grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.95fr);
        gap: 16px !important;
        align-items: start !important;
    }

    #main_layout_row:has(> #scene_panel:not([style*="display: none"]):not(.hidden):not(.simpai-force-hidden):not(.hide):not([hidden])) > .preview_column,
    #main_layout_row:has(> #scene_panel:not([style*="display: none"]):not(.hidden):not(.simpai-force-hidden):not(.hide):not([hidden])) > #scene_panel,
    #main_layout_row:has(> #scene_panel:not([style*="display: none"]):not(.hidden):not(.simpai-force-hidden):not(.hide):not([hidden])) > .scene_panel,
    html.simpai-scene-frontend #main_layout_row:has(> #scene_panel:not([style*="display: none"]):not(.hidden):not(.simpai-force-hidden):not([hidden])) > .preview_column,
    html.simpai-scene-frontend #main_layout_row:has(> #scene_panel:not([style*="display: none"]):not(.hidden):not(.simpai-force-hidden):not([hidden])) > #scene_panel,
    html.simpai-scene-frontend #main_layout_row:has(> #scene_panel:not([style*="display: none"]):not(.hidden):not(.simpai-force-hidden):not([hidden])) > .scene_panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-top: 0 !important;
        min-height: 0 !important;
    }

    #scene_panel {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: var(--scene-panel-max-height, min(768px, calc(100vh - 260px))) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable !important;
        position: relative !important;
        z-index: 2;
        align-self: start !important;
        background: var(--block-background-fill) !important;
        border: 1px solid var(--border-color-primary) !important;
        border-radius: var(--radius-md) !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    #camera_control_accordion,
    #anglelight_control_accordion,
    #style_transfer_accordion,
    #pose_studio,
    #scene_canvas,
    #scene_video,
    #scene_audio {
        width: 100% !important;
    }

    #scene_advanced_parameters_accordion {
        width: 100% !important;
        margin-top: 0px !important;
        background: var(--block-background-fill) !important;
        border: 0px solid var(--border-color-primary) !important;
        border-radius: var(--radius-md) !important;
        padding: 10px 12px 12px !important;
        box-sizing: border-box !important;
    }

    #scene_input_images {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    #scene_input_images > div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    #sam3_params_row_1,
    #sam3_params_row_2,
    #sam3_params_row_3,
    #scene_advanced_row_1,
    #scene_advanced_row_2,
    #scene_advanced_row_3,
    #scene_duration_row,
    #scene_image_number_row {
        gap: 8px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        align-self: stretch !important;
        overflow-x: hidden !important;
    }

    #sam3_params_row_1,
    #sam3_params_row_2,
    #sam3_params_row_3,
    #scene_advanced_row_1,
    #scene_advanced_row_2,
    #scene_advanced_row_3,
    #scene_var_number7_8_row,
    #scene_var_number9_10_row,
    #scene_switch_option1_2_row,
    #scene_switch_option3_4_row,

    #scene_duration_row,
    #scene_image_number_row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #scene_duration_row > div,
    #scene_image_number_row > div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    #scene_input_images .wrap,
    #scene_input_images .block,
    #scene_input_images .form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    #sam3_params_row_1 .wrap,
    #sam3_params_row_2 .wrap,
    #sam3_params_row_3 .wrap,
    #scene_advanced_row_1 .wrap,
    #scene_advanced_row_2 .wrap,
    #scene_advanced_row_3 .wrap,
    #scene_var_number7_8_row .wrap,
    #scene_var_number9_10_row .wrap,
    #scene_switch_option1_2_row .wrap,
    #scene_switch_option3_4_row .wrap,
    #scene_duration_row .wrap,
    #scene_image_number_row .wrap,
    #sam3_params_row_1 .block,
    #sam3_params_row_2 .block,
    #sam3_params_row_3 .block,
    #scene_advanced_row_1 .block,
    #scene_advanced_row_2 .block,
    #scene_advanced_row_3 .block,
    #scene_var_number7_8_row .block,
    #scene_var_number9_10_row .block,
    #scene_switch_option1_2_row .block,
    #scene_switch_option3_4_row .block,
    #scene_duration_row .block,
    #scene_image_number_row .block,
    #sam3_params_row_1 .form,
    #sam3_params_row_2 .form,
    #sam3_params_row_3 .form,
    #scene_advanced_row_1 .form,
    #scene_advanced_row_2 .form,
    #scene_advanced_row_3 .form,
    #scene_var_number7_8_row .form,
    #scene_var_number9_10_row .form,
    #scene_switch_option1_2_row .form,
    #scene_switch_option3_4_row .form,
    #scene_duration_row .form,
    #scene_image_number_row .form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    #sam3_params_row_1 > .form,
    #sam3_params_row_2 > .form,
    #sam3_params_row_3 > .form,
    #scene_advanced_row_1 > .form,
    #scene_advanced_row_2 > .form,
    #scene_advanced_row_3 > .form,
    #scene_var_number7_8_row > .form,
    #scene_var_number9_10_row > .form,
    #scene_switch_option1_2_row > .form,
    #scene_switch_option3_4_row > .form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: start !important;
    }

    #sam3_params_row_1 > .form > .block,
    #sam3_params_row_2 > .form > .block,
    #sam3_params_row_3 > .form > .block,
    #scene_advanced_row_1 > .form > .block,
    #scene_advanced_row_2 > .form > .block,
    #scene_advanced_row_3 > .form > .block,
    #scene_var_number7_8_row > .form > .block,
    #scene_var_number9_10_row > .form > .block,
    #scene_switch_option1_2_row > .form > .block,
    #scene_switch_option3_4_row > .form > .block {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #scene_advanced_row_1 > .form:has(> .block[style*="display: none"]),
    #scene_advanced_row_2 > .form:has(> .block[style*="display: none"]),
    #scene_advanced_row_3 > .form:has(> .block[style*="display: none"]),
    #scene_var_number7_8_row > .form:has(> .block[style*="display: none"]),
    #scene_var_number9_10_row > .form:has(> .block[style*="display: none"]),
    #scene_switch_option1_2_row > .form:has(> .block[style*="display: none"]),
    #scene_switch_option3_4_row > .form:has(> .block[style*="display: none"]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #scene_advanced_row_1 > .form > .block[style*="display: none"],
    #scene_advanced_row_2 > .form > .block[style*="display: none"],
    #scene_advanced_row_3 > .form > .block[style*="display: none"],
    #scene_var_number7_8_row > .form > .block[style*="display: none"],
    #scene_var_number9_10_row > .form > .block[style*="display: none"],
    #scene_switch_option1_2_row > .form > .block[style*="display: none"],
    #scene_switch_option3_4_row > .form > .block[style*="display: none"] {
        display: none !important;
    }

    #scene_aspect_ratio_row,
    #scene_batch_accordion,
    #scene_resolution_override_accordion,
    #sam3_video_mask_accordion,
    #pose_studio {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #scene_advanced_parameters_accordion > .form,
    #scene_advanced_parameters_accordion > .block,
    #scene_advanced_parameters_accordion > div {
        background: var(--block-background-fill) !important;
    }

    #scene_advanced_parameters_accordion summary {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 0 10px 0 !important;
        margin-bottom: 6px !important;
        box-shadow: none !important;
    }

    html:not(.simpai-scene-director-video-preset) #scene_director_accordion {
        display: none !important;
    }

    html.simpai-scene-director-video-preset #scene_director_accordion {
        display: block !important;
    }

    #scene_director_accordion {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        background: color-mix(in srgb, var(--input-background-fill) 88%, #111318) !important;
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
        border-radius: 7px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #scene_director_accordion > button.label-wrap {
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        background: color-mix(in srgb, var(--input-background-fill) 90%, #111318) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #scene_director_accordion > button.label-wrap > span {
        height: 40px !important;
        line-height: 40px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    #scene_director_accordion > button.label-wrap > span:not(.icon)::before {
        content: "🎬 ";
        font-weight: 400 !important;
    }

    #scene_director_accordion > div:not(.wrap) {
        padding: 8px 10px 10px !important;
        background: color-mix(in srgb, var(--input-background-fill) 86%, #111318) !important;
        border-top: 1px solid color-mix(in srgb, var(--border-color-primary) 58%, transparent) !important;
    }

    #scene_director_accordion .wrap,
    #scene_director_accordion .block,
    #scene_director_accordion .form {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #scene_director_toolbar_row,
    #scene_director_settings_row,
    #scene_director_media_rules,
        #scene_director_media_preview,
        #scene_director_editor,
        #scene_director_prompt_preview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 6px !important;
        background: transparent !important;
    }

    #scene_director_toolbar_row > .form,
    #scene_director_settings_row > .form {
        display: grid !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: start !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #scene_director_toolbar_row > .form {
        grid-template-columns: minmax(132px, 190px) minmax(220px, 1fr) !important;
    }

    #scene_director_settings_row > .form {
        grid-template-columns: repeat(4, minmax(118px, 1fr)) !important;
    }

    #scene_director_toolbar_row > .form > .block,
    #scene_director_settings_row > .form > .block {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #scene_director_toolbar_row > .form > .block > .wrap,
    #scene_director_settings_row > .form > .block > .wrap {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #scene_director_media_rules .scene-director-media-rules {
        margin: 0 0 6px !important;
        padding: 5px 8px !important;
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
        border-radius: 6px !important;
        background: color-mix(in srgb, #111318 62%, var(--input-background-fill)) !important;
        color: var(--body-text-color-subdued) !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    #scene_director_media_preview .html-container,
    #scene_director_editor .html-container {
        padding: 6px 8px !important;
    }

    #scene_director_media_preview .scene-director-media-preview {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 118px)) !important;
        justify-content: start !important;
        gap: 6px !important;
        margin: 0 0 6px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #scene_director_media_preview .scene-director-media-tile {
        position: relative !important;
        display: grid !important;
        grid-template-rows: auto auto auto !important;
        gap: 2px !important;
        min-width: 0 !important;
        padding: 4px !important;
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
        border-radius: 6px !important;
        background: color-mix(in srgb, #101216 66%, var(--input-background-fill)) !important;
        color: var(--body-text-color-subdued) !important;
        overflow: hidden !important;
    }

    #scene_director_media_preview .scene-director-media-drop {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        min-width: 0 !important;
        border-radius: 5px !important;
        border: 1px dashed color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
        padding: 0 !important;
        background: color-mix(in srgb, #0b0d10 82%, var(--input-background-fill)) !important;
        color: var(--body-text-color-subdued) !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        cursor: pointer !important;
    }

    #scene_director_media_preview .scene-director-empty-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        color: var(--body-text-color-subdued) !important;
        font-size: 11px !important;
    }

    #scene_director_media_preview .scene-director-media-drop img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        object-fit: cover !important;
        border-radius: 5px !important;
        display: block !important;
    }

    #scene_director_media_preview .scene-director-media-drop.is-dragover {
        border-color: var(--button-primary-background-fill) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--button-primary-background-fill) 32%, transparent) !important;
    }

    #scene_director_media_preview .scene-director-media-clear {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        padding: 0 !important;
        border-radius: 5px !important;
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 64%, transparent) !important;
        background: color-mix(in srgb, var(--block-background-fill) 86%, transparent) !important;
        color: var(--body-text-color) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #scene_director_media_preview .scene-director-media-tile.has-image .scene-director-media-clear {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #scene_director_media_preview .scene-director-media-tile b,
    #scene_director_media_preview .scene-director-media-tile small {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #scene_director_media_preview .scene-director-media-tile b {
        color: var(--body-text-color) !important;
        font-size: 12px !important;
    }

    #scene_director_media_preview .scene-director-media-tile small {
        font-size: 11px !important;
    }

    #scene_director_editor .scene-director-editor {
        display: grid !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 6px !important;
        background: transparent !important;
    }

    #scene_director_editor .scene-director-editor-head,
    #scene_director_editor .scene-director-shot-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    #scene_director_editor .scene-director-editor-head span,
    #scene_director_editor .scene-director-shot-head b,
    #scene_director_editor .scene-director-shot-head span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #scene_director_editor .scene-director-editor-head span,
    #scene_director_editor .scene-director-shot-head b {
        color: var(--body-text-color) !important;
        font-weight: 800 !important;
    }

    #scene_director_editor .scene-director-shot-head span {
        color: var(--body-text-color-subdued) !important;
        font-size: 12px !important;
    }

    #scene_director_editor .scene-director-editor-head button,
    #scene_director_editor .scene-director-shot-head button {
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
        border-radius: 6px !important;
        background: color-mix(in srgb, var(--button-secondary-background-fill) 88%, transparent) !important;
        color: var(--body-text-color) !important;
        min-height: 28px !important;
    }

    #scene_director_editor .scene-director-shot-head button {
        width: 28px !important;
        padding: 0 !important;
    }

    #scene_director_editor .scene-director-shot-head button:disabled {
        opacity: 0.45 !important;
    }

    #scene_director_editor .scene-director-shot-head > div {
        display: flex !important;
        gap: 5px !important;
        flex: 0 0 auto !important;
    }

    #scene_director_editor .scene-director-shot-list {
        display: grid !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    #scene_director_editor .scene-director-shot {
        display: grid !important;
        gap: 7px !important;
        min-width: 0 !important;
        padding: 7px !important;
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
        border-radius: 7px !important;
        background: color-mix(in srgb, #101216 64%, var(--input-background-fill)) !important;
        container-type: inline-size !important;
    }

    #scene_director_editor .scene-director-shot-grid {
        display: grid !important;
        grid-template-columns: minmax(60px, 0.42fr) minmax(60px, 0.42fr) minmax(170px, 1.1fr) minmax(300px, 1.7fr) minmax(76px, 0.5fr) minmax(76px, 0.5fr) !important;
        grid-template-areas: "start end prompt refs audio video" !important;
        gap: 6px !important;
        align-items: end !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #scene_director_editor .scene-director-shot-grid > label:nth-child(1) {
        grid-area: start !important;
    }

    #scene_director_editor .scene-director-shot-grid > label:nth-child(2) {
        grid-area: end !important;
    }

    #scene_director_editor .scene-director-shot-grid > label:nth-child(3) {
        grid-area: prompt !important;
    }

    #scene_director_editor .scene-director-shot-grid > label:nth-child(4) {
        grid-area: refs !important;
    }

    #scene_director_editor .scene-director-shot-grid > label:nth-child(5) {
        grid-area: audio !important;
    }

    #scene_director_editor .scene-director-shot-grid > label:nth-child(6) {
        grid-area: video !important;
    }

    #scene_director_editor .scene-director-shot-grid label {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
        color: var(--body-text-color-subdued) !important;
        font-size: 12px !important;
    }

    #scene_director_editor .scene-director-shot-grid input,
    #scene_director_editor .scene-director-shot-grid select,
    #scene_director_editor .scene-director-shot-grid textarea {
        width: 100% !important;
        min-width: 0 !important;
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 76%, transparent) !important;
        border-radius: 6px !important;
        background: var(--input-background-fill) !important;
        color: var(--body-text-color) !important;
        box-sizing: border-box !important;
        min-height: 34px !important;
    }

    #scene_director_editor .scene-director-shot-grid textarea {
        resize: vertical !important;
        min-height: 36px !important;
        line-height: 1.35 !important;
    }

    #scene_director_editor .scene-director-image-refs-field {
        align-self: stretch !important;
    }

    #scene_director_editor .scene-director-image-refs-field input[type="hidden"] {
        display: none !important;
    }

    #scene_director_editor .scene-director-ref-picker {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        justify-content: start !important;
        align-items: start !important;
        gap: 4px !important;
        min-height: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 4px !important;
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 76%, transparent) !important;
        border-radius: 6px !important;
        background: var(--input-background-fill) !important;
        box-sizing: border-box !important;
    }

    #scene_director_editor .scene-director-ref-choice {
        position: relative !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 2px !important;
        border-radius: 5px !important;
        border: 1px solid color-mix(in srgb, var(--border-color-primary) 64%, transparent) !important;
        background: color-mix(in srgb, var(--body-background-fill) 72%, transparent) !important;
        color: var(--body-text-color-subdued) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    #scene_director_editor .scene-director-ref-choice.is-active {
        border-color: var(--button-primary-background-fill) !important;
        background: color-mix(in srgb, var(--button-primary-background-fill) 20%, var(--input-background-fill)) !important;
        color: var(--body-text-color) !important;
    }

    #scene_director_editor .scene-director-ref-choice img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: 100% !important;
        border-radius: 5px !important;
        object-fit: cover !important;
        background: color-mix(in srgb, var(--block-background-fill) 82%, transparent) !important;
        display: block !important;
    }

    #scene_director_editor .scene-director-ref-choice span {
        align-self: center !important;
        justify-self: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11px !important;
    }

    #scene_director_editor .scene-director-ref-choice small {
        position: absolute !important;
        left: 3px !important;
        right: 3px !important;
        bottom: 3px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 1px 2px !important;
        border-radius: 4px !important;
        background: color-mix(in srgb, var(--input-background-fill) 82%, transparent) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        pointer-events: none !important;
    }

    #scene_director_editor .scene-director-ref-none {
        grid-template-rows: 1fr !important;
    }

    #scene_advanced_values_grid,
    #scene_advanced_switch_grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #scene_advanced_values_grid .form,
    #scene_advanced_switch_grid .form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: start !important;
        background: var(--block-background-fill) !important;
    }

    #scene_advanced_values_grid .form > .block,
    #scene_advanced_switch_grid .form > .block,
    #scene_prompt_preset_row .form > .block {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #scene_advanced_values_grid .form > .block[style*="display: none"],
    #scene_advanced_switch_grid .form > .block[style*="display: none"] {
        display: none !important;
    }

    #scene_advanced_values_grid .form > .block:last-child:nth-child(odd),
    #scene_advanced_switch_grid .form > .block:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }

    #scene_aspect_ratio_row,
    #scene_duration_row,
    #scene_image_number_row,
    #sam3_params_row_1,
    #sam3_params_row_2,
    #sam3_params_row_3,
    #scene_advanced_row_1,
    #scene_advanced_row_2,
    #scene_advanced_row_3,
    #scene_var_number7_8_row,
    #scene_var_number9_10_row,
    #scene_switch_option1_2_row,
    #scene_switch_option3_4_row,

    #scene_aspect_ratio_row .block,
    #scene_duration_row .block,
    #scene_image_number_row .block,
    #sam3_params_row_1 .block,
    #sam3_params_row_2 .block,
    #sam3_params_row_3 .block,
    #scene_advanced_row_1 .block,
    #scene_advanced_row_2 .block,
    #scene_advanced_row_3 .block,
    #scene_var_number7_8_row .block,
    #scene_var_number9_10_row .block,
    #scene_switch_option1_2_row .block,
    #scene_switch_option3_4_row .block,
    #scene_aspect_ratio_row .form,
    #scene_duration_row .form,
    #scene_image_number_row .form,
    #sam3_params_row_1 .form,
    #sam3_params_row_2 .form,
    #sam3_params_row_3 .form,
    #scene_advanced_row_1 .form,
    #scene_advanced_row_2 .form,
    #scene_advanced_row_3 .form,
    #scene_var_number7_8_row .form,
    #scene_var_number9_10_row .form,
    #scene_switch_option1_2_row .form,
    #scene_switch_option3_4_row .form,
    #scene_aspect_ratio_row .wrap,
    #scene_duration_row .wrap,
    #scene_image_number_row .wrap,
    #sam3_params_row_1 .wrap,
    #sam3_params_row_2 .wrap,
    #sam3_params_row_3 .wrap,
    #scene_advanced_row_1 .wrap,
    #scene_advanced_row_2 .wrap,
    #scene_advanced_row_3 .wrap,
    #scene_var_number7_8_row .wrap,
    #scene_var_number9_10_row .wrap,
    #scene_switch_option1_2_row .wrap,
    #scene_switch_option3_4_row .wrap,

    #scene_panel:has(.is-zoomed-active),
    #scene_panel:has(.fullscreen),
    #scene_panel:has(.preview) {
        overflow: visible !important;
        z-index: 10001 !important;
    }
}

@media (max-width: 767px) {
    #scene_director_toolbar_row > .form,
    #scene_director_settings_row > .form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #scene_director_media_preview .scene-director-media-preview {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 118px)) !important;
    }

    #scene_director_editor .scene-director-shot-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "start"
            "end"
            "prompt"
            "refs"
            "audio"
            "video" !important;
    }

    #scene_director_editor .scene-director-ref-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #scene_panel {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        position: relative !important;
        overflow: visible !important;
        background: var(--block-background-fill) !important;
        border: 1px solid var(--border-color-primary) !important;
        border-radius: var(--radius-md) !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    #scene_advanced_parameters_accordion {
        margin-top: 12px !important;
    }

    #scene_input_images,
    #sam3_params_row_1,
    #sam3_params_row_2,
    #sam3_params_row_3,
    #scene_advanced_row_1,
    #scene_advanced_row_2,
    #scene_advanced_row_3,
    #scene_var_number7_8_row,
    #scene_var_number9_10_row,
    #scene_switch_option1_2_row,
    #scene_switch_option3_4_row,
    #scene_duration_row,
    #scene_image_number_row {
        gap: 12px !important;
    }

    #sam3_params_row_1,
    #sam3_params_row_2,
    #sam3_params_row_3 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #sam3_params_row_1 > .form,
    #sam3_params_row_2 > .form,
    #sam3_params_row_3 > .form,
    #scene_advanced_row_1 > .form,
    #scene_advanced_row_2 > .form,
    #scene_advanced_row_3 > .form,
    #scene_var_number7_8_row > .form,
    #scene_var_number9_10_row > .form,
    #scene_switch_option1_2_row > .form,
    #scene_switch_option3_4_row > .form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #scene_advanced_values_grid .form,
    #scene_advanced_switch_grid .form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

#scene_panel[style*="display: none"],
#scene_panel[hidden],
#scene_panel.hidden,
#scene_panel.simpai-force-hidden,
html:not(.simpai-scene-frontend) #scene_panel.hide,
.hidden {
    display: none !important;
}

[data-simpleai-scene-hidden="1"],
[data-simpleai-aux-hidden="1"],
.simpai-force-hidden {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

[data-simpleai-scene-hidden="1"] > *,
[data-simpleai-aux-hidden="1"] > *,
.simpai-force-hidden > * {
    display: none !important;
}

html.simpai-preset-nav-active #scene_panel,
html.simpai-preset-nav-active #camera_control_accordion,
html.simpai-preset-nav-active #anglelight_control_accordion,
html.simpai-preset-nav-active #style_transfer_accordion,
html.simpai-preset-nav-active #sam3_video_mask_accordion,
html.simpai-preset-nav-active #pose_studio,
html.simpai-preset-nav-active #gaussian_studio,
html.simpai-preset-nav-active #scene_resolution_override_accordion {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html.simpai-preset-nav-active #sam3_frames_modal_backdrop,
html.simpai-preset-nav-active #sam3_frames_modal {
    display: none !important;
    visibility: hidden !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

html.simpai-preset-nav-active #scene_panel > *,
html.simpai-preset-nav-active #camera_control_accordion > *,
html.simpai-preset-nav-active #anglelight_control_accordion > *,
html.simpai-preset-nav-active #style_transfer_accordion > *,
html.simpai-preset-nav-active #sam3_video_mask_accordion > *,
html.simpai-preset-nav-active #pose_studio > *,
html.simpai-preset-nav-active #gaussian_studio > *,
html.simpai-preset-nav-active #scene_resolution_override_accordion > * {
    display: none !important;
}

#scene_input_images[data-simpleai-visible-count="1"],
#scene_input_images.scene-input-images-single,
#scene_input_images:has(#scene_input_image1[style*="display: none"]):has(#scene_input_image2:not([style*="display: none"])),
#scene_input_images:has(#scene_input_image2[style*="display: none"]):has(#scene_input_image1:not([style*="display: none"])) {
    grid-template-columns: minmax(0, 1fr) !important;
}

#scene_input_images[data-simpleai-visible-count="2"],
#scene_input_images[data-simpleai-visible-count="3"],
#scene_input_images[data-simpleai-visible-count="4"],
#scene_input_images.scene-input-images-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#scene_input_images.sai-gaussian-studio-image-flow {
    grid-template-columns: minmax(0, 1fr) !important;
}

#scene_canvas.sai-gaussian-studio-output-slot {
    border-color: rgba(148, 163, 184, 0.30) !important;
    border-style: dashed !important;
    background: color-mix(in srgb, var(--block-background-fill, #24262b) 82%, #0f172a) !important;
    opacity: 0.68 !important;
    cursor: not-allowed !important;
}

#scene_canvas.sai-gaussian-studio-output-slot :where(.upload-container, input, button, label, canvas) {
    cursor: not-allowed !important;
}

#scene_input_images.sai-gaussian-studio-image-flow #scene_input_image1 {
    border-color: #67e8f9 !important;
    background: color-mix(in srgb, var(--block-background-fill, #24262b) 88%, #0891b2) !important;
    box-shadow:
        inset 0 0 0 1px rgba(103, 232, 249, 0.58),
        0 0 0 1px rgba(103, 232, 249, 0.30),
        0 10px 22px rgba(37, 99, 235, 0.18) !important;
}

#scene_input_images.sai-gaussian-studio-image-flow #scene_input_image1.simpai-native-image-drag-over {
    border-color: #a5f3fc !important;
    box-shadow:
        inset 0 0 0 2px rgba(103, 232, 249, 0.86),
        0 0 0 2px rgba(37, 99, 235, 0.34),
        0 12px 26px rgba(8, 145, 178, 0.26) !important;
}

:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
) {
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border-color-primary, rgba(148, 163, 184, 0.32)) !important;
    border-radius: 8px !important;
    background: var(--block-background-fill, #24262b) !important;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease !important;
}

:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
) > .wrap,
:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
) .image-container,
:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
) .upload-container,
:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
) .file-preview-holder {
    background: transparent !important;
    border-color: transparent !important;
}

:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
).simpai-native-image-drag-over {
    border-color: var(--color-accent, #f97316) !important;
    box-shadow: inset 0 0 0 1px var(--color-accent, #f97316), 0 0 0 1px rgba(249, 115, 22, 0.18) !important;
    background: color-mix(in srgb, var(--block-background-fill, #24262b) 90%, var(--color-accent, #f97316)) !important;
}

#scene_input_image1,
#scene_input_image2,
#scene_input_image3,
#scene_input_image4,
#uov_input_image,
#enhance_input_image,
#describe_input_image,
#metadata_input_image,
#image_encrypt_input_image,
#ip_image_grid [id^="ip_image_"] {
    --simpai-upload-media-height: 300px;
}

#scene_video {
    --simpai-upload-media-height: 400px;
}

#sam3_input_video,
#sam3_output_mask_video {
    --simpai-upload-media-height: 240px;
}

:where(
    #scene_input_image1,
    #scene_input_image2,
    #scene_input_image3,
    #scene_input_image4,
    #uov_input_image,
    #enhance_input_image,
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image,
    #ip_image_grid [id^="ip_image_"],
    #scene_video,
    #sam3_input_video,
    #sam3_output_mask_video
):not(.fullscreen) {
    height: var(--simpai-upload-media-height, 300px) !important;
    min-height: 0 !important;
    max-height: var(--simpai-upload-media-height, 300px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

:where(
    #scene_input_image1,
    #scene_input_image2,
    #scene_input_image3,
    #scene_input_image4,
    #uov_input_image,
    #enhance_input_image,
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image,
    #ip_image_grid [id^="ip_image_"],
    #scene_video,
    #sam3_input_video,
    #sam3_output_mask_video
):not(.fullscreen) :where(
    [data-testid="image"],
    [data-testid="video"],
    .image-container,
    .video-container,
    .upload-container,
    .file-preview-holder,
    .image-frame,
    button:has(img),
    button:has(video)
) {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

:where(
    #scene_input_image1,
    #scene_input_image2,
    #scene_input_image3,
    #scene_input_image4,
    #uov_input_image,
    #enhance_input_image,
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image,
    #ip_image_grid [id^="ip_image_"],
    #scene_video,
    #sam3_input_video,
    #sam3_output_mask_video
):not(.fullscreen) :where(img, video, canvas) {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
).simpai-native-image-drag-over::after {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: 10;
    pointer-events: none;
    border: 2px dashed var(--color-accent, #f97316);
    border-radius: 6px;
}

:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
).fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2147483600 !important;
    overflow: auto !important;
    border-radius: 0 !important;
}

#simpleai_gradio_fullscreen_portal_host {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483600 !important;
    pointer-events: none !important;
}

.gradio-container .block.fullscreen,
#simpleai_gradio_fullscreen_portal_host > .block.fullscreen.simpleai-gradio-fullscreen-portal-node {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2147483600 !important;
    overflow: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    animation: none !important;
    pointer-events: auto !important;
}

.gradio-container .block.fullscreen [data-testid="image"].image-container,
#simpleai_gradio_fullscreen_portal_host > .block.fullscreen.simpleai-gradio-fullscreen-portal-node [data-testid="image"].image-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2147483601 !important;
    overflow: auto !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.gradio-container .block.fullscreen [data-testid="image"].image-container .upload-container,
#simpleai_gradio_fullscreen_portal_host > .block.fullscreen.simpleai-gradio-fullscreen-portal-node [data-testid="image"].image-container .upload-container,
.gradio-container .block.fullscreen [data-testid="image"].image-container .image-frame,
#simpleai_gradio_fullscreen_portal_host > .block.fullscreen.simpleai-gradio-fullscreen-portal-node [data-testid="image"].image-container .image-frame {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.gradio-container .block.fullscreen [data-testid="image"].image-container img,
#simpleai_gradio_fullscreen_portal_host > .block.fullscreen.simpleai-gradio-fullscreen-portal-node [data-testid="image"].image-container img {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.gradio-container .block.fullscreen [data-testid="image"].image-container .icon-button-wrapper,
#simpleai_gradio_fullscreen_portal_host > .block.fullscreen.simpleai-gradio-fullscreen-portal-node [data-testid="image"].image-container .icon-button-wrapper {
    z-index: 2147483602 !important;
}

#main_layout_row:has(.block.fullscreen),
#scene_panel:has(.block.fullscreen),
.gradio-container:has(.block.fullscreen),
.gradio-container .contain:has(.block.fullscreen),
.gradio-container .wrap:has(.block.fullscreen),
.tabs:has(.block.fullscreen),
.tabitem:has(.block.fullscreen),
.form:has(.block.fullscreen),
.row:has(.block.fullscreen),
.column:has(.block.fullscreen) {
    overflow: visible !important;
}

:is(
    #scene_input_images [id^="scene_input_image"],
    #describe_input_image,
    #metadata_input_image,
    #image_encrypt_input_image
).fullscreen::after {
    display: none !important;
}

#scene_panel[style*="display: none"] ~ #scene_advanced_parameters_accordion,
#scene_panel.hidden ~ #scene_advanced_parameters_accordion {
    display: none !important;
}

/* DEBUG NOTE (Gradio6): disable auto-collapse by :has().
   New DOM wrappers may keep outer column space while hiding inner nodes,
   causing false "empty" detection and a blank right column. */
/* #scene_panel:not(:has(*:not([style*="display: none"]):not(.hidden))) {
    display: none !important;
} */

#scene_panel > * + * {
    margin-top: 10px !important;
}

#scene_panel_bottom_fill {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    line-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
}

#camera_control_accordion,
#anglelight_control_accordion,
#style_transfer_accordion,
#sam3_video_mask_accordion,
#pose_studio,
#gaussian_studio,
#scene_batch_accordion,
#scene_resolution_override_accordion {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

#style_transfer_accordion {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#style_transfer_accordion > button.label-wrap {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

#style_transfer_accordion > div:not([data-testid]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#camera_control_accordion > *,
#anglelight_control_accordion > *,
#style_transfer_accordion > *,
#sam3_video_mask_accordion > *,
#pose_studio > *,
#gaussian_studio > *,
#scene_batch_accordion > *,
#scene_resolution_override_accordion > * {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

#sam3_video_mask_accordion > .form,
#sam3_video_mask_accordion > .block,
#sam3_video_mask_accordion > div,
#sam3_video_mask_accordion .form,
#sam3_video_mask_accordion .block,
#sam3_video_mask_accordion .wrap,
#pose_studio > .form,
#pose_studio > .block,
#pose_studio > div,
#pose_studio .form,
#pose_studio .block,
#pose_studio .wrap,
#gaussian_studio > .form,
#gaussian_studio > .block,
#gaussian_studio > div,
#gaussian_studio .form,
#gaussian_studio .block,
#gaussian_studio .wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
}

#style_transfer_accordion #transfer_style_gallery_container_scene,
#style_transfer_accordion #transfer_style_gallery_container_scene > *,
#style_transfer_accordion #transfer_style_gallery_container_scene .prose,
#style_transfer_accordion #transfer_style_gallery_container_scene .form,
#style_transfer_accordion #transfer_style_gallery_container_scene .wrap,
#style_transfer_accordion #transfer_style_gallery_container_scene .block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

#style_transfer_accordion #transfer_style_gallery_root,
#style_transfer_accordion #transfer_style_gallery_root .tsg-toolbar,
#style_transfer_accordion #transfer_style_gallery_root .tsg-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

#style_transfer_accordion #transfer_style_gallery_root {
    padding: 10px 0 12px !important;
}

html:not(.simpai-scene-director-video-preset) #scene_director_accordion {
    display: none !important;
}

html.simpai-scene-director-video-preset #scene_director_accordion {
    display: block !important;
}

#camera_control_accordion summary,
#anglelight_control_accordion summary,
#style_transfer_accordion summary,
#sam3_video_mask_accordion summary,
#pose_studio summary,
#gaussian_studio summary,
#scene_batch_accordion summary,
#scene_resolution_override_accordion summary,
#scene_director_accordion summary,
#scene_advanced_parameters_accordion summary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

#camera_control_accordion [role="button"],
#anglelight_control_accordion [role="button"],
#style_transfer_accordion [role="button"],
#sam3_video_mask_accordion [role="button"],
#pose_studio [role="button"],
#gaussian_studio [role="button"],
#scene_batch_accordion [role="button"],
#scene_resolution_override_accordion [role="button"],
#scene_director_accordion [role="button"],
#scene_advanced_parameters_accordion [role="button"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
}

#camera_control_accordion .wrap,
#anglelight_control_accordion .wrap,
#style_transfer_accordion .wrap,
#sam3_video_mask_accordion .wrap,
#pose_studio .wrap,
#gaussian_studio .wrap,
#scene_batch_accordion .wrap,
#scene_resolution_override_accordion .wrap,
#scene_director_accordion .wrap,
#scene_advanced_parameters_accordion .wrap,
#camera_control_accordion .block,
#anglelight_control_accordion .block,
#style_transfer_accordion .block,
#sam3_video_mask_accordion .block,
#pose_studio .block,
#gaussian_studio .block,
#scene_batch_accordion .block,
#scene_resolution_override_accordion .block,
#scene_director_accordion .block,
#scene_advanced_parameters_accordion .block {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

#scene_director_accordion.block {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: color-mix(in srgb, var(--input-background-fill) 92%, #111318) !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

#scene_director_accordion.block:not(:has(> button.label-wrap.open)) {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#scene_director_accordion.block > .wrap {
    min-height: 0 !important;
    height: 40px !important;
    max-height: 40px !important;
    background: transparent !important;
}

#scene_director_accordion.block > button.label-wrap {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: color-mix(in srgb, var(--input-background-fill) 92%, #111318) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.simpai-scene-director-mode-enabled #scene_director_accordion.block {
    border-color: color-mix(in srgb, #ff7a1a 72%, var(--border-color-primary)) !important;
}

html.simpai-scene-director-mode-enabled #scene_director_accordion.block > button.label-wrap {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, #ff7a1a 18%, var(--input-background-fill)) 0%,
        color-mix(in srgb, #ff7a1a 7%, var(--input-background-fill)) 48%,
        color-mix(in srgb, var(--input-background-fill) 92%, #111318) 100%
    ) !important;
    box-shadow: inset 3px 0 0 #ff7a1a !important;
}

html.simpai-scene-director-mode-enabled #scene_director_accordion.block > button.label-wrap > span:not(.icon) {
    color: color-mix(in srgb, #ff9b45 34%, var(--body-text-color)) !important;
    font-weight: 600 !important;
}

    #scene_director_accordion.block > button.label-wrap > span {
        height: 40px !important;
        line-height: 40px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }

    #scene_director_accordion.block > button.label-wrap > span:not(.icon)::before {
        content: "🎬 ";
        font-weight: 400 !important;
    }

#scene_director_accordion.block > button.label-wrap > span.icon {
    width: 32px !important;
    min-width: 32px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
}

#scene_director_accordion.block > div:not(.wrap) {
    padding: 8px 10px 10px !important;
    background: color-mix(in srgb, var(--input-background-fill) 86%, #111318) !important;
    border-top: 1px solid color-mix(in srgb, var(--border-color-primary) 58%, transparent) !important;
    container-name: scene-director-shell !important;
    container-type: inline-size !important;
}

#scene_director_accordion.block > div:not(.wrap),
#scene_director_accordion.block > div:not(.wrap) > .column,
#scene_director_accordion.block > div:not(.wrap) > .form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#scene_director_accordion.block > div:not(.wrap) > .column,
#scene_director_accordion.block > div:not(.wrap) > .form {
    display: grid !important;
    grid-template-columns: max-content minmax(360px, 500px) !important;
    grid-template-areas:
        "toolbar toolbar"
        "media side"
        "editor editor"
        "prompt prompt" !important;
    gap: 8px 10px !important;
    align-items: start !important;
    justify-content: start !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#scene_director_accordion.block > div:not(.wrap) > .column > .form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#scene_director_accordion.block > div:not(.wrap) > .column > .form:has(.sai-gradio-hidden-bridge) {
    position: fixed !important;
    left: -10000px !important;
    top: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    max-width: 1px !important;
    max-height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

#scene_director_accordion.block > div:not(.wrap) > .column > .form:has(#scene_director_prompt_preview) {
    grid-area: prompt !important;
}

#scene_advanced_parameters_accordion + #scene_director_accordion.block {
    margin-top: 0 !important;
}

#scene_director_toolbar_row {
    grid-area: toolbar !important;
}

#scene_director_side_panel {
    grid-area: side !important;
}

#scene_director_side_panel #scene_director_settings_row,
#scene_director_side_panel #scene_director_media_rules {
    grid-area: auto !important;
}

#scene_director_media_preview {
    grid-area: media !important;
}

#scene_director_editor {
    grid-area: editor !important;
}

#scene_director_prompt_preview {
    grid-area: prompt !important;
}

#scene_director_toolbar_row,
#scene_director_side_panel,
#scene_director_settings_row,
#scene_director_media_rules,
#scene_director_media_preview,
#scene_director_editor,
#scene_director_prompt_preview {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#scene_director_side_panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    justify-self: start !important;
    align-self: start !important;
    align-content: start !important;
    background: transparent !important;
}

#scene_director_media_preview {
    width: max-content !important;
    justify-self: start !important;
}

#scene_director_toolbar_row > .form,
#scene_director_settings_row > .form {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: start !important;
    padding: 0 !important;
    background: transparent !important;
}

#scene_director_toolbar_row > .form {
    grid-template-columns: minmax(160px, 0.8fr) minmax(180px, 0.9fr) !important;
    align-items: stretch !important;
}

#scene_director_settings_row > .form {
    grid-template-columns: minmax(0, 1fr) !important;
}

#scene_director_enabled,
#scene_director_compose {
    min-height: 68px !important;
    padding: 8px 10px !important;
    background: color-mix(in srgb, #15181d 72%, var(--input-background-fill)) !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 78%, transparent) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent) !important;
}

#scene_director_enabled {
    background: color-mix(in srgb, var(--button-primary-background-fill) 13%, #15181d) !important;
    border-color: color-mix(in srgb, var(--button-primary-background-fill) 72%, var(--border-color-primary)) !important;
}

#scene_director_enabled label,
#scene_director_compose label {
    min-height: 50px !important;
    align-items: center !important;
    gap: 8px !important;
}

#scene_director_enabled .label-text,
#scene_director_compose .label-text {
    color: var(--body-text-color) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

#scene_director_enabled input[type="checkbox"],
#scene_director_compose input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
}

#scene_director_compose.scene-director-control-disabled,
#scene_director_width.scene-director-control-disabled,
#scene_director_height.scene-director-control-disabled,
#scene_director_fps.scene-director-control-disabled,
#scene_director_duration.scene-director-control-disabled {
    opacity: 0.52 !important;
    filter: grayscale(0.28) !important;
}

#scene_director_width.scene-director-control-disabled,
#scene_director_height.scene-director-control-disabled,
#scene_director_fps.scene-director-control-disabled,
#scene_director_duration.scene-director-control-disabled {
    pointer-events: none !important;
}

#scene_director_toolbar_row > .form > .block,
#scene_director_settings_row > .form > .block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#scene_director_toolbar_row > .form > #scene_director_enabled,
#scene_director_toolbar_row > .form > #scene_director_compose {
    min-height: 68px !important;
    padding: 8px 10px !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 78%, transparent) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, #15181d 72%, var(--input-background-fill)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent) !important;
    overflow: hidden !important;
}

#scene_director_toolbar_row > .form > #scene_director_enabled {
    border-color: color-mix(in srgb, var(--button-primary-background-fill) 72%, var(--border-color-primary)) !important;
    background: color-mix(in srgb, var(--button-primary-background-fill) 16%, #15181d) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
        0 0 0 1px color-mix(in srgb, var(--button-primary-background-fill) 24%, transparent) !important;
}

#scene_director_toolbar_row > .form > .block > .wrap,
#scene_director_settings_row > .form > .block > .wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#scene_director_media_rules .scene-director-media-rules {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
    border-radius: 6px !important;
    background: color-mix(in srgb, #111318 62%, var(--input-background-fill)) !important;
    color: var(--body-text-color-subdued) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

#scene_director_media_rules .scene-director-media-rules-text {
    flex: 1 1 260px !important;
    min-width: min(100%, 260px) !important;
}

#scene_director_media_rules .scene-director-readme-link {
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    color: color-mix(in srgb, var(--button-primary-background-fill) 78%, #ffffff) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

#scene_director_media_rules .scene-director-readme-link:hover {
    text-decoration: underline !important;
}

#scene_director_media_preview .scene-director-media-preview {
    display: grid !important;
    grid-template-columns: max-content !important;
    gap: 10px !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#scene_director_media_preview .scene-director-media-group {
    display: grid !important;
    gap: 6px !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 2px !important;
}

#scene_director_media_preview .scene-director-media-group-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
}

#scene_director_media_preview .scene-director-media-group strong {
    color: var(--body-text-color-subdued) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

#scene_director_media_preview .scene-director-media-upload-hint {
    display: none !important;
}

#scene_director_media_preview .scene-director-media-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 128px)) !important;
    justify-content: start !important;
    gap: 7px !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#scene_director_media_files_row,
#scene_director_audio_files,
#scene_director_video_files {
    position: fixed !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    max-width: 1px !important;
    max-height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: -1 !important;
}

#scene_director_media_files_row > .form,
#scene_director_media_files_row > .form > .block,
#scene_director_media_files_row *,
#scene_director_audio_files *,
#scene_director_video_files * {
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    min-height: 1px !important;
    max-width: 1px !important;
    max-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

#scene_director_media_preview .scene-director-media-tile {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 128px !important;
    padding: 4px !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
    border-radius: 6px !important;
    background: color-mix(in srgb, #101216 66%, var(--input-background-fill)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#scene_director_media_preview .scene-director-media-group.is-policy-disabled,
#scene_director_media_preview .scene-director-media-tile.is-policy-disabled {
    opacity: 0.52 !important;
}

#scene_director_media_preview .scene-director-media-tile[data-scene-director-kind="audio"] .scene-director-media-drop {
    aspect-ratio: 2 / 1 !important;
}

#scene_director_media_preview .scene-director-media-tile[data-scene-director-kind="video"] .scene-director-media-drop {
    aspect-ratio: 16 / 9 !important;
}

#scene_director_media_preview .scene-director-media-tile.has-media .scene-director-media-drop {
    border-style: solid !important;
}

#scene_director_media_preview .scene-director-empty-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    color: var(--body-text-color-subdued) !important;
    font-size: 11px !important;
}

#scene_director_media_preview .scene-director-media-tile b,
#scene_director_media_preview .scene-director-media-tile small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#scene_director_media_preview .scene-director-media-tile b {
    color: var(--body-text-color) !important;
    font-size: 12px !important;
}

#scene_director_media_preview .scene-director-media-tile small {
    font-size: 11px !important;
}

#scene_director_media_preview .scene-director-media-clear {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border-radius: 5px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#scene_director_media_preview .scene-director-media-tile.has-image .scene-director-media-clear {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#scene_director_media_preview .scene-director-media-drop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 5px !important;
    border: 1px dashed color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
    background: color-mix(in srgb, #0b0d10 82%, var(--input-background-fill)) !important;
    color: var(--body-text-color-subdued) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

#scene_director_media_preview .scene-director-media-drop[aria-disabled="true"] {
    cursor: not-allowed !important;
    border-style: dashed !important;
    filter: grayscale(0.25) !important;
}

#scene_director_media_preview .scene-director-media-drop img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    border-radius: 5px !important;
    display: block !important;
}

#scene_director_media_preview .scene-director-media-drop.is-dragover {
    border-color: var(--button-primary-background-fill) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--button-primary-background-fill) 32%, transparent) !important;
}

#scene_director_editor .scene-director-shot {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    container-type: inline-size !important;
}

#scene_director_editor .scene-director-shot-grid {
    display: grid !important;
    grid-template-columns: minmax(60px, 0.42fr) minmax(60px, 0.42fr) minmax(170px, 1.1fr) minmax(300px, 1.7fr) minmax(76px, 0.5fr) minmax(76px, 0.5fr) !important;
    grid-template-areas: "start end prompt refs audio video" !important;
    gap: 6px !important;
    align-items: end !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

#scene_director_editor .scene-director-shot-grid > label:nth-child(1) {
    grid-area: start !important;
}

#scene_director_editor .scene-director-shot-grid > label:nth-child(2) {
    grid-area: end !important;
}

#scene_director_editor .scene-director-shot-grid > label:nth-child(3) {
    grid-area: prompt !important;
}

#scene_director_editor .scene-director-shot-grid > label:nth-child(4) {
    grid-area: refs !important;
}

#scene_director_editor .scene-director-shot-grid > label:nth-child(5) {
    grid-area: audio !important;
}

#scene_director_editor .scene-director-shot-grid > label:nth-child(6) {
    grid-area: video !important;
}

#scene_director_editor .scene-director-shot-grid label {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    color: var(--body-text-color-subdued) !important;
    font-size: 12px !important;
}

#scene_director_editor .scene-director-shot-grid input,
#scene_director_editor .scene-director-shot-grid select,
#scene_director_editor .scene-director-shot-grid textarea {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 76%, transparent) !important;
    border-radius: 6px !important;
    background: var(--input-background-fill) !important;
    color: var(--body-text-color) !important;
    box-sizing: border-box !important;
    min-height: 34px !important;
}

#scene_director_editor .scene-director-shot-grid textarea {
    resize: vertical !important;
    min-height: 36px !important;
    line-height: 1.35 !important;
}

#scene_director_editor .scene-director-ref-picker {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#scene_director_editor .scene-director-ref-choice:disabled,
#scene_director_editor .scene-director-ref-choice[aria-disabled="true"] {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.35) !important;
}

#scene_director_editor .scene-director-ref-choice.is-active:disabled,
#scene_director_editor .scene-director-ref-choice.is-active[aria-disabled="true"] {
    opacity: 1 !important;
    cursor: default !important;
    filter: none !important;
}

#scene_director_editor .scene-director-ref-choice.is-limit-disabled:not(.is-active) {
    opacity: 0.36 !important;
    border-style: dashed !important;
    background: color-mix(in srgb, var(--body-background-fill) 88%, transparent) !important;
    filter: grayscale(0.75) !important;
}

#scene_director_editor .scene-director-ref-choice.is-limit-disabled:not(.is-active) img {
    opacity: 0.58 !important;
}

#scene_director_editor .scene-director-ref-role {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    z-index: 2 !important;
    max-width: calc(100% - 6px) !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    background: color-mix(in srgb, var(--button-primary-background-fill) 82%, #000 18%) !important;
    color: var(--button-primary-text-color) !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
}

#scene_director_editor .scene-director-ref-choice:disabled:hover,
#scene_director_editor .scene-director-ref-choice[aria-disabled="true"]:hover {
    border-color: color-mix(in srgb, var(--border-color-primary) 64%, transparent) !important;
    box-shadow: none !important;
}

#scene_director_editor .scene-director-ref-choice.is-active:disabled:hover,
#scene_director_editor .scene-director-ref-choice.is-active[aria-disabled="true"]:hover {
    border-color: var(--button-primary-background-fill) !important;
    background: color-mix(in srgb, var(--button-primary-background-fill) 20%, var(--input-background-fill)) !important;
}

#scene_director_editor .scene-director-timeline-preview {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, #101216 68%, var(--input-background-fill)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#scene_director_editor .scene-director-timeline-preview-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-width: 0 !important;
}

#scene_director_editor .scene-director-timeline-preview-head span {
    min-width: 0 !important;
    color: var(--body-text-color) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#scene_director_editor .scene-director-timeline-preview-head small {
    min-width: 0 !important;
    color: var(--body-text-color-subdued) !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#scene_director_editor .scene-director-timeline-preview.is-compose-disabled {
    opacity: 0.78 !important;
}

#scene_director_editor .scene-director-timeline-preview.is-dragging,
#scene_director_editor .scene-director-timeline-preview.is-dragging * {
    user-select: none !important;
}

#scene_director_editor .scene-director-timeline-ruler,
#scene_director_editor .scene-director-timeline-video-track,
#scene_director_editor .scene-director-timeline-audio-track,
#scene_director_editor .scene-director-timeline-prompt-track {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#scene_director_editor .scene-director-timeline-ruler {
    height: 22px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color-primary) 60%, transparent) !important;
}

#scene_director_editor .scene-director-timeline-ruler span {
    position: absolute !important;
    top: 0 !important;
    display: grid !important;
    gap: 1px !important;
    transform: translateX(-1px) !important;
    color: var(--body-text-color-subdued) !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

#scene_director_editor .scene-director-timeline-ruler span::before {
    content: "" !important;
    width: 1px !important;
    height: 8px !important;
    background: color-mix(in srgb, var(--border-color-primary) 82%, transparent) !important;
}

#scene_director_editor .scene-director-timeline-ruler b,
#scene_director_editor .scene-director-timeline-ruler small {
    font: inherit !important;
    color: inherit !important;
}

#scene_director_editor .scene-director-timeline-video-track {
    height: 124px !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 66%, transparent) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--border-color-primary) 22%, transparent) 1px, transparent 1px) 0 0 / 25% 100%,
        color-mix(in srgb, #080a0d 70%, var(--input-background-fill)) !important;
}

#scene_director_editor .scene-director-timeline-audio-track,
#scene_director_editor .scene-director-timeline-prompt-track {
    height: 42px !important;
    border: 1px solid color-mix(in srgb, var(--border-color-primary) 58%, transparent) !important;
    background: color-mix(in srgb, #0b0d10 64%, var(--input-background-fill)) !important;
}

#scene_director_editor .scene-director-timeline-video-track > strong,
#scene_director_editor .scene-director-timeline-audio-track > strong,
#scene_director_editor .scene-director-timeline-prompt-track > strong {
    position: absolute !important;
    left: 7px !important;
    top: 6px !important;
    z-index: 4 !important;
    color: color-mix(in srgb, var(--body-text-color-subdued) 82%, transparent) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    pointer-events: none !important;
}

#scene_director_editor .scene-director-timeline-clip {
    position: absolute !important;
    top: 24px !important;
    bottom: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(48px, 0.42fr) minmax(0, 1fr) !important;
    min-width: 96px !important;
    max-width: calc(100% - 8px) !important;
    border: 1px solid color-mix(in srgb, var(--button-primary-background-fill) 72%, var(--border-color-primary)) !important;
    border-radius: 6px !important;
    background: color-mix(in srgb, var(--button-primary-background-fill) 15%, #111318) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent) inset !important;
    overflow: hidden !important;
    cursor: grab !important;
    touch-action: none !important;
}

#scene_director_editor .scene-director-timeline-preview.is-dragging .scene-director-timeline-clip {
    cursor: grabbing !important;
}

#scene_director_editor .scene-director-timeline-handle {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 6 !important;
    width: 12px !important;
    min-width: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    cursor: ew-resize !important;
    touch-action: none !important;
}

#scene_director_editor .scene-director-timeline-handle.is-start {
    left: 0 !important;
}

#scene_director_editor .scene-director-timeline-handle.is-end {
    right: 0 !important;
}

#scene_director_editor .scene-director-timeline-handle::after {
    content: "" !important;
    position: absolute !important;
    top: 24px !important;
    bottom: 8px !important;
    width: 2px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--body-text-color) 58%, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.12s ease !important;
}

#scene_director_editor .scene-director-timeline-handle.is-start::after {
    left: 4px !important;
}

#scene_director_editor .scene-director-timeline-handle.is-end::after {
    right: 4px !important;
}

#scene_director_editor .scene-director-timeline-clip:hover .scene-director-timeline-handle::after,
#scene_director_editor .scene-director-timeline-preview.is-dragging .scene-director-timeline-handle::after {
    opacity: 1 !important;
}

#scene_director_editor .scene-director-timeline-clip-media {
    display: flex !important;
    gap: 2px !important;
    min-width: 0 !important;
    padding: 4px !important;
    background: color-mix(in srgb, #050608 70%, transparent) !important;
    overflow: hidden !important;
}

#scene_director_editor .scene-director-timeline-ref {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 18px !important;
    height: 100% !important;
    border-radius: 4px !important;
    background: color-mix(in srgb, var(--input-background-fill) 78%, transparent) !important;
    overflow: hidden !important;
    font-style: normal !important;
}

#scene_director_editor .scene-director-timeline-ref img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#scene_director_editor .scene-director-timeline-ref span {
    color: var(--body-text-color-subdued) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

#scene_director_editor .scene-director-timeline-clip-body {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 2px !important;
    min-width: 0 !important;
    padding: 5px 6px !important;
}

#scene_director_editor .scene-director-timeline-clip-body b,
#scene_director_editor .scene-director-timeline-clip-body span,
#scene_director_editor .scene-director-timeline-clip-body small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#scene_director_editor .scene-director-timeline-clip-body b {
    color: var(--body-text-color) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

#scene_director_editor .scene-director-timeline-clip-body span {
    color: var(--body-text-color) !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

#scene_director_editor .scene-director-timeline-clip-body small {
    color: var(--body-text-color-subdued) !important;
    font-size: 10px !important;
    white-space: nowrap !important;
}

#scene_director_editor .scene-director-timeline-audio-segment,
#scene_director_editor .scene-director-timeline-prompt-segment {
    position: absolute !important;
    top: 18px !important;
    bottom: 5px !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 1px 5px !important;
    border-radius: 5px !important;
    color: var(--body-text-color) !important;
    font-size: 10px !important;
    line-height: 16px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

#scene_director_editor .scene-director-timeline-audio-segment {
    background: color-mix(in srgb, #2dd4bf 24%, var(--input-background-fill)) !important;
    border: 1px solid color-mix(in srgb, #2dd4bf 52%, var(--border-color-primary)) !important;
}

#scene_director_editor .scene-director-timeline-prompt-segment {
    background: color-mix(in srgb, #94a3b8 18%, var(--input-background-fill)) !important;
    border: 1px solid color-mix(in srgb, #94a3b8 42%, var(--border-color-primary)) !important;
}

#scene_director_editor .scene-director-timeline-empty {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--body-text-color-subdued) !important;
    font-size: 12px !important;
}

@container (max-width: 920px) {
    #scene_director_editor .scene-director-shot-grid {
        grid-template-columns: minmax(66px, 0.5fr) minmax(66px, 0.5fr) minmax(180px, 1.2fr) minmax(240px, 1.7fr) !important;
        grid-template-areas:
            "start end prompt prompt"
            "refs refs refs refs"
            "audio audio video video" !important;
    }

    #scene_director_editor .scene-director-ref-picker {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@container (max-width: 680px) {
    #scene_director_editor .scene-director-shot-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "title actions"
            "rule rule" !important;
        align-items: center !important;
        gap: 4px 8px !important;
    }

    #scene_director_editor .scene-director-shot-head b {
        grid-area: title !important;
    }

    #scene_director_editor .scene-director-shot-head > div {
        grid-area: actions !important;
        justify-content: end !important;
    }

    #scene_director_editor .scene-director-shot-head span {
        grid-area: rule !important;
        flex: 1 1 100% !important;
        white-space: normal !important;
    }

    #scene_director_editor .scene-director-shot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "start end"
            "prompt prompt"
            "refs refs"
            "audio video" !important;
    }

    #scene_director_editor .scene-director-ref-picker {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    #scene_director_editor .scene-director-ref-choice {
        aspect-ratio: 16 / 9 !important;
        min-height: 36px !important;
        padding: 2px !important;
    }

    #scene_director_editor .scene-director-ref-choice small {
        font-size: 9px !important;
    }
}

@container (max-width: 460px) {
    #scene_director_editor .scene-director-shot-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "start"
            "end"
            "prompt"
            "refs"
            "audio"
            "video" !important;
    }

    #scene_director_editor .scene-director-ref-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #scene_director_editor .scene-director-ref-choice {
        aspect-ratio: 2 / 1 !important;
    }

    #scene_director_media_files_row > .form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@container scene-director-shell (max-width: 760px) {
    #scene_director_media_preview .scene-director-media-grid {
        grid-template-columns: repeat(3, minmax(0, 128px)) !important;
    }
}

@container scene-director-shell (max-width: 430px) {
    #scene_director_media_preview .scene-director-media-grid {
        grid-template-columns: repeat(2, minmax(0, 128px)) !important;
    }
}

@media (max-width: 1520px) and (min-width: 1061px) {
    #scene_director_accordion.block > div:not(.wrap) > .column,
    #scene_director_accordion.block > div:not(.wrap) > .form {
        grid-template-columns: max-content minmax(340px, 420px) !important;
    }
}

@container scene-director-shell (max-width: 1060px) {
    #scene_director_accordion.block > div:not(.wrap) > .column,
    #scene_director_accordion.block > div:not(.wrap) > .form {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "toolbar"
            "media"
            "side"
            "editor"
            "prompt" !important;
    }

    #scene_director_toolbar_row > .form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #scene_director_settings_row > .form {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    }
}

@container scene-director-shell (max-width: 520px) {
    #scene_director_toolbar_row > .form,
    #scene_director_settings_row > .form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 1060px) {
    #scene_director_accordion.block > div:not(.wrap) > .column,
    #scene_director_accordion.block > div:not(.wrap) > .form {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "toolbar"
            "media"
            "side"
            "editor"
            "prompt" !important;
    }

    #scene_director_toolbar_row > .form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #scene_director_settings_row > .form {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    }
}

@media (max-width: 767px) {
    #scene_director_toolbar_row > .form,
    #scene_director_settings_row > .form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.gradio-container :is(.simpleai-batch-start-button, .simpleai-batch-start-button button) {
    border-color: color-mix(in srgb, #fdba74 78%, #f97316) !important;
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%) !important;
    color: #fff7ed !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 6px 14px rgba(249, 115, 22, 0.18) !important;
}

.gradio-container :is(.simpleai-batch-start-button, .simpleai-batch-start-button button):hover:not(:disabled),
.gradio-container :is(.simpleai-batch-start-button, .simpleai-batch-start-button button):focus-visible {
    border-color: #fed7aa !important;
    background: linear-gradient(180deg, #fdba74 0%, #f97316 100%) !important;
    color: #fff7ed !important;
}

.gradio-container :is(.simpleai-batch-stop-button, .simpleai-batch-stop-button button) {
    border-color: color-mix(in srgb, #fca5a5 74%, #dc2626) !important;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff5f5 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 6px 14px rgba(220, 38, 38, 0.18) !important;
}

.gradio-container :is(.simpleai-batch-stop-button, .simpleai-batch-stop-button button):hover:not(:disabled),
.gradio-container :is(.simpleai-batch-stop-button, .simpleai-batch-stop-button button):focus-visible {
    border-color: #fecaca !important;
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%) !important;
    color: #fff5f5 !important;
}

.gradio-container :is(.simpleai-batch-start-button, .simpleai-batch-stop-button):disabled,
.gradio-container :is(.simpleai-batch-start-button, .simpleai-batch-stop-button) button:disabled {
    opacity: 0.62 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

#pose_studio.sai-pose-studio-scene-entry,
#pose_studio.sai-pose-studio-scene-entry > *,
#pose_studio.sai-pose-studio-scene-entry .styler,
#pose_studio.sai-pose-studio-scene-entry .html-container,
#pose_studio.sai-pose-studio-scene-entry .prose,
#pose_studio.sai-pose-studio-scene-entry .contain,
#pose_studio.sai-pose-studio-scene-entry .padded,
#pose_studio.sai-pose-studio-scene-entry .form,
#pose_studio.sai-pose-studio-scene-entry .block,
#pose_studio.sai-pose-studio-scene-entry .wrap,
#pose_studio_scene_control_html,
#pose_studio_scene_control_html > *,
#pose_studio_scene_control_html > .prose,
#pose_studio_scene_control_html .prose,
#pose_studio_scene_control_html .html-container,
#pose_studio_scene_control_html .styler,
#pose_studio_scene_control_html .block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#pose_studio.sai-pose-studio-scene-entry {
    margin: 8px 0 12px !important;
}

#pose_studio.sai-pose-studio-scene-entry :where(div, section, article):not(#pose_studio_scene_control):not(.sai-pose-studio-scene-control) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#pose_studio.sai-pose-studio-scene-entry :where(.styler, .html-container, .prose, .block, .wrap, .contain, .padded) {
    padding: 0 !important;
    margin: 0 !important;
}

#pose_studio_scene_control_html p {
    margin: 0 !important;
}

.gradio-container .gr-group:has(> .styler > #pose_studio_scene_control_html),
.gradio-container .styler:has(> #pose_studio_scene_control_html) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.gradio-container .gr-group:has(> .styler > #pose_studio_scene_control_html) {
    margin: 8px 0 12px !important;
}

#pose_studio_scene_control.sai-pose-studio-scene-control {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

#pose_studio.sai-pose-studio-scene-entry .sai-pose-studio-scene-open,
#pose_studio_scene_control .sai-pose-studio-scene-open,
#pose_studio_scene_control button[data-pose-studio-scene-open] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 1px solid #fdba74 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%) !important;
    background-clip: border-box !important;
    color: #fff7ed !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    clip-path: inset(0 round 8px) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    cursor: pointer !important;
    transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease !important;
}

#pose_studio.sai-pose-studio-scene-entry .sai-pose-studio-scene-open::before,
#pose_studio.sai-pose-studio-scene-entry .sai-pose-studio-scene-open::after,
#pose_studio_scene_control button[data-pose-studio-scene-open]::before,
#pose_studio_scene_control button[data-pose-studio-scene-open]::after {
    display: none !important;
    content: none !important;
}

#pose_studio.sai-pose-studio-scene-entry .sai-pose-studio-scene-open:hover,
#pose_studio.sai-pose-studio-scene-entry .sai-pose-studio-scene-open:focus-visible,
#pose_studio_scene_control button[data-pose-studio-scene-open]:hover,
#pose_studio_scene_control button[data-pose-studio-scene-open]:focus-visible {
    border-color: #fed7aa !important;
    background: linear-gradient(180deg, #fdba74 0%, #f97316 100%) !important;
    color: #fff7ed !important;
    filter: none !important;
    transform: none !important;
    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#pose_studio.sai-pose-studio-scene-entry .sai-pose-studio-scene-open i,
#pose_studio_scene_control button[data-pose-studio-scene-open] i {
    color: currentColor !important;
    font-size: 13px !important;
}

#gaussian_studio.sai-gaussian-studio-scene-entry,
#gaussian_studio.sai-gaussian-studio-scene-entry > *,
#gaussian_studio.sai-gaussian-studio-scene-entry .styler,
#gaussian_studio.sai-gaussian-studio-scene-entry .html-container,
#gaussian_studio.sai-gaussian-studio-scene-entry .prose,
#gaussian_studio.sai-gaussian-studio-scene-entry .contain,
#gaussian_studio.sai-gaussian-studio-scene-entry .padded,
#gaussian_studio.sai-gaussian-studio-scene-entry .form,
#gaussian_studio.sai-gaussian-studio-scene-entry .block,
#gaussian_studio.sai-gaussian-studio-scene-entry .wrap,
#gaussian_studio_scene_control_html,
#gaussian_studio_scene_control_html > *,
#gaussian_studio_scene_control_html > .prose,
#gaussian_studio_scene_control_html .prose,
#gaussian_studio_scene_control_html .html-container,
#gaussian_studio_scene_control_html .styler,
#gaussian_studio_scene_control_html .block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#gaussian_studio.sai-gaussian-studio-scene-entry {
    margin: 8px 0 12px !important;
}

#gaussian_studio.sai-gaussian-studio-scene-entry :where(div, section, article):not(#gaussian_studio_scene_control):not(.sai-gaussian-studio-scene-control) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#gaussian_studio.sai-gaussian-studio-scene-entry :where(.styler, .html-container, .prose, .block, .wrap, .contain, .padded) {
    padding: 0 !important;
    margin: 0 !important;
}

#gaussian_studio_scene_control_html p {
    margin: 0 !important;
}

.gradio-container .gr-group:has(> .styler > #gaussian_studio_scene_control_html),
.gradio-container .styler:has(> #gaussian_studio_scene_control_html) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.gradio-container .gr-group:has(> .styler > #gaussian_studio_scene_control_html) {
    margin: 8px 0 12px !important;
}

#gaussian_studio_scene_control.sai-gaussian-studio-scene-control {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

#gaussian_studio.sai-gaussian-studio-scene-entry .sai-gaussian-studio-scene-open,
#gaussian_studio_scene_control .sai-gaussian-studio-scene-open,
#gaussian_studio_scene_control button[data-gaussian-studio-scene-open] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 1px solid #67e8f9 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #14b8a6 0%, #2563eb 100%) !important;
    color: #ecfeff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    clip-path: inset(0 round 8px) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    cursor: pointer !important;
    transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease !important;
}

#gaussian_studio.sai-gaussian-studio-scene-entry .sai-gaussian-studio-scene-open::before,
#gaussian_studio.sai-gaussian-studio-scene-entry .sai-gaussian-studio-scene-open::after,
#gaussian_studio_scene_control button[data-gaussian-studio-scene-open]::before,
#gaussian_studio_scene_control button[data-gaussian-studio-scene-open]::after {
    display: none !important;
    content: none !important;
}

#gaussian_studio.sai-gaussian-studio-scene-entry .sai-gaussian-studio-scene-open:hover,
#gaussian_studio.sai-gaussian-studio-scene-entry .sai-gaussian-studio-scene-open:focus-visible,
#gaussian_studio_scene_control button[data-gaussian-studio-scene-open]:hover,
#gaussian_studio_scene_control button[data-gaussian-studio-scene-open]:focus-visible {
    border-color: #cffafe !important;
    background: linear-gradient(180deg, #2dd4bf 0%, #2563eb 100%) !important;
    color: #ecfeff !important;
    filter: none !important;
    transform: none !important;
    outline: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#gaussian_studio.sai-gaussian-studio-scene-entry .sai-gaussian-studio-scene-open i,
#gaussian_studio_scene_control button[data-gaussian-studio-scene-open] i {
    color: currentColor !important;
    font-size: 13px !important;
}

#gaussian_studio_scene_control [data-gaussian-studio-scene-status] {
    width: 100% !important;
    min-height: 18px !important;
    display: block !important;
    color: var(--body-text-color-subdued, #aab4c8) !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: center !important;
}

#gaussian_studio_scene_control [data-gaussian-studio-scene-status].is-error {
    color: #fca5a5 !important;
}

#scene_panel::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
}
#scene_panel::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.4) !important;
    border-radius: 10px !important;
}
#scene_panel::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.6) !important;
}
#scene_panel::-webkit-scrollbar-track {
    background-color: transparent !important;
}
/* 针对Webkit内核浏览器（如Chrome、Safari） */
#scrollable-box::-webkit-scrollbar {
    width: 5px !important;
}
#scrollable-box::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
}
#scrollable-box::-webkit-scrollbar-track {
    background-color: transparent;
}

#advanced_column,
#scrollable-box-hidden,
.scrollable-box-hidden {
  max-height: 100vh;  /* 设定最大高度 */
  overflow-y: auto;   /* 启用垂直滚动条 */
  position: sticky;   /* 设为sticky */
  top: 0;             /* 设置sticky的顶部位置 */
  z-index: 1;

  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 和 Edge */
}

/* 针对Webkit内核浏览器（如Chrome、Safari） */
#advanced_column::-webkit-scrollbar,
#scrollable-box-hidden::-webkit-scrollbar,
.scrollable-box-hidden::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
  #advanced_column {
    width: min(var(--advanced-column-width), 100%) !important;
    max-width: min(var(--advanced-column-width), 100%) !important;
    min-width: min(var(--advanced-column-width), 100%) !important;
    flex: 0 0 min(var(--advanced-column-width), 100%) !important;
  }
}

html.simpai-main-layout-stacked .simpai-main-workspace-row,
.simpai-main-workspace-row.simpai-main-workspace-stacked {
  flex-direction: column !important;
  align-items: stretch !important;
}

html.simpai-main-layout-stacked .simpai-main-workspace-row > *,
.simpai-main-workspace-row.simpai-main-workspace-stacked > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html.simpai-main-layout-stacked #advanced_column,
.simpai-main-workspace-row.simpai-main-workspace-stacked #advanced_column {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  max-height: none !important;
}

@media (max-width: 960px) {
  div:has(> #advanced_column) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  div:has(> #advanced_column) > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #advanced_column {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-height: none !important;
  }
}
#advanced_column::-webkit-scrollbar-thumb,
#scrollable-box-hidden::-webkit-scrollbar-thumb,
.scrollable-box-hidden::-webkit-scrollbar-thumb {
    background-color: transparent;
}
#advanced_column::-webkit-scrollbar-track,
#scrollable-box-hidden::-webkit-scrollbar-track,
.scrollable-box-hidden::-webkit-scrollbar-track {
    background-color: transparent;
}

.prompt-container {
  position: relative;
  width: 100%;
}

#prompt_action_row {
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

#prompt_action_row > * {
  min-width: 0 !important;
}

#prompt_text_column,
#prompt_aux_column,
#prompt_submit_column {
  align-self: stretch !important;
  gap: 0 !important;
}

#prompt_text_column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

#prompt_aux_column {
  flex: 0 0 124px !important;
  min-width: 124px !important;
}

#prompt_submit_column {
  flex: 0 0 112px !important;
  min-width: 112px !important;
}

#prompt_text_column > .form,
#prompt_aux_column > .form,
#prompt_submit_column > .form {
  margin-top: 0 !important;
  min-height: 0 !important;
}

#prompt_text_column > .form {
  height: 100% !important;
}

#prompt_text_column .prompt-container {
  height: 100% !important;
}

#prompt_aux_column,
#prompt_submit_column {
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
}

#prompt_aux_column > .form,
#prompt_submit_column > .form {
  flex: 1 1 auto !important;
}

#prompt_action_row :is(#random_prompt_button, #super_prompter_button, #generate_button, #load_parameter_button, #skip_button, #stop_button) {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#prompt_aux_column > :is(button, .button),
#prompt_submit_column > :is(button, .button) {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#prompt_action_row :is(#generate_button, #generate_button button) {
  border-color: color-mix(in srgb, #fdba74 78%, #f97316) !important;
  background: linear-gradient(180deg, #fb923c 0%, #f97316 100%) !important;
  color: #fff7ed !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 18px rgba(249, 115, 22, 0.22) !important;
}

#prompt_action_row :is(#generate_button, #generate_button button):hover:not(:disabled) {
  border-color: #fed7aa !important;
  background: linear-gradient(180deg, #fdba74 0%, #f97316 100%) !important;
}

.simpleai-prompt-recommendation-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.simpleai-prompt-recommendation-modal.is-open {
  display: flex;
}

.simpleai-prompt-recommendation-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 22, 0.56);
}

.simpleai-prompt-recommendation-panel {
  position: relative;
  width: min(780px, calc(100vw - 24px));
  max-height: min(720px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: var(--body-background-fill, #101318);
  color: var(--body-text-color, #f8fafc);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.36);
}

.simpleai-prompt-recommendation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.simpleai-prompt-recommendation-header h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.simpleai-prompt-recommendation-header p {
  margin: 4px 0 0;
  color: var(--body-text-color-subdued, #aeb6c2);
  font-size: 12px;
  line-height: 1.35;
}

.simpleai-prompt-recommendation-icon-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 7px;
}

.simpleai-prompt-recommendation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 12px;
}

.simpleai-prompt-recommendation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
}

.simpleai-prompt-recommendation-item-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.simpleai-prompt-recommendation-item-prompt {
  margin-top: 5px;
  color: var(--body-text-color, #f8fafc);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.simpleai-prompt-recommendation-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.simpleai-prompt-recommendation-item-meta span {
  max-width: 180px;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.14);
  color: var(--body-text-color-subdued, #aeb6c2);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simpleai-prompt-recommendation-apply {
  min-width: 72px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 7px;
  white-space: nowrap;
}

.simpleai-prompt-recommendation-empty {
  padding: 28px 12px;
  color: var(--body-text-color-subdued, #aeb6c2);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 640px) {
  .simpleai-prompt-recommendation-modal {
    padding: 8px;
    align-items: flex-end;
  }

  .simpleai-prompt-recommendation-panel {
    width: 100%;
    max-height: calc(100vh - 18px);
  }

  .simpleai-prompt-recommendation-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .simpleai-prompt-recommendation-apply {
    width: 100%;
  }
}

@media (max-width: 640px), (pointer: coarse) and (max-width: 900px) {
  #prompt_action_row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "prompt prompt prompt"
      "aux aux submit";
    gap: 6px !important;
    align-items: stretch !important;
    flex-wrap: initial !important;
  }

  #prompt_text_column {
    grid-area: prompt;
    width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  #prompt_aux_column,
  #prompt_submit_column {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    align-self: stretch !important;
    gap: 6px !important;
  }

  #prompt_aux_column {
    grid-area: aux;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #prompt_submit_column {
    grid-area: submit;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  #prompt_text_column > .form,
  #prompt_text_column .prompt-container {
    height: auto !important;
  }

  #positive_prompt textarea {
    min-height: 78px !important;
    max-height: 88px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #prompt_action_row :is(#random_prompt_button, #super_prompter_button, #generate_button, #load_parameter_button, #skip_button, #stop_button) {
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  #prompt_action_row :is(#generate_button, #load_parameter_button, #skip_button, #stop_button) {
    font-size: 13px !important;
    font-weight: 800 !important;
  }
}

.selected-styles-preview {
  position: absolute;
  left: 0.4em;
  right: 5.1em;
  bottom: 0.4em;
  z-index: 6;
  min-height: auto !important;
}

.selected-styles-preview > .html-container,
.selected-styles-preview > .prose {
  padding: 0 !important;
  min-height: auto !important;
  background: transparent !important;
}

.selected-style-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  flex-wrap: wrap;
}

.selected-style-summary.is-empty {
  display: none;
}

button.selected-style-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: top !important;
  border: none !important;
  background: var(--secondary-400) !important;
  color: var(--neutral-100) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 0.5em !important;
  min-height: 22px !important;
  height: 22px !important;
  width: auto !important;
  cursor: default !important;
  font-size: 0.85em !important;
  line-height: 1 !important;
  margin: 0 !important;
  opacity: 0.5;
  box-shadow: none !important;
}

button.selected-style-chip:hover {
  background: var(--secondary-400) !important;
  opacity: 0.9;
}

.clear-prompt-btn {
  width: 20px;
  height: 24px;
  position: absolute;
  right: 1px;
  top: 1px;
  opacity: 0.1;
  visibility: visible;
  z-index: 10;
  transform: scale(0.6);
  transform-origin: right top;
  transition: transform 0.15s ease-out !important;
}

.prompt-container:hover .clear-prompt-btn {
  opacity: 0.6;
  visibility: visible;
}

.clear-prompt-btn:hover {
  background: var(--button-secondary-background-fill, lightgray);
  color: var(--button-hover-text-color, #000);
  opacity: 0.6;
  visibility: visible;
  transform: scale(1);
}

.model-gallery .thumbnails.scroll-hide,
.lora-gallery .thumbnails.scroll-hide {
  flex-wrap: wrap !important;
  transform: translateY(-10px); /* 向上位移10像素 */
  position: relative; /* 确保transform生效 */
  min-height: 80px;
}

#style_visual_container {
  padding: 8px !important;
  margin: 8px !important;
}
.style_grid {
  display: grid !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 8px !important;
  max-height: 900px !important; /* 限制最大高度，防止纵向拉伸过长 */
  min-height: 100px;
  /* 基础方案：使用 Media Queries 强制控制列数 */
  /* 默认（小屏/窄屏）：3 列 */
  grid-template-columns: repeat(3, 1fr) !important;
}

/* 中等屏幕：4 列 */
@media (min-width: 1280px) {
  .style_grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 大屏幕：5 列 */
@media (min-width: 1600px) {
  .style_grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
.style_item {
  display: block !important;
  width: 100% !important;
  min-width: 80px !important; /* 防止搜索时过度缩小 */
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: visible !important;
}
.style-button {
  width: 100% !important;
  height: 100% !important;
  min-height: 80px !important; /* 确保图标高度 */
  border-radius: 8px !important;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 6px !important;
  color: white !important;
  font-size: 12px !important; /* 稍微调大字体 */
  font-weight: 600 !important;
  text-shadow: 1px 1px 3px black, -1px -1px 3px black, 1px -1px 3px black, -1px 1px 3px black !important;
  transition: transform 0.1s ease, border-color 0.2s !important;
}
.style-button:hover {
  transform: scale(1.1);
}
.style_item,
.style_item img,
.compact-cb {
  border: none !important;
}
button.style-button.primary {
  border: 3px solid #f97316 !important;
  box-shadow: 0 0 8px rgba(255,69,0,0.6) !important;
  transform: scale(1.05);
  z-index: 1;
  animation: border-pulse 0.8s infinite alternate;
}

button.style-button.primary::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  background: #f97316;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  text-shadow: none;
}

@media (max-width: 640px), (pointer: coarse) and (max-width: 900px) {
  .contain .tabs .tabitem.style_selections_tab,
  #style_visual_layout_container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #style_visual_layout_container {
    padding: 0 !important;
    margin: 0 !important;
  }

  #style_grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  #style_grid > .html-container,
  #style_grid > .html-container > .prose.style_grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #style_grid > .html-container > .prose.style_grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 8px 0 !important;
    overflow-x: hidden !important;
  }

  .style_item {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .style-button {
    min-height: 0 !important;
    border-radius: 5px !important;
    border-width: 1px !important;
    font-size: 10px !important;
    line-height: 1.12 !important;
    padding: 0 3px 4px !important;
  }

  button.style-button.primary {
    border-width: 2px !important;
    transform: none;
  }

  button.style-button.primary::after {
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    font-size: 10px;
  }
}


.tab-nav.scroll-hide {
  position: relative !important;
  top: 0;
  z-index: 1000;
  background: var(--background-fill-primary);
  display: flex !important;
  flex-wrap: nowrap;
}
.tab-nav.scroll-hide > button {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 50px;
  padding: 4px 8px;
}
#finished_images_catalog {
  border-radius: 4px 4px 4px 4px !important;
  border: 1px solid var(--border-color-primary) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#finished_images_catalog > button.label-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#finished_images_catalog > button.label-wrap > span:not(.icon) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#finished_images_catalog[data-simpleai-finished-catalog-hitbox-collapsed="1"] > :not(button.label-wrap),
#finished_images_catalog.simpai-finished-catalog-hitbox-collapsed > :not(button.label-wrap),
#finished_images_catalog:not(:has(> button.label-wrap.open)):not(:has(> button.label-wrap[aria-expanded="true"])) > :not(button.label-wrap) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

html.simpai-main-gallery-browser-closed #finished_gallery:not([data-simpleai-post-generation-surface="1"]),
html.simpai-main-gallery-browser-closed #final_gallery:not([data-simpleai-post-generation-surface="1"]),
html.simpai-main-gallery-browser-closed #progress_video,
html.simpai-main-gallery-browser-closed #video_player,
html.simpai-main-gallery-browser-closed #finished_gallery_browser_panel,
html.simpai-main-gallery-browser-closed #gallery_browser_toolbar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#gallery_media_switch_row {
  position: relative;
  display: inline-grid !important;
  grid-template-columns: 1fr 1fr;
  width: 190px;
  padding: 3px;
  gap: 0;
  margin: 4px auto 10px;
  justify-self: center;
  align-self: center;
  border: 1px solid var(--border-color-primary);
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-fill-secondary) 82%, #000 18%);
  overflow: visible;
}

#gallery_media_switch_row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--button-primary-background-fill);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transform: translateX(0);
  transition: transform 160ms ease;
}

#gallery_media_switch_row[data-mode="video"]::before {
  transform: translateX(100%);
}

#gallery_media_switch_row button {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--body-text-color-subdued);
  font-size: 12px;
  font-weight: 600;
}

#gallery_media_switch_row button.active,
#gallery_media_switch_row button[aria-pressed="true"] {
  color: var(--button-primary-text-color);
}

#gallery_index_bridge {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#gallery_browser_toolbar,
.simpleai-main-gallery-browser {
  display: grid !important;
  grid-template-columns: minmax(max-content, 1fr) 150px minmax(max-content, 1fr);
  grid-template-areas: "left switch right";
  align-items: center !important;
  justify-items: start !important;
  justify-content: stretch !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 4px auto 10px;
  padding: 0 0 4px;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#gallery_browser_toolbar > *,
.simpleai-main-gallery-browser > * {
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: max-content !important;
  min-width: max-content !important;
  justify-self: center !important;
}

#gallery_browser_left,
#gallery_browser_right,
.simpleai-main-gallery-browser-left,
.simpleai-main-gallery-browser-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: max-content;
  flex: 0 0 auto !important;
}

#gallery_browser_left > *,
#gallery_browser_right > *,
#gallery_browser_switch > *,
.gallery-browser-folder-group,
.gallery-browser-folder-group > *,
.simpleai-main-gallery-browser-left > *,
.simpleai-main-gallery-browser-right > *,
.simpleai-main-gallery-browser-switch > * {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

#gallery_browser_folder_group,
.gallery-browser-folder-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  min-width: max-content !important;
  width: max-content !important;
  max-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#gallery_browser_folder_group > .form,
.gallery-browser-folder-group > .form {
  flex: 0 0 156px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  margin: 0 !important;
  overflow: visible !important;
}

#gallery_browser_folder_group > button,
.gallery-browser-folder-group > button {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  margin: 0 !important;
}

#gallery_browser_left,
.simpleai-main-gallery-browser-left {
  grid-area: left;
  justify-content: flex-end !important;
}

#gallery_browser_right,
.simpleai-main-gallery-browser-right {
  grid-area: right;
  justify-content: flex-start !important;
}

#gallery_browser_switch,
.simpleai-main-gallery-browser-switch {
  grid-area: switch;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 150px !important;
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
  overflow: visible !important;
}

#gallery_browser_toolbar > :has(#gallery_browser_left),
.simpleai-main-gallery-browser > :has(.simpleai-main-gallery-browser-left) {
  grid-area: left !important;
  justify-self: end !important;
}

#gallery_browser_toolbar > :has(#gallery_browser_switch),
.simpleai-main-gallery-browser > :has(.simpleai-main-gallery-browser-switch) {
  grid-area: switch !important;
  justify-self: center !important;
}

#gallery_browser_toolbar > :has(#gallery_browser_right),
.simpleai-main-gallery-browser > :has(.simpleai-main-gallery-browser-right) {
  grid-area: right !important;
  justify-self: start !important;
}

#gallery_browser_toolbar #gallery_media_switch_row,
.simpleai-main-gallery-browser #gallery_media_switch_row {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  margin: 0 !important;
}

#gallery_browser_toolbar .form:has(#gallery_media_switch_row),
#gallery_browser_toolbar .block:has(#gallery_media_switch_row),
#gallery_browser_switch .form:has(#gallery_media_switch_row),
#gallery_browser_switch .block:has(#gallery_media_switch_row),
#gallery_browser_toolbar .form:has(#gallery_browser_status),
#gallery_browser_toolbar .block:has(#gallery_browser_status),
#gallery_browser_toolbar .form:has(#gallery_browser_folder_group),
#gallery_browser_toolbar .block:has(#gallery_browser_folder_group),
#gallery_browser_toolbar .form:has(#gallery_browser_prev_folder_btn),
#gallery_browser_toolbar .block:has(#gallery_browser_prev_folder_btn),
#gallery_browser_toolbar .form:has(#gallery_browser_next_folder_btn),
#gallery_browser_toolbar .block:has(#gallery_browser_next_folder_btn),
#gallery_browser_toolbar .form:has(#gallery_browser_refresh_btn),
#gallery_browser_toolbar .block:has(#gallery_browser_refresh_btn),
#gallery_browser_toolbar .form:has(#gallery_browser_more_btn),
#gallery_browser_toolbar .block:has(#gallery_browser_more_btn) {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  overflow: visible !important;
}

.simpleai-main-gallery-browser #gallery_browser_folder,
.simpleai-main-gallery-browser select[data-gallery-browser-folder] {
  width: 156px;
  min-width: 156px;
  max-width: 156px;
  height: 30px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border-color-primary);
  border-radius: 7px;
  background: var(--input-background-fill);
  color: var(--body-text-color);
  font-size: 13px;
}

#gallery_browser_folder {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
}

#gallery_browser_left .form:has(#gallery_browser_folder),
#gallery_browser_toolbar .form:has(#gallery_browser_folder),
#gallery_browser_folder_group .form:has(#gallery_browser_folder),
#gallery_browser_folder_group .block:has(#gallery_browser_folder) {
  flex: 0 0 156px !important;
  flex-grow: 0 !important;
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  overflow: visible !important;
}

#gallery_browser_folder label,
#gallery_browser_folder .wrap,
#gallery_browser_folder .wrap-inner,
#gallery_browser_folder .secondary-wrap,
#gallery_browser_folder .container,
#gallery_browser_folder > div {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#gallery_browser_folder .secondary-wrap {
  position: relative !important;
}

#gallery_browser_folder .icon-wrap {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

#gallery_browser_folder .dropdown-arrow {
  width: 18px !important;
  height: 18px !important;
}

#gallery_browser_folder [style*="overflow"] {
  overflow-x: hidden !important;
}

#gallery_browser_folder,
#gallery_browser_folder * {
  scrollbar-width: none !important;
}

#gallery_browser_folder::-webkit-scrollbar,
#gallery_browser_folder *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#gallery_browser_folder input,
#gallery_browser_folder select,
#gallery_browser_folder [role="combobox"] {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 34px !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#gallery_browser_folder.simpleai-gallery-browser-folder-overlay input {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: transparent !important;
  text-shadow: none !important;
}

#gallery_browser_folder.simpleai-gallery-browser-folder-overlay input::placeholder {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

#gallery_browser_folder.simpleai-gallery-browser-folder-overlay::before {
  content: attr(data-sai-folder-label);
  position: absolute;
  z-index: 4;
  left: 12px;
  right: 34px;
  top: 0;
  bottom: 0;
  color: var(--body-text-color);
  font-size: 13px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.simpleai-main-gallery-browser #gallery_browser_refresh_btn,
.simpleai-main-gallery-browser #gallery_browser_prev_folder_btn,
.simpleai-main-gallery-browser #gallery_browser_next_folder_btn,
.simpleai-main-gallery-browser #gallery_browser_more_btn,
.simpleai-main-gallery-browser button {
  min-width: 0 !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#gallery_browser_refresh_btn,
#gallery_browser_toolbar .form:has(#gallery_browser_refresh_btn),
#gallery_browser_toolbar .block:has(#gallery_browser_refresh_btn) {
  flex: 0 0 68px !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
}

#gallery_browser_prev_folder_btn,
#gallery_browser_next_folder_btn,
#gallery_browser_toolbar .form:has(#gallery_browser_prev_folder_btn),
#gallery_browser_toolbar .block:has(#gallery_browser_prev_folder_btn),
#gallery_browser_toolbar .form:has(#gallery_browser_next_folder_btn),
#gallery_browser_toolbar .block:has(#gallery_browser_next_folder_btn) {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#gallery_browser_prev_folder_btn,
#gallery_browser_next_folder_btn,
#gallery_browser_prev_folder_btn button,
#gallery_browser_next_folder_btn button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 !important;
  font-size: 14px !important;
}

#gallery_browser_status,
#gallery_browser_toolbar .form:has(#gallery_browser_status),
#gallery_browser_toolbar .block:has(#gallery_browser_status) {
  flex: 0 0 96px !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  margin-left: 0 !important;
  overflow: hidden !important;
}

#gallery_browser_more_btn,
#gallery_browser_toolbar .form:has(#gallery_browser_more_btn),
#gallery_browser_toolbar .block:has(#gallery_browser_more_btn) {
  flex: 0 0 90px !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

#gallery_browser_refresh_btn button,
#gallery_browser_more_btn button {
  width: 100% !important;
}

.simpleai-main-gallery-browser #gallery_browser_more_btn button:disabled,
.simpleai-main-gallery-browser button.is-disabled,
.simpleai-main-gallery-browser button:disabled {
  opacity: 0.46 !important;
  cursor: default !important;
}

#gallery_browser_status,
.simpleai-main-gallery-browser [data-gallery-browser-status] {
  flex: 0 0 96px !important;
  width: 96px !important;
  max-width: 96px !important;
  min-width: 96px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--body-text-color-subdued);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

#gallery_browser_status .prose,
#gallery_browser_status .md,
#gallery_browser_status p {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

#gallery_browser_status.is-error,
.simpleai-main-gallery-browser [data-gallery-browser-status].is-error {
  color: #fca5a5;
}

#gallery_browser_right .simpleai-gallery-frost-control,
.simpleai-main-gallery-browser-right .simpleai-gallery-frost-control {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  flex: 0 0 74px !important;
  width: 74px !important;
  min-width: 74px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 88%, #000 12%) !important;
  border-color: color-mix(in srgb, var(--border-color-primary) 78%, transparent) !important;
  opacity: 0.72 !important;
  font-size: 12px !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#gallery_browser_right .simpleai-gallery-frost-control::before,
.simpleai-main-gallery-browser-right .simpleai-gallery-frost-control::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--body-text-color-subdued) 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color-primary) 70%, transparent);
}

#gallery_browser_right .simpleai-gallery-frost-control:has(input:checked)::before,
.simpleai-main-gallery-browser-right .simpleai-gallery-frost-control:has(input:checked)::before {
  background: var(--button-primary-background-fill);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--button-primary-background-fill) 18%, transparent);
}

#gallery_browser_right .simpleai-gallery-frost-control input,
.simpleai-main-gallery-browser-right .simpleai-gallery-frost-control input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 700px) {
  #gallery_browser_toolbar,
  .simpleai-main-gallery-browser {
    grid-template-columns: max-content max-content;
    grid-template-areas:
      "left left"
      "switch right";
    width: fit-content;
    max-width: calc(100% - 14px);
    gap: 8px !important;
  }

  #gallery_browser_left,
  #gallery_browser_right,
  .simpleai-main-gallery-browser-left,
  .simpleai-main-gallery-browser-right {
    justify-content: center !important;
  }
}

@media (max-width: 560px) {
  #gallery_browser_toolbar,
  .simpleai-main-gallery-browser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "switch"
      "right";
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #gallery_browser_toolbar > :has(#gallery_browser_left),
  .simpleai-main-gallery-browser > :has(.simpleai-main-gallery-browser-left),
  #gallery_browser_left,
  .simpleai-main-gallery-browser-left {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  #gallery_browser_left,
  .simpleai-main-gallery-browser-left {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #gallery_browser_toolbar .form:has(#gallery_browser_status),
  #gallery_browser_toolbar .block:has(#gallery_browser_status),
  #gallery_browser_toolbar .form:has(#gallery_browser_refresh_btn),
  #gallery_browser_toolbar .block:has(#gallery_browser_refresh_btn) {
    min-width: 0 !important;
  }
}

.simpleai-gallery-frost-control {
  position: absolute !important;
  z-index: 3 !important;
  left: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 22px !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 1px solid rgba(31, 143, 122, 0.24) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 72%, transparent) !important;
  color: var(--body-text-color-subdued) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0.64 !important;
  user-select: none !important;
}

.simpleai-gallery-frost-control:hover {
  opacity: 0.94 !important;
  border-color: rgba(31, 143, 122, 0.42) !important;
}

.simpleai-gallery-frost-control input {
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

#main_content {
  overflow: visible !important;
  contain: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  position: relative;
}

div:has(> #main_content) {
  min-width: 0 !important;
  max-width: 100% !important;
}
/* 新增按钮容器高度设置 */
button.gallery-item {
  max-height: 68px; /* 或任意需要的固定高度 */
  display: flex;  /* 启用flex布局 */
}

html.simpai-gallery-frost-enabled #finished_gallery.simpleai-gallery-frost-multi:not([data-sai-frost-revealed="1"]) .grid-wrap .gallery-item,
html.simpai-gallery-frost-enabled #final_gallery.simpleai-gallery-frost-multi:not([data-sai-frost-revealed="1"]) .grid-wrap .gallery-item {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

html.simpai-gallery-frost-enabled #finished_gallery.simpleai-gallery-frost-multi:not([data-sai-frost-revealed="1"]) .grid-wrap .gallery-item img,
html.simpai-gallery-frost-enabled #finished_gallery.simpleai-gallery-frost-multi:not([data-sai-frost-revealed="1"]) .grid-wrap .gallery-item video,
html.simpai-gallery-frost-enabled #final_gallery.simpleai-gallery-frost-multi:not([data-sai-frost-revealed="1"]) .grid-wrap .gallery-item img,
html.simpai-gallery-frost-enabled #final_gallery.simpleai-gallery-frost-multi:not([data-sai-frost-revealed="1"]) .grid-wrap .gallery-item video {
  filter: blur(18px) saturate(0.72) brightness(0.82) !important;
  transform: scale(1.045) !important;
}

html.simpai-gallery-frost-enabled #finished_gallery.simpleai-gallery-frost-multi:not([data-sai-frost-revealed="1"]) .grid-wrap .gallery-item::after,
html.simpai-gallery-frost-enabled #final_gallery.simpleai-gallery-frost-multi:not([data-sai-frost-revealed="1"]) .grid-wrap .gallery-item::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background:
      radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 32%, rgba(0, 0, 0, 0.22) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
}

/* Modal styles for missing model download */
.sai-floating-shell {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.simpleai-floating-host {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
}

.simpleai-floating-host > * {
  pointer-events: auto;
}

.sai-gradio-hidden-bridge {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#gallery_browser_payload.sai-gradio-hidden-bridge,
#gallery_browser_state.sai-gradio-hidden-bridge,
#gallery_media_switch_request.sai-gradio-hidden-bridge,
#gallery_browser_load_btn.sai-gradio-hidden-bridge {
  display: block !important;
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#gallery_browser_payload.sai-gradio-hidden-bridge textarea,
#gallery_browser_state.sai-gradio-hidden-bridge textarea,
#gallery_media_switch_request.sai-gradio-hidden-bridge textarea {
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

.simpleai-floating-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 5px 8px;
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid var(--border-color-primary);
  background: color-mix(in srgb, var(--background-fill-secondary) 88%, transparent);
  color: var(--body-text-color);
  font-weight: 700;
}

.simpleai-floating-titlebar:active {
  cursor: grabbing;
}

.simpleai-floating-close {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: var(--button-secondary-background-fill);
  color: var(--button-secondary-text-color);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.simpleai-floating-portal-node,
#identity_dialog_content,
#missing_model_modal_content,
#model_browser_modal_content,
#user_personal_wildcards_modal_content,
#restore_defaults_panel_content {
  position: fixed !important;
  pointer-events: auto !important;
}

.simpleai-floating-placeholder {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
}

#identity_dialog,
#identity_dialog_content,
#missing_model_modal,
#missing_model_modal_content,
#model_browser_modal,
#model_browser_modal_content,
#user_personal_wildcards_modal,
#user_personal_wildcards_modal_content,
#restore_defaults_panel {
  position: fixed !important;
  pointer-events: auto !important;
}

.sai-floating-card {
  box-sizing: border-box;
}

.sai-floating-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sai-floating-panel .sai-floating-card {
  pointer-events: auto;
}

.restore-defaults-panel {
  background-color: rgba(0, 0, 0, 0.48);
}

.restore-defaults-card {
  width: min(460px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow: auto;
}

#identity_dialog_content,
#identity_dialog.identity_note,
#identity_dialog .identity_note,
.sai-floating-shell.identity_note {
  position: fixed !important;
  top: 76px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(760px, calc(100vw - 48px)) !important;
  min-width: min(760px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 140px) !important;
  z-index: 1001 !important;
  pointer-events: auto !important;
}

#identity_dialog_content,
.simpleai-identity-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 122, 37, 0.13), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(74, 163, 255, 0.11), transparent 30%),
    color-mix(in srgb, var(--background-fill-primary) 94%, #000 6%) !important;
  color: var(--body-text-color) !important;
  border: 1px solid var(--border-color-primary) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
}

#identity_dialog_content .tabitem,
#identity_dialog_content .form,
#identity_dialog_content .gradio-container,
#identity_dialog_content .tabs {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#identity_dialog_content .tabitem {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  max-height: calc(100vh - 170px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 0 0 18px 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 122, 37, 0.13), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(74, 163, 255, 0.11), transparent 30%),
    color-mix(in srgb, var(--background-fill-primary) 94%, #000 6%) !important;
}

#identity_dialog_content > .tab-wrapper > .tab-container,
#identity_dialog_content > .tab-wrapper > .overflow-menu,
#identity_dialog_content .tab-container,
#identity_dialog_content .overflow-menu {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

#identity_dialog_content > .tab-wrapper {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

#identity_dialog_content *,
.simpleai-identity-card * {
  color: inherit;
}

#identity_dialog_content,
#identity_dialog_content .prose,
#identity_dialog_content label,
#identity_dialog_content input,
#identity_dialog_content textarea,
#identity_dialog_content button,
#identity_dialog_content select {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

#identity_dialog_content h1,
#identity_dialog_content h2,
#identity_dialog_content h3,
#identity_dialog_content h4 {
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin: 0 0 4px !important;
}

#identity_dialog_content .tab-container button {
  font-size: 14px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
}

#identity_dialog_content .row {
  gap: 12px !important;
}

#identity_dialog_content .tabitem > .row:first-of-type {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  padding: 14px 16px !important;
  border: 1px solid var(--border-color-primary) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 82%, transparent) !important;
}

#identity_dialog_content .tabitem > .row:first-of-type > .column {
  min-width: 0 !important;
}

#identity_dialog_content .tabitem > .row:first-of-type .note_info {
  padding: 0 !important;
}

#identity_dialog_content .tabitem > .row:first-of-type .note_info p,
#identity_dialog_content .tabitem > .row:first-of-type .note_info h1,
#identity_dialog_content .tabitem > .row:first-of-type .note_info h2,
#identity_dialog_content .tabitem > .row:first-of-type .note_info h3 {
  margin: 0 !important;
}

#identity_dialog_content .tabitem > .row:first-of-type .note_info:first-child {
  font-size: 13px !important;
}

#identity_dialog_content .tabitem > .row:nth-of-type(2):not([style*="display: none"]),
#identity_dialog_content #identity_input_row {
  display: grid !important;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
}

#identity_dialog_content .tabitem > .row:nth-of-type(2) > .column,
#identity_dialog_content #identity_input_row > .column {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--border-color-primary) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 80%, transparent) !important;
}

#identity_dialog_content .identity_flow_note {
  padding: 12px 14px !important;
  border: 1px solid var(--border-color-primary) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 78%, transparent) !important;
  color: var(--body-text-color-subdued) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#identity_dialog_content .identity_flow_note .wrap,
#identity_dialog_content .identity_flow_note [data-testid="markdown"],
#identity_dialog_content .identity_flow_note .prose,
#identity_dialog_content .identity_flow_note p {
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#identity_dialog_content .tabitem > .row:nth-of-type(n+3):not([style*="display: none"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
}

#identity_dialog_content .tabitem > .row:nth-of-type(n+3) input {
  min-height: 42px !important;
}

#identity_dialog_content .tabitem > .row:nth-of-type(n+3) button {
  min-width: 132px !important;
  white-space: normal !important;
}

#identity_vcode_row:has(#identity_vcode_input.hidden):has(#identity_verify_button.hidden),
#identity_phrase_row:has(#identity_phrase_input.hidden):has(#identity_phrases_set_button.hidden):has(#identity_phrases_confirm_button.hidden):has(#identity_confirm_button.hidden):has(#identity_unbind_button.hidden) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#identity_dialog_content .tabitem > .row[style*="display: none"],
#identity_dialog_content .tabitem > .row.hide,
#identity_dialog_content .tabitem > .row.hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#identity_dialog_content > .tab-wrapper,
#identity_dialog_content .tab-wrapper,
#identity_dialog_content .tabitem > .form,
#identity_dialog_content .tabitem > .block,
#identity_dialog_content .tabitem > .column {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

#identity_dialog_content .tabitem > .row:empty,
#identity_dialog_content .tabitem > .block:empty,
#identity_dialog_content [data-testid="status-tracker"].hide {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#identity_dialog_content input,
#identity_dialog_content textarea,
#identity_dialog_content select,
#identity_dialog_content .wrap {
  min-height: 38px !important;
}

#identity_dialog_content .image-container,
#identity_dialog_content .image-frame,
#identity_dialog_content [data-testid="image"] {
  max-height: 250px !important;
}

#identity_dialog_content .upload-container,
#identity_dialog_content .image-container,
#identity_dialog_content [data-testid="image"] {
  min-height: 230px !important;
}

#identity_dialog_content .identity_qr {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 250px !important;
  margin: 0 auto !important;
}

#identity_dialog_content .identity_qr,
#identity_dialog_content .identity_qr > .wrap,
#identity_dialog_content .identity_qr .wrap,
#identity_dialog_content .identity_qr .image-container,
#identity_dialog_content .identity_qr .image-frame,
#identity_dialog_content .identity_qr [data-testid="image"],
#identity_dialog_content .identity_qr [data-testid="image"] > div {
  width: 100% !important;
  min-height: 250px !important;
  height: 250px !important;
  max-height: 250px !important;
}

#identity_dialog_content .identity_qr img,
#identity_dialog_content .identity_qr canvas {
  max-width: 100% !important;
  max-height: 230px !important;
  object-fit: contain !important;
}

#identity_dialog_content .identity_qr .icon-button-wrapper.top-panel.hide-top-corner {
  display: flex !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 3 !important;
  opacity: 0.9 !important;
}

#identity_dialog_content .input_note_info {
  padding: 0 0 10px !important;
  color: var(--body-text-color) !important;
  font-weight: 700 !important;
}

#identity_input_id_info,
#identity_input_id_info .wrap,
#identity_input_id_info [data-testid="markdown"],
#identity_input_id_info .prose,
#identity_input_id_info p {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#identity_dialog_content .identity_input2 input {
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--background-fill-primary) 92%, #000 8%) !important;
}

#identity_dialog_content button {
  border-radius: 10px !important;
}

#identity_dialog_content button:not(.simpleai-floating-close) {
  min-height: 40px !important;
  font-weight: 700 !important;
}

#identity_dialog_content .simpleai-floating-titlebar {
  min-height: 44px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 18px 18px 0 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 122, 37, 0.16), rgba(74, 163, 255, 0.08)),
    color-mix(in srgb, var(--background-fill-secondary) 92%, transparent) !important;
  border-bottom: 1px solid var(--border-color-primary) !important;
}

#identity_dialog_content .simpleai-floating-titlebar span {
  letter-spacing: 0.01em;
}

#identity_dialog_content .simpleai-floating-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}

@media (max-width: 760px) {
  #identity_dialog_content {
    top: 56px !important;
    width: calc(100vw - 24px) !important;
    min-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 80px) !important;
  }

  #identity_dialog_content .tabitem > .row:nth-of-type(2) {
    grid-template-columns: 1fr !important;
  }

  #identity_dialog_content #identity_input_row {
    grid-template-columns: 1fr !important;
  }

  #identity_dialog_content .tabitem > .row:nth-of-type(n+3):not([style*="display: none"]) {
    grid-template-columns: 1fr !important;
  }
}

#identity_dialog_content .tab-container {
  background: transparent !important;
}

#identity_dialog_content .tab-container button {
  color: var(--body-text-color) !important;
}

#identity_dialog_content .note_info,
#identity_dialog_content .input_note_info,
#identity_dialog_content .input_id_info {
  color: var(--body-text-color) !important;
}

/* Identity dialog: keep this intentionally plain and robust. */
#identity_dialog_content.simpleai-identity-card {
  top: 72px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(760px, calc(100vw - 48px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 48px) !important;
  height: auto !important;
  max-height: calc(100vh - 96px) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--background-fill-primary) 96%, #000 4%) !important;
}

#identity_dialog_content.simpleai-identity-card .simpleai-popup-resize-handle {
  display: none !important;
}

#identity_dialog_content .simpleai-floating-titlebar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: 10px 10px 0 0 !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 92%, #000 8%) !important;
  border-bottom: 1px solid var(--border-color-primary) !important;
  cursor: grab !important;
}

#identity_dialog_content .simpleai-floating-titlebar:active,
#identity_dialog_content .simpleai-floating-titlebar.simpleai-dragging {
  cursor: grabbing !important;
}

#identity_dialog_content .simpleai-floating-titlebar span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#identity_dialog_content .simpleai-floating-close {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  line-height: 1 !important;
}

#identity_dialog_content .tabitem {
  padding: 22px 24px !important;
  gap: 16px !important;
  max-height: calc(100vh - 142px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 0 0 10px 10px !important;
  background: transparent !important;
}

#identity_dialog_content .tabitem > .row:first-of-type {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#identity_dialog_content .identity_flow_note {
  margin: 8px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
}

#identity_dialog_content #identity_id_display_row,
#identity_dialog_content #identity_vcode_row,
#identity_dialog_content #identity_phrase_row {
  width: 100% !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#identity_dialog_content #identity_vcode_row,
#identity_dialog_content #identity_phrase_row {
  flex-wrap: nowrap !important;
}

#identity_dialog_content #identity_id_display_row > *,
#identity_dialog_content #identity_vcode_row > *,
#identity_dialog_content #identity_phrase_row > * {
  min-width: 0 !important;
}

#identity_dialog_content #identity_vcode_input,
#identity_dialog_content #identity_phrase_input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#identity_dialog_content #identity_verify_button,
#identity_dialog_content #identity_phrases_set_button,
#identity_dialog_content #identity_phrases_confirm_button,
#identity_dialog_content #identity_confirm_button,
#identity_dialog_content #identity_unbind_button,
#identity_dialog_content #identity_change_button {
  flex: 0 0 auto !important;
  min-width: 128px !important;
  max-width: 190px !important;
  white-space: normal !important;
}

#identity_dialog_content textarea,
#identity_dialog_content input {
  resize: none !important;
}

#identity_dialog_content #identity_phrase_input textarea,
#identity_dialog_content #identity_phrase_input input,
#identity_dialog_content #identity_vcode_input textarea,
#identity_dialog_content #identity_vcode_input input {
  min-height: 42px !important;
  height: 42px !important;
}

/* Identity dialog layout polish. Keep selectors explicit; Gradio row order is fragile. */
#identity_dialog_content.simpleai-identity-card {
  width: min(800px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 88px) !important;
  background: color-mix(in srgb, var(--background-fill-primary) 97%, #000 3%) !important;
  border-radius: 12px !important;
}

#identity_dialog_content.simpleai-identity-card .tabitem {
  padding: 20px 24px 24px !important;
  gap: 14px !important;
  max-height: calc(100vh - 134px) !important;
  background: transparent !important;
}

#identity_dialog_content .identity-summary-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 18px !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--border-color-primary) 82%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 70%, transparent) !important;
}

#identity_dialog_content .identity-summary-row > .column,
#identity_dialog_content .identity-summary-main,
#identity_dialog_content .identity-summary-side {
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#identity_dialog_content .identity-summary-main .note_info,
#identity_dialog_content .identity-summary-main .note_info .wrap,
#identity_dialog_content .identity-summary-main .note_info [data-testid="markdown"],
#identity_dialog_content .identity-summary-main .note_info .prose,
#identity_dialog_content .identity-summary-main .note_info p {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

#identity_dialog_content .identity-summary-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-width: 110px !important;
}

#identity_dialog_content .identity-summary-side .note_info,
#identity_dialog_content .identity-summary-side .note_info .wrap,
#identity_dialog_content .identity-summary-side .note_info [data-testid="markdown"],
#identity_dialog_content .identity-summary-side .note_info .prose,
#identity_dialog_content .identity-summary-side .note_info p {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

#identity_dialog_content .identity_export,
#identity_dialog_content .identity_export button {
  width: auto !important;
  min-width: 118px !important;
}

#identity_dialog_content .identity_flow_note {
  margin: 0 !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--border-color-primary) 76%, transparent) !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 58%, transparent) !important;
  color: var(--body-text-color) !important;
}

#identity_dialog_content .identity_flow_note .wrap,
#identity_dialog_content .identity_flow_note [data-testid="markdown"],
#identity_dialog_content .identity_flow_note .prose,
#identity_dialog_content .identity_flow_note p {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}

#identity_dialog_content #identity_input_row.identity-bind-grid {
  display: grid !important;
  grid-template-columns: minmax(220px, 280px) minmax(280px, 1fr) !important;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#identity_dialog_content #identity_input_row.identity-bind-grid > .column,
#identity_dialog_content .identity-bind-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 14px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--border-color-primary) 80%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 64%, transparent) !important;
}

#identity_dialog_content .identity-bind-card-manual {
  justify-content: flex-start !important;
  gap: 12px !important;
}

#identity_dialog_content .input_note_info,
#identity_dialog_content .input_note_info .wrap,
#identity_dialog_content .input_note_info [data-testid="markdown"],
#identity_dialog_content .input_note_info .prose,
#identity_dialog_content .input_note_info p {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#identity_dialog_content .identity-bind-card-manual .input_note_info {
  padding-bottom: 14px !important;
}

#identity_dialog_content .identity_qr,
#identity_dialog_content .identity_qr > .wrap,
#identity_dialog_content .identity_qr .wrap,
#identity_dialog_content .identity_qr .image-container,
#identity_dialog_content .identity_qr .image-frame,
#identity_dialog_content .identity_qr [data-testid="image"],
#identity_dialog_content .identity_qr [data-testid="image"] > div {
  width: 100% !important;
  min-height: 220px !important;
  height: 220px !important;
  max-height: 220px !important;
}

#identity_dialog_content .identity_qr img,
#identity_dialog_content .identity_qr canvas {
  max-height: 202px !important;
  object-fit: contain !important;
}

#identity_dialog_content .identity_input2,
#identity_dialog_content .identity_input2 .wrap,
#identity_dialog_content .identity_input2 input,
#identity_dialog_content .identity_input input,
#identity_dialog_content .identity_input textarea {
  width: 100% !important;
  min-width: 0 !important;
}

#identity_dialog_content .identity_input2 input,
#identity_dialog_content .identity_input input,
#identity_dialog_content .identity_input textarea {
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
}

#identity_dialog_content #identity_bind_button,
#identity_dialog_content .identity-bind-card-manual button {
  width: 100% !important;
}

#identity_dialog_content .identity-action-row,
#identity_dialog_content #identity_id_display_row,
#identity_dialog_content #identity_vcode_row,
#identity_dialog_content #identity_phrase_row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#identity_dialog_content .identity-action-row button,
#identity_dialog_content #identity_change_button,
#identity_dialog_content #identity_verify_button,
#identity_dialog_content #identity_phrases_set_button,
#identity_dialog_content #identity_phrases_confirm_button,
#identity_dialog_content #identity_confirm_button,
#identity_dialog_content #identity_unbind_button {
  min-width: 120px !important;
  max-width: none !important;
}

#identity_dialog_content #identity_input_id_info {
  justify-self: stretch !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--border-color-primary) 72%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--background-fill-secondary) 58%, transparent) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  word-break: break-word !important;
}

#identity_dialog_content #identity_input_id_info .wrap,
#identity_dialog_content #identity_input_id_info [data-testid="markdown"],
#identity_dialog_content #identity_input_id_info .prose,
#identity_dialog_content #identity_input_id_info p {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#identity_dialog_content #identity_vcode_input,
#identity_dialog_content #identity_phrase_input {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#identity_dialog_content #identity_vcode_input .wrap,
#identity_dialog_content #identity_phrase_input .wrap,
#identity_dialog_content #identity_vcode_input input,
#identity_dialog_content #identity_phrase_input input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#identity_dialog_content #identity_id_display_row,
#identity_dialog_content #identity_vcode_row,
#identity_dialog_content #identity_phrase_row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(112px, max-content) !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#identity_dialog_content #identity_change_button,
#identity_dialog_content #identity_verify_button,
#identity_dialog_content #identity_phrases_set_button,
#identity_dialog_content #identity_phrases_confirm_button,
#identity_dialog_content #identity_confirm_button,
#identity_dialog_content #identity_unbind_button {
  justify-self: end !important;
  width: 100% !important;
  min-width: 112px !important;
  max-width: 150px !important;
}

@media (max-width: 900px) {
  #identity_dialog_content #identity_id_display_row,
  #identity_dialog_content #identity_vcode_row,
  #identity_dialog_content #identity_phrase_row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #identity_dialog_content #identity_change_button,
  #identity_dialog_content #identity_verify_button,
  #identity_dialog_content #identity_phrases_set_button,
  #identity_dialog_content #identity_phrases_confirm_button,
  #identity_dialog_content #identity_confirm_button,
  #identity_dialog_content #identity_unbind_button {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 760px) {
  #identity_dialog_content.simpleai-identity-card {
    top: 56px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 72px) !important;
  }

  #identity_dialog_content.simpleai-identity-card .tabitem {
    padding: 16px !important;
    max-height: calc(100vh - 118px) !important;
  }

  #identity_dialog_content .identity-summary-row,
  #identity_dialog_content #identity_input_row.identity-bind-grid,
  #identity_dialog_content .identity-action-row,
  #identity_dialog_content #identity_id_display_row,
  #identity_dialog_content #identity_vcode_row,
  #identity_dialog_content #identity_phrase_row {
    grid-template-columns: 1fr !important;
  }

  #identity_dialog_content .identity-summary-side {
    align-items: flex-start !important;
    min-width: 0 !important;
  }
}

.admin-access-panel,
.admin-access-panel > .wrap,
.admin-access-panel > .form {
  min-width: 0 !important;
  max-width: 100% !important;
}

.admin-access-toolbar {
  align-items: stretch !important;
  gap: 10px !important;
}

.admin-access-toolbar > *,
.admin-access-actions > * {
  min-width: 0 !important;
}

.admin-access-actions button {
  width: 100% !important;
}

.admin-access-refresh-wide,
.admin-access-refresh-wide button {
  width: 100% !important;
}

.admin-access-refresh-wide button {
  min-height: 42px !important;
}

.admin-access-message-wrap,
.admin-access-message-wrap > .wrap,
.admin-access-message-wrap [data-testid="html"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

.admin-access-message {
  min-height: 0;
  padding: 9px 12px;
  border: 1px solid var(--border-color-primary);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--body-text-color);
  background: color-mix(in srgb, var(--background-fill-secondary) 84%, transparent);
}

.admin-access-message.is-empty {
  display: none;
}

.admin-access-message.success {
  color: #5ee0a0;
  border-color: rgba(94, 224, 160, 0.32);
  background: rgba(94, 224, 160, 0.10);
}

.admin-access-message.warning {
  color: #f6c463;
  border-color: rgba(246, 196, 99, 0.34);
  background: rgba(246, 196, 99, 0.10);
}

.admin-access-message.error {
  color: #ff8f8f;
  border-color: rgba(255, 143, 143, 0.36);
  background: rgba(255, 143, 143, 0.10);
}

.admin-access-list-wrap,
.admin-access-list-wrap > .wrap,
.admin-access-list-wrap [data-testid="html"] {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.admin-access-empty {
  padding: 12px 14px;
  border: 1px solid var(--border-color-primary);
  border-radius: 8px;
  color: var(--body-text-color-subdued);
  background: color-mix(in srgb, var(--background-fill-secondary) 80%, transparent);
}

.admin-access-list table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 13px;
}

.admin-access-list th,
.admin-access-list td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-color-primary);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-access-list th {
  color: var(--body-text-color-subdued);
  font-weight: 700;
  background: color-mix(in srgb, var(--background-fill-secondary) 86%, transparent);
}

.admin-access-list code {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-size: 11px;
}

.admin-access-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-access-status,
.admin-access-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.admin-access-status.pending {
  color: #f6c463;
  background: rgba(246, 196, 99, 0.14);
}

.admin-access-status.allowed,
.admin-access-pill.yes {
  color: #5ee0a0;
  background: rgba(94, 224, 160, 0.13);
}

.admin-access-status.blocked,
.admin-access-pill.no {
  color: #ff8f8f;
  background: rgba(255, 143, 143, 0.12);
}

#missing_model_modal_content {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 970px !important;
  min-width: min(640px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 160px) !important;
  overflow: auto !important;
  z-index: 1001 !important;
  background: color-mix(in srgb, var(--background-fill-primary) 94%, #000 6%) !important;
  border: 1px solid var(--border-color-primary) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
}

#user_personal_wildcards_modal_content {
  top: 220px !important;
  left: max(10px, calc((100vw - 970px) / 2 - 260px)) !important;
  right: auto !important;
  bottom: auto !important;
  width: 970px !important;
  min-width: min(640px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 160px) !important;
  overflow: auto !important;
  z-index: 1001 !important;
}

#restore_defaults_panel_content {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(460px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  height: auto !important;
  max-height: calc(100vh - 80px) !important;
  overflow: auto !important;
  padding: 18px !important;
  background: color-mix(in srgb, var(--background-fill-primary) 94%, #000 6%) !important;
  color: var(--body-text-color) !important;
  border: 1px solid var(--border-color-primary) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
  z-index: 1001 !important;
}

#restore_defaults_panel_content .row {
  display: flex !important;
  gap: 10px !important;
}

#restore_defaults_panel_handle {
  margin: 0 0 6px !important;
  cursor: grab;
  user-select: none;
}

#restore_defaults_panel_handle:active {
  cursor: grabbing;
}

#missing_model_modal.missing-model-modal,
#missing_model_modal .missing-model-modal,
.sai-floating-shell.missing-model-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1800 !important;
}

#model_browser_modal.model-browser-modal,
#model_browser_modal .model-browser-modal,
.sai-floating-shell.model-browser-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1002 !important;
  overscroll-behavior: contain;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: var(--background-fill-primary);
  padding: 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 100%;
  max-height: 80vh;
  overflow-y: visible;
  overflow-x: auto;
  color: var(--text-color-primary);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.missing-model-modal.modal {
  background-color: transparent;
  pointer-events: none;
  justify-content: flex-start;
  align-items: flex-start;
}

.missing-model-modal .modal-content {
  position: fixed;
  pointer-events: auto;
  width: 970px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 160px);
  overflow: auto;
  border-radius: 16px;
}

.model-browser-modal.modal {
  background-color: rgba(0, 0, 0, 0.58);
  pointer-events: auto;
}

#model_browser_modal_content {
  position: fixed !important;
  width: min(980px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  min-width: min(640px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 96px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  border-radius: 12px !important;
  padding: 14px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1003 !important;
}

.model-browser-modal .modal-content {
  position: fixed;
  width: min(980px, calc(100vw - 48px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  border-radius: 12px;
  padding: 14px;
}

#model_browser_modal_header {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 10px;
  margin-bottom: 10px;
  cursor: grab;
}

#model_browser_modal_handle {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

#model_browser_modal_handle:active {
  cursor: grabbing;
}

#model_browser_modal_handle h1,
#model_browser_modal_handle h2,
#model_browser_modal_handle h3,
#model_browser_modal_handle p {
  margin: 0 !important;
}

#model_browser_modal_close_btn {
  flex: 0 0 40px !important;
  min-width: 40px !important;
  width: 40px !important;
}

.has-model-browser-trigger {
  position: relative !important;
}

.browser-trigger-proxy {
  display: none !important;
}

.has-model-browser-trigger [data-testid="block-info"] {
  padding-right: 40px !important;
}

.has-model-browser-trigger .container > div:not(.wrap) {
  padding-right: 40px !important;
}

.model-browser-overlay-trigger {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 12;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.92);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.model-browser-overlay-trigger:hover {
  background: rgba(42, 42, 42, 0.98);
  color: #fff;
}

input[type="range"].simpai-gradio-range-fill {
  --simpai-gradio-range-fill: var(--button-primary-background-fill, #f97316);
  --simpai-gradio-range-track: #e5e7eb;
  accent-color: var(--simpai-gradio-range-fill);
  background:
    linear-gradient(
      to right,
      var(--simpai-gradio-range-fill) 0%,
      var(--simpai-gradio-range-fill) var(--simpai-gradio-range-progress, 0%),
      var(--simpai-gradio-range-track) var(--simpai-gradio-range-progress, 0%),
      var(--simpai-gradio-range-track) 100%
    ) !important;
}

input[type="range"].simpai-gradio-range-fill::-webkit-slider-runnable-track {
  background: transparent !important;
}

input[type="range"].simpai-gradio-range-fill::-moz-range-track {
  background: var(--simpai-gradio-range-track) !important;
}

input[type="range"].simpai-gradio-range-fill::-moz-range-progress {
  background: var(--simpai-gradio-range-fill) !important;
}

#model_browser_toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1.8fr) minmax(180px, 1fr) !important;
  gap: 10px !important;
  align-items: end !important;
  margin-bottom: 8px !important;
}

#model_browser_status {
  margin: 0 0 10px !important;
}

#model_browser_status p {
  margin: 0 !important;
  color: color-mix(in srgb, var(--body-text-color) 76%, transparent) !important;
  font-size: 13px !important;
}

#model_browser_gallery {
  width: 100% !important;
  max-height: calc(100vh - 190px);
  overflow: auto !important;
  overscroll-behavior: contain;
}

#model_browser_gallery .label-wrap {
  display: none !important;
}

#model_browser_gallery .preview {
  display: none !important;
}

#model_browser_gallery .grid-wrap {
  padding: 8px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#model_browser_gallery .grid-container {
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
}

#model_browser_gallery .gallery-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#model_browser_gallery .thumbnail-item.thumbnail-lg {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
}

#model_browser_gallery .thumbnail-item.thumbnail-lg > img,
#model_browser_gallery .thumbnail-item.thumbnail-lg > video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#model_browser_gallery .caption-label {
  display: none !important;
}

#model_browser_gallery .model-browser-filetag {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin: 0 !important;
  border: 1px solid var(--border-color-primary) !important;
  border-radius: 8px !important;
  background: var(--background-fill-secondary) !important;
  padding: 8px 10px !important;
  min-width: 0 !important;
}

#model_browser_gallery .model-browser-file-main {
  color: var(--body-text-color) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

#model_browser_gallery .model-browser-file-folder {
  color: color-mix(in srgb, var(--body-text-color) 64%, transparent) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#model_browser_gallery .model-browser-filetag:not(.has-folder) .model-browser-file-folder {
  display: none !important;
}

#model_browser_modal_content {
  min-height: min(420px, calc(100vh - 48px)) !important;
}

#model_browser_modal_content.simpleai-resizable-popup {
  --simpleai-resize-handle-offset-x: 4px;
  --simpleai-resize-handle-offset-y: 3px;
  --simpleai-resize-handle-hitbox: 18px;
  --simpleai-resize-handle-icon-size: 10px;
}

.sai-model-browser-v2 {
  --smb-accent-border: rgba(212, 212, 216, 0.7);
  --smb-accent-soft: rgba(255, 255, 255, 0.1);
  --smb-accent-active: rgba(255, 255, 255, 0.14);
  --smb-accent-solid: #52525b;
  --smb-accent-text: #f4f4f5;
  --smb-chip-text: #e4e4e7;
  --smb-chip-bg: rgba(255, 255, 255, 0.08);
  --smb-progress-fill: #a1a1aa;
  --smb-selected-border: rgba(212, 212, 216, 0.84);
  --smb-selected-ring: rgba(212, 212, 216, 0.26);
  --smb-card-size: 176px;
  --smb-card-height: 288px;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  color: #f3f4f6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overscroll-behavior: contain;
}

.sai-model-browser-v2[hidden] {
  display: none;
}

.sai-model-browser-v2 * {
  box-sizing: border-box;
}

.sai-model-browser-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.sai-model-browser-panel {
  position: absolute;
  inset: 5vh 5vw;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  min-width: 720px;
  min-height: 520px;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: #202020;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
}

.sai-model-browser-head,
.sai-model-browser-toolbar,
.sai-model-browser-batchbar,
.sai-model-browser-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: #242424;
}

.sai-model-browser-head {
  justify-content: space-between;
}

.sai-model-browser-head > div {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.sai-model-browser-head h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sai-model-browser-head button,
.sai-model-browser-toolbar button,
.sai-model-browser-card-actions button,
.sai-model-browser-detail-actions button,
.sai-model-browser-foot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: #f3f4f6;
  background: #2b2b2b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.sai-model-browser-head button:hover,
.sai-model-browser-toolbar button:hover,
.sai-model-browser-card-actions button:hover,
.sai-model-browser-detail-actions button:hover,
.sai-model-browser-foot button:hover {
  border-color: var(--smb-accent-border);
  background: var(--smb-accent-soft);
}

.sai-model-browser-toolbar {
  display: grid;
  grid-template-columns: minmax(120px, 0.18fr) minmax(220px, 1fr) minmax(150px, 0.24fr) minmax(130px, 0.2fr) auto 38px;
}

.sai-model-browser-toolbar input,
.sai-model-browser-toolbar select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: #f3f4f6;
  background: #1b1b1b;
  font: inherit;
}

.sai-model-browser-toolbar select:disabled {
  opacity: 0.72;
}

.sai-model-browser-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 116px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: #d4d4d8;
  background: #1b1b1b;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.sai-model-browser-filter-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--smb-accent-solid);
}

.sai-model-browser-filter-toggle.is-disabled {
  color: #8b8b94;
  opacity: 0.72;
}

.sai-model-browser-batchbar {
  justify-content: space-between;
  padding-top: 9px;
  padding-bottom: 9px;
  color: #a1a1aa;
  background: #202020;
}

.sai-model-browser-batchcopy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sai-model-browser-batchcopy b {
  color: #f3f4f6;
  font-size: 13px;
  line-height: 1.2;
}

.sai-model-browser-batchcopy span {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sai-model-browser-batchactions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.sai-model-browser-batchactions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: #f3f4f6;
  background: #2b2b2b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.sai-model-browser-batchactions button:hover {
  border-color: var(--smb-accent-border);
  background: var(--smb-accent-soft);
}

.sai-model-browser-batchactions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sai-model-browser-progress {
  display: grid;
  gap: 6px;
  flex: 1 1 260px;
  max-width: 420px;
  min-width: 180px;
  color: #cbd5e1;
  font-size: 12px;
}

.sai-model-browser-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sai-model-browser-progress > span {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.sai-model-browser-progress > span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--smb-progress-fill);
}

.sai-model-browser-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.28fr);
  min-height: 0;
}

.sai-model-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--smb-card-size), var(--smb-card-size)));
  grid-auto-rows: var(--smb-card-height);
  justify-content: start;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
}

.sai-model-browser-card {
  display: grid;
  grid-template-rows: auto auto;
  width: var(--smb-card-size);
  height: var(--smb-card-height);
  min-width: 0;
  min-height: var(--smb-card-height);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #262626;
}

.sai-model-browser-card.is-selected {
  border-color: var(--smb-selected-border);
  box-shadow: 0 0 0 1px var(--smb-selected-ring);
}

.sai-model-browser-card.is-loading {
  min-height: 230px;
  background: linear-gradient(90deg, #262626, #303030, #262626);
  background-size: 220% 100%;
  animation: sai-model-browser-loading 1.1s linear infinite;
}

.sai-model-browser-card-main {
  display: grid;
  grid-template-rows: var(--smb-card-size) 32px 14px;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  padding: 0 9px 8px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sai-model-browser-card-main:focus-visible {
  outline: 2px solid var(--smb-selected-border);
  outline-offset: -3px;
}

.sai-model-browser-thumb {
  display: grid;
  place-items: center;
  width: calc(100% + 18px);
  height: var(--smb-card-size);
  min-height: var(--smb-card-size);
  max-height: var(--smb-card-size);
  aspect-ratio: auto;
  min-width: 0;
  margin: 0 -9px 4px;
  overflow: hidden;
  background: #151515;
}

.sai-model-browser-thumb img,
.sai-model-browser-detail-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sai-model-browser-empty-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.74);
  font-size: 32px;
}

.sai-model-browser-card-title,
.sai-model-browser-card-sub {
  min-width: 0;
  overflow: hidden;
}

.sai-model-browser-card-title {
  display: -webkit-box;
  height: 32px;
  min-height: 32px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sai-model-browser-card-sub {
  height: 14px;
  min-height: 14px;
  color: #a1a1aa;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sai-model-browser-card-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sai-model-browser-card-actions button {
  height: 28px;
  padding: 0;
}

.sai-model-browser-card-actions button.is-on {
  color: var(--smb-accent-text);
  border-color: var(--smb-accent-border);
  background: var(--smb-accent-active);
}

.sai-model-browser-detail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: #242424;
}

.sai-model-browser-detail-preview {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: center;
  width: min(100%, 260px);
  aspect-ratio: 1 / 1;
  max-height: min(260px, 38vh);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #151515;
}

.sai-model-browser-detail h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.3;
}

.sai-model-browser-detail dl {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
  color: #cbd5e1;
  font-size: 12px;
}

.sai-model-browser-detail dt {
  color: #8b8b94;
}

.sai-model-browser-detail dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.sai-model-browser-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sai-model-browser-tags span {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--smb-chip-text);
  background: var(--smb-chip-bg);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sai-model-browser-trigger-words {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(15, 15, 15, 0.36);
}

.sai-model-browser-arch {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(15, 15, 15, 0.36);
}

.sai-model-browser-trigger-head,
.sai-model-browser-arch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.sai-model-browser-trigger-head b,
.sai-model-browser-arch-head b {
  min-width: 0;
  color: #f8fafc;
  font-size: 13px;
}

.sai-model-browser-trigger-head small,
.sai-model-browser-arch-head small {
  flex: 0 0 auto;
  color: #a1a1aa;
  font-size: 11px;
}

.sai-model-browser-arch-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: #d4d4d8;
  font-size: 12px;
}

.sai-model-browser-arch-current span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sai-model-browser-arch-current small {
  flex: 0 0 auto;
  color: #8b8b94;
}

.sai-model-browser-arch-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  min-width: 0;
}

.sai-model-browser-arch-edit select {
  min-width: 0;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  color: #f8fafc;
  background: #171717;
}

.sai-model-browser-arch button,
.sai-model-browser-arch-edit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: #f3f4f6;
  background: #2b2b2b;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.sai-model-browser-trigger-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.sai-model-browser-trigger-tags button,
.sai-model-browser-trigger-tags span {
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
}

.sai-model-browser-trigger-tags button {
  overflow: hidden;
  border: 1px solid var(--smb-chip-border);
  color: var(--smb-chip-text);
  background: var(--smb-chip-bg);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.sai-model-browser-trigger-tags span {
  color: #8b8b94;
}

.sai-model-browser-trigger-words textarea {
  width: 100%;
  min-width: 0;
  min-height: 70px;
  resize: vertical;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  color: #f8fafc;
  background: #171717;
  font-size: 12px;
  line-height: 1.4;
}

.sai-model-browser-trigger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sai-model-browser-trigger-actions button {
  min-height: 30px;
}

.sai-model-browser-desc {
  margin: 0;
  color: #a1a1aa;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sai-model-browser-detail-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.sai-model-browser-detail-actions button.is-primary,
.sai-model-browser-batchactions button.is-primary,
.sai-model-browser-trigger-actions button.is-primary,
.sai-model-browser-arch button.is-primary {
  border-color: var(--smb-accent-border);
  color: var(--smb-accent-text);
  background: var(--smb-accent-solid);
}

.sai-model-browser-detail-actions button.is-danger,
.sai-model-browser-confirm-panel button.is-danger {
  border-color: rgba(248, 113, 113, 0.56);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.78);
}

.sai-model-browser-confirm {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
}

.sai-model-browser-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.sai-model-browser-confirm-panel {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(460px, calc(100vw - 40px));
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: #242424;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.52);
}

.sai-model-browser-confirm-panel h3,
.sai-model-browser-confirm-panel p {
  margin: 0;
}

.sai-model-browser-confirm-panel p {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}

.sai-model-browser-confirm-panel code {
  overflow-wrap: anywhere;
  padding: 7px 9px;
  border-radius: 6px;
  color: #f8fafc;
  background: #151515;
  font-size: 12px;
}

.sai-model-browser-confirm-panel input {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #f8fafc;
  background: #171717;
}

.sai-model-browser-confirm-panel > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sai-model-browser-confirm-panel button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #f8fafc;
  background: #2b2b2b;
  cursor: pointer;
}

.sai-model-browser-confirm-panel button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sai-model-browser-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
  color: #a1a1aa;
  font-size: 12px;
}

.sai-model-browser-pagebar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sai-model-browser-pagebar strong {
  min-width: 96px;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.sai-model-browser-pagebar button {
  min-width: 86px;
  height: 36px;
}

.sai-model-browser-foot button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sai-model-browser-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #a1a1aa;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}

@keyframes sai-model-browser-loading {
  to {
    background-position: -220% 0;
  }
}

@media (max-height: 720px) {
  .sai-model-browser-detail-preview {
    width: min(100%, 210px);
    max-height: min(210px, 32vh);
  }
}

@media (max-width: 860px) {
  .sai-model-browser-v2 {
    --smb-card-size: 150px;
    --smb-card-height: 264px;
  }

  .sai-model-browser-panel {
    inset: 10px;
    min-width: 0;
  }

  .sai-model-browser-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .sai-model-browser-batchbar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .sai-model-browser-batchcopy span {
    white-space: normal;
  }

  .sai-model-browser-progress {
    max-width: none;
  }

  .sai-model-browser-batchactions {
    flex-wrap: wrap;
  }

  .sai-model-browser-main {
    grid-template-columns: 1fr;
  }

  .sai-model-browser-detail {
    display: none;
  }

  .sai-model-browser-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .sai-model-browser-pagebar {
    justify-content: space-between;
  }
}

.simpleai-resizable-popup {
  scrollbar-gutter: stable;
  --simpleai-resize-handle-offset-x: 12px;
  --simpleai-resize-handle-offset-y: 8px;
  --simpleai-resize-handle-hitbox: 22px;
  --simpleai-resize-handle-icon-size: 13px;
}

.simpleai-resizable-popup .simpleai-popup-resize-handle {
  position: absolute !important;
  right: var(--simpleai-resize-handle-offset-x) !important;
  bottom: var(--simpleai-resize-handle-offset-y) !important;
  width: var(--simpleai-resize-handle-hitbox) !important;
  height: var(--simpleai-resize-handle-hitbox) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: nwse-resize !important;
  touch-action: none !important;
  opacity: 0.86 !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

.simpleai-resizable-popup .simpleai-popup-resize-handle::before {
  content: "" !important;
  display: block !important;
  width: var(--simpleai-resize-handle-icon-size) !important;
  height: var(--simpleai-resize-handle-icon-size) !important;
  margin-right: 1px !important;
  margin-bottom: 1px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 12L12 4' stroke='%23FFFFFF' stroke-opacity='0.80' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M7.5 12L12 7.5' stroke='%23FFFFFF' stroke-opacity='0.58' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M11 12L12 11' stroke='%23FFFFFF' stroke-opacity='0.38' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.simpleai-resizable-popup .simpleai-popup-resize-handle:hover {
  opacity: 1 !important;
}

.simpleai-resizable-popup .simpleai-popup-resize-handle::after {
  content: none !important;
  display: none !important;
}

.simpleai-resizable-popup.minimized .simpleai-popup-resize-handle {
  display: none !important;
}

#identity_dialog_content .form:has(> #identity_stage_state),
#identity_dialog_content .block:has(> #identity_stage_state) {
  display: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
}

#missing_model_modal_header {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 10px;
  cursor: grab;
}

#missing_model_modal_handle {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

#missing_model_modal_handle h1,
#missing_model_modal_handle h2,
#missing_model_modal_handle h3,
#missing_model_modal_handle p {
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#missing_model_modal_minimize_btn,
#missing_model_modal_close_btn {
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  border-radius: 5px !important;
  flex: 0 0 auto !important;
}

#missing_model_total_progress {
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#missing_model_total_progress .loader-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#missing_model_total_progress .loader-container .progress-container {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
}

#missing_model_total_progress .loader-container progress {
  width: 100%;
  height: 12px;
}

#missing_model_total_progress progress {
  background-color: var(--background-fill-secondary) !important;
  border-radius: 999px !important;
}

#missing_model_total_progress progress::after {
  content: none !important;
}

#missing_model_total_progress progress::-webkit-progress-bar {
  background-color: var(--background-fill-secondary);
  border-radius: 999px;
}

#missing_model_total_progress progress::-webkit-progress-value {
  background-color: #3498db;
  border-radius: 999px;
}

#missing_model_total_progress progress::-moz-progress-bar {
  background-color: #3498db;
  border-radius: 999px;
}

#missing_model_total_progress .loader-container span {
  font-size: 12px;
  white-space: nowrap;
  margin-left: 0;
}

#missing_model_total_progress .mm-progress {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  width: 100%;
}

#missing_model_total_progress .mm-progress progress {
  grid-column: 1 / -1;
  width: 100% !important;
  height: 12px !important;
  min-width: 0;
}

#missing_model_total_progress .mm-progress-label {
  grid-column: 1 / 3;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

#missing_model_total_progress .mm-progress-percent {
  grid-column: 3;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-align: right;
}

#missing_model_modal_handle {
  cursor: grab;
  user-select: none;
}

#missing_model_modal_handle:active {
  cursor: grabbing;
}

#missing_model_modal_content.minimized {
  width: 280px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  overflow: hidden !important;
  padding: 6px 8px;
  transform: none !important;
  gap: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#missing_model_modal_content.minimized #missing_model_modal_handle {
  display: none;
}

#missing_model_modal_content.minimized #missing_model_modal_header {
  width: auto !important;
  min-width: fit-content !important;
  margin: 0;
  padding: 0;
  gap: 4px;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  order: 2; /* Move buttons to the right */
  display: flex;
  flex-wrap: nowrap;
}

#missing_model_modal_content.minimized #missing_model_total_progress {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 178px;
  overflow: hidden !important;
  order: 1; /* Move progress to the left */
}

#missing_model_modal_content.minimized #missing_model_total_progress .mm-progress {
  display: grid !important;
  grid-template-columns: minmax(64px, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

#missing_model_modal_content.minimized #missing_model_total_progress .mm-progress progress {
  grid-column: 1 !important;
  width: 100% !important;
  height: 8px !important;
  min-width: 0 !important;
}

#missing_model_modal_content.minimized #missing_model_total_progress .mm-progress-label {
  display: none !important;
}

#missing_model_modal_content.minimized #missing_model_total_progress .mm-progress-percent {
  grid-column: 2 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#missing_model_modal_content.minimized #missing_model_total_progress .loader-container .loader {
  display: none; /* Hide spinner in minimized mode */
}

#missing_model_modal_content.minimized #missing_model_total_progress .loader-container {
  gap: 6px;
}

#missing_model_modal_content.minimized #missing_model_total_progress .loader-container span {
  /* Only show percentage, hide text prefix via js logic or accept it shows full text but clipped */
  /* Since we can't easily change text content via CSS, we rely on layout to handle it gracefully */
  font-size: 11px;
}

#missing_model_modal_content.minimized #missing_model_total_progress .loader-container progress {
  height: 8px;
}

#missing_model_modal_content.minimized #missing_model_dataframe_container,
#missing_model_modal_content.minimized #missing_model_list,
#missing_model_modal_content.minimized #missing_model_modal_actions {
  display: none;
}

#missing_model_list label,
#missing_model_list .label-wrap,
#missing_model_list [data-testid="block-label"],
#missing_model_list caption {
  display: none !important;
}

#missing_model_list table[aria-hidden="true"] {
  display: none !important;
}

#missing_model_list .missing-model-html {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(420px, calc(58vh - 120px));
  overflow: auto;
}

#missing_model_list .missing-model-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#missing_model_list .missing-model-section-title {
  padding: 0 2px;
  color: var(--body-text-color);
  font-size: 13px;
  font-weight: 700;
}

#missing_model_list .missing-model-queue-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#missing_model_list .missing-model-queue-html {
  max-height: min(220px, 28vh);
}

#missing_model_list .missing-model-html.empty {
  padding: 16px;
  color: var(--body-text-color-subdued);
}

#missing_model_list .missing-model-html-head,
#missing_model_list .missing-model-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 116px;
  gap: 12px;
  align-items: center;
}

#missing_model_list .missing-model-queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 116px;
  gap: 12px;
  align-items: center;
}

#missing_model_list .missing-model-html-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color-primary);
  background: var(--background-fill-secondary);
  color: var(--body-text-color-subdued);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

#missing_model_list .missing-model-row,
#missing_model_list .missing-model-queue-row {
  padding: 10px;
  border: 1px solid var(--border-color-primary);
  border-radius: 8px;
  background: color-mix(in srgb, var(--background-fill-secondary) 92%, transparent);
}

#missing_model_list .mm-model-name {
  color: var(--body-text-color);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#missing_model_list .mm-model-meta {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  color: var(--body-text-color-subdued);
  font-size: 12px;
}

#missing_model_list .mm-model-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

#missing_model_list .mm-model-action {
  min-width: 0;
}

#missing_model_list .mm-model-status progress {
  width: 100%;
  height: 8px;
}

#missing_model_list .mm-row-status {
  font-size: 12px;
  font-weight: 700;
}

#missing_model_list .mm-row-status.idle {
  color: var(--body-text-color-subdued);
}

#missing_model_list .mm-row-status.downloading {
  color: #4aa3ff;
}

#missing_model_list .mm-row-status.queued {
  color: var(--body-text-color-subdued);
}

#missing_model_list .mm-row-status.stopped {
  color: var(--body-text-color-subdued);
}

#missing_model_list .mm-row-status.error {
  color: #ff6b6b;
}

#missing_model_list .missing-model-download-one,
#missing_model_list .missing-model-cancel-one {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

#missing_model_list .missing-model-download-one {
  background: var(--button-primary-background-fill);
  color: var(--button-primary-text-color);
}

#missing_model_list .missing-model-cancel-one {
  background: var(--button-secondary-background-fill);
  color: var(--button-secondary-text-color);
}

#missing_model_list .missing-model-download-one:disabled {
  cursor: wait;
  opacity: 0.65;
}

.user-wildcards-modal.modal {
  background-color: transparent;
  pointer-events: none;
  justify-content: flex-start;
  align-items: flex-start;
}

.user-wildcards-modal .modal-content {
  position: fixed;
  pointer-events: auto;
  width: 970px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 160px);
  overflow: auto;
  border-radius: 16px;
}

#user_personal_wildcards_modal_handle {
  cursor: grab;
  user-select: none;
}

#user_personal_wildcards_modal_handle:active {
  cursor: grabbing;
}

.line-overlay-textbox .line-overlay-wrapper {
  position: relative;
  width: 100%;
}

.line-overlay-textbox .line-overlay-viewport {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.line-overlay-textbox .line-overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: transparent;
}

.line-overlay-textbox .line-overlay-line {
  display: block;
}

:root[data-theme="light"] .line-overlay-textbox .line-overlay-line:nth-child(odd),
html[data-theme="light"] .line-overlay-textbox .line-overlay-line:nth-child(odd),
body[data-theme="light"] .line-overlay-textbox .line-overlay-line:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.135);
}

:root[data-theme="dark"] .line-overlay-textbox .line-overlay-line:nth-child(odd),
html[data-theme="dark"] .line-overlay-textbox .line-overlay-line:nth-child(odd),
body[data-theme="dark"] .line-overlay-textbox .line-overlay-line:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.145);
}

.line-overlay-textbox textarea {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

#missing_model_dataframe_container {
  background-color: var(--background-fill-secondary);
  border: 1px solid var(--border-color-primary);
  border-radius: var(--radius-sm);
  overflow-y: auto !important;
  overflow-x: auto !important;
  max-height: min(420px, calc(58vh - 120px)) !important;
  min-height: 200px;
}

#missing_model_list {
  background-color: var(--background-fill-secondary);
  overflow: visible !important;
  max-height: none !important;
  min-height: auto;
}

#missing_model_list .dataframe-container {
  background-color: var(--background-fill-secondary);
  overflow-y: auto !important;
  overflow-x: auto !important;
  max-height: none !important;
}

#missing_model_modal_content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#missing_model_list table {
  width: 100%;
  table-layout: fixed;
}

#missing_model_list th {
  background-color: var(--background-fill-tertiary);
  color: var(--text-color-primary);
  font-weight: bold;
  padding: 8px;
  text-align: left;
  border-bottom: 2px solid var(--border-color-primary);
  position: sticky;
  top: 0;
  z-index: 5;
}

#missing_model_list td {
  background-color: var(--background-fill-secondary);
  color: var(--text-color-primary);
  padding: 8px;
  border-bottom: 1px solid var(--border-color-secondary);
}

#missing_model_list tr:hover td {
  background-color: var(--background-fill-hover);
}

.p2p_title {
  padding: 8px 12px;
  top: 4px !important;
}

.p2p_input1 {
    padding: 0px 0px !important;
    height: 42px;
    min-width: min(250px, 100%) !important;
}

.web_input1 {
  padding: 0px 0px !important;
  height: 42px;
  min-width: min(200px, 100%) !important;
}

.lora_send_to_prompt {
  min-height: 50px;
}

.lora_save {
  min-height: 50px;
}

/* Comparison UI */
.comparison-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 100px;
    background: #1f2937;
    border-radius: 8px;
    overflow: hidden;
    cursor: col-resize;
}

.comparison-wrapper.fullscreen-mode {
    position: fixed !important;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999;
    background: black;
    border-radius: 0;
}

.comparison-wrapper .comparison-content {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    max-height: 100%;
}

.comparison-wrapper.fullscreen-mode .comparison-content {
    /* Let the wrapper center this shrink-wrapped container */
    width: auto;
    height: auto;
    display: inline-block;
}

.comparison-wrapper .outer-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.comparison-wrapper.fullscreen-mode .outer-img {
    max-width: 100vw;
    max-height: 100vh;
}

.comparison-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    pointer-events: none;
}

.comparison-wrapper .inner-img {
    display: block;
    /* Crucial: Disable max-width to allow JS to set explicit width matching outer */
    max-width: none !important; 
    max-height: none !important;
    object-fit: contain;
    margin: 0;
    padding: 0;
    /* Force explicit synchronization */
    width: 100%;
    height: 100%;
}

.comparison-wrapper .label {
    position: absolute;
    bottom: 10px;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.6);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: none;
    font-family: sans-serif;
    z-index: 10;
}

.edit-buttons {
    display: none !important;
}

#sam3_input_video .edit-buttons,
#sam3_output_mask_video .edit-buttons,
#scene_video .edit-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

#sam3_input_video .timeline-wrapper,
#sam3_output_mask_video .timeline-wrapper,
#scene_video .timeline-wrapper {
    margin-bottom: 28px !important;
}

#sam3_input_video [data-testid="waveform-controls"],
#sam3_output_mask_video [data-testid="waveform-controls"],
#scene_video [data-testid="waveform-controls"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 14px 10px !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 12 !important;
}

#sam3_input_video [data-testid="waveform-controls"] time,
#sam3_output_mask_video [data-testid="waveform-controls"] time,
#scene_video [data-testid="waveform-controls"] time {
    min-width: 0 !important;
    padding-left: 0 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
}

#sam3_input_video .edit-buttons button,
#sam3_output_mask_video .edit-buttons button,
#scene_video .edit-buttons button {
    min-width: 64px !important;
    max-width: 86px !important;
    height: 30px !important;
    margin-left: 0 !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    border-color: color-mix(in srgb, var(--color-accent, #ff7a1a) 78%, var(--neutral-400, #8a8f98)) !important;
    color: var(--body-text-color, #f3f4f6) !important;
    background: color-mix(in srgb, var(--block-background-fill, #242428) 84%, var(--color-accent, #ff7a1a)) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

button[aria-label="Edit"][title="Edit"] {
    display: none !important;
}

#sam3_input_video,
#sam3_output_mask_video {
    outline: 1px dashed rgba(255, 255, 255, 0.35);
    outline-offset: -1px;
    border-radius: 8px;
}

#sam3_input_video video,
#sam3_output_mask_video video,
#sam3_input_video canvas,
#sam3_output_mask_video canvas {
    border-radius: 8px;
}

#tts_panel {
    position: relative;
}

#qwen_tts_source_badge {
    position: absolute;
    right: 0px;
    bottom: -12px;
    z-index: 50;
    font-size: 12px;
    opacity: 0.75;
    text-align: right;
}

.resolution-hidden-control {
    display: none !important;
}

/* These controls are backend/JS bridge components for the custom Resolution Box.
   Gradio 6 still gives their parent form a visible layout slot, so collapse that
   bridge-only form while keeping the hidden inputs mounted in the DOM. */
.gradio-container div.form:has(> #resolution_quantize_step):has(> #overwrite_width):has(> #overwrite_height) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* The scene resolution shell is now a hidden compatibility bridge; the single
   visible resolution control lives in Settings. */
#scene_resolution_override_accordion {
    display: none !important;
}
#missing_model_welcome_hint {
  display: none;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 6px 0;
  padding: 5px 8px;
  min-height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: var(--background-fill-secondary);
  background: color-mix(in srgb, var(--background-fill-secondary) 86%, #f59e0b 14%);
}

#missing_model_welcome_hint_text {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden;
}

#missing_model_welcome_hint_text.form,
#missing_model_welcome_hint_btn.form,
#missing_model_welcome_hint_close.form,
#missing_model_welcome_hint_text .form,
#missing_model_welcome_hint_btn .form,
#missing_model_welcome_hint_close .form {
  min-width: 0 !important;
}

#missing_model_welcome_hint_text > div,
#missing_model_welcome_hint_text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#missing_model_welcome_hint_text .missing-model-welcome-message {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#missing_model_welcome_hint_text .missing-model-warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #facc15;
  color: #171717;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

#missing_model_welcome_hint_text .missing-model-warning-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#missing_model_welcome_hint_btn,
#missing_model_welcome_hint_close {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

#missing_model_welcome_hint_btn button,
#missing_model_welcome_hint_close button {
  min-width: 32px !important;
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 5px !important;
  line-height: 1 !important;
}

#missing_model_welcome_hint_btn button {
  min-width: 84px !important;
  font-weight: 700 !important;
}