/* --- START OF FILE style.css --- */

:root {
  /* --- ACCORDION VARIABLES --- */
  --acc-dist-1-color: #363636;
  --acc-dist-2-color: #363636;
  --acc-dist-3-color: #363636;

  /* --- Global Border Radius Control --- */
  --radius-xs: 8px;
  --radius-sm: 5px;
  --radius-md2: 15px;
  --radius-md3: 19px;
  --radius-md: 27px;
  --radius-lg: 35px;
  --radius-xl: 45px;
  --radius-full: 50%;
  --radius-accordion-inactive: 60px;

  --button-aniamtion-time: 1.5s;

  /* --- Base Colors --- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* --- Backgrounds --- */
  --bg-main: #363636; /* Dark Accordion Tracks/Gaps */
  --bg-dark: #2b2b2b; /* App Main Background */
  --bg-mid: #656565; /* Mid-tone gray */
  --bg-card: #1e1e1e; /* Darkest gray for cards */
  --bg-sidebar: #2b2b2b;
  --bg-topbar: #363636;
  --bg-green-btn: #67eead;
  --green-accent: #67eead;

  /* --- Surfaces --- */
  --surface-primary: #d5d5d5; /* Light Inputs */
  --surface-primary-hover: #fafafa;
  --surface-panel: #2b2b2b;
  --surface-input: #d5d5d5;
  --bg-light: #d9d9d9;

  /* --- Borders --- */
  --border-base: #716e6e;
  --border-dark: #656565;
  --border-dim: #363636;
  --border-light: #a6a6a6;
  --dashed-border-color: #656565;

  /* --- Typography --- */
  --text-primary: #1e1e1e; /* Dark Text on inputs */
  --text-inverse: #fafafa; /* Light Text on dark bg */
  --text-secondary: #a6a6a6; /* Dimmed Text */
  --text-muted: #716e6e;
  --text-dim: #656565;
  --text-dark: #1e1e1e; /* Text on bright green buttons */
  --text-link: #a6a6a6;
  --text-loading: #a6a6a6;

  /* --- Accents & Actions --- */
  --accent-primary: #67eead; /* Mint Green */
  --accent-hover: #5bd49a;
  --accent-focus: #4ec28a;
  --accent-focus-faint: rgba(103, 238, 173, 0.2);
  --accent-bright: #8affc6;

  /* --- Status --- */
  --status-red-soft: #ff6b6b;
  --status-red-soft-bg: rgba(255, 107, 107, 0.1);
  --status-red-bright: #ff5252;

  /* --- Editor Specific --- */
  --editor-purple-bg: rgba(80, 30, 130, 0.8);
  --editor-purple-hover: rgba(100, 40, 160, 1);
  --editor-purple-border: #8855cc;
  --editor-purple-border-hover: #aa77ee;
}

/* --- FONTS --- */
@font-face {
  font-family: "Google Sans";
  src: url("fonts/GoogleSans-VariableFont.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Crystal";
  src: url("fonts/Crystal-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

/* --- GLOBAL RESET & BODY --- */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Google Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #141414;
  /* background-color: black; */
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Typography Utilities */
.text-light {
  font-weight: 300;
}
.text-regular {
  font-weight: 400;
}
.text-semibold {
  font-weight: 600;
}
.text-bold {
  font-weight: 700;
}

.small-thin-text {
  font-size: 0.75rem;
  font-weight: 300;
  opacity: 0.9;
  margin-left: 5px;
  vertical-align: middle;
}

/* --- GOOGLE ICONS --- */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  font-size: 20px;
  color: inherit;
  color: var(--accent-primary);
  vertical-align: middle;
}

/* --- MAIN CONTAINER --- */
.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 1300px;
  width: 100%;
  background-color: var(--bg-dark);
  background-color: #141414;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative; /* Ensure popovers can be absolute relative to this if needed, or body */
}

/* --- TOP BAR HEADER --- */
.top-bar {
  height: 60px;
  margin: 8px;

  background-color: var(--bg-main);
  border-radius: var(--radius-lg);
  /* border-bottom: 1px solid #1a1a1a; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  flex-shrink: 0;
  z-index: 500;
  color: var(--text-inverse);
}

.app-branding {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-inverse);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.brand-first-word {
  font-weight: 100;
  text-transform: capitalize;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Credit Badge */
.credit-badge {
  display: none !important;
  background: var(--bg-light);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 0.9rem;
  /* border: 1px solid var(--text-primary); */
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.credit-icon {
  color: var(--accent-primary);
}

.credit-icon-container {
  width: 12px;
  height: 14px;
}
.credit-container {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.credit-container-small {
  display: inline;
}

.credit-icon-container-small {
  display: inline;

  width: 8px;
  height: 8px;
}

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

.credit-icon-svg-small {
  fill: var(--text-secondary);
}

.credit-badge .credit-icon-svg {
  fill: var(--text-primary);
}

/* --- PROFILE & DROPDOWN --- */
.profile-wrapper {
  position: relative;
}

.profile-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-light);
  color: var(--text-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  /* border: 1px solid transparent; */
  border: none;
  transition: border-color 0.2s;
  border-color: var(--text-primary);
}

#profile-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-icon:hover {
  border-color: var(--text-primary);
  background-color: var(--color-white);
}

.profile-menu {
  position: absolute;
  top: 120%;
  right: 0;
  background-color: var(--color-white);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  width: 180px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  z-index: 1000;
  animation: fadeInMenu 0.1s ease-out;
}

.profile-menu.hidden {
  display: none;
}

.menu-item {
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 10px 15px;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.1s;
  width: 100%;
  font-weight: 400;
}
.menu-item:hover {
  background-color: var(--surface-primary-hover);
}
.menu-item.text-red {
  color: var(--status-red-soft);
}
.menu-item.text-red:hover {
  background-color: var(--status-red-soft-bg);
}
.menu-divider {
  height: 1px;
  background-color: var(--border-base);
  margin: 4px 0;
}

@keyframes fadeInMenu {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   ACCORDION LAYOUT SYSTEM
   ========================================= */

.accordion-wrapper {
  display: flex;
  flex-grow: 1;
  height: calc(100% - 70px);
  overflow-y: hidden;
  overflow-x: auto;
  position: relative;
  /* Updated Spacing */
  padding: 8px;
  padding-top: 0px;
  gap: 8px;
}

.acc-section {
  height: 100%;
  transition:
    flex-grow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    min-width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  /* background: var(--bg-main); */
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: none;
}

/* Expanded */
.acc-section.active {
  flex-grow: 1;
  width: auto;
  min-width: 600px;
}

/* Collapsed */
.acc-section.inactive {
  flex-grow: 0;
  width: 100px;
  min-width: 100px;
  background: var(--bg-main);
  cursor: pointer;
  border-radius: var(--radius-accordion-inactive);
}
.acc-section.inactive:hover {
  background: var(--bg-main);
}
/* Trigger bg change on card click in inactive state */
.acc-section.inactive:active {
  background: var(--bg-main);
}

.collapsed-view {
  height: 100%;
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 10px;
  position: relative;
  pointer-events: auto;
  transition: all 0.3s ease;

  /* NEW: Ensure content stays above the ::after background */
  z-index: 1;
}

.selection-list-container {
  flex-grow: 1;
  width: 100%;
  height: 100%; /* Occupy full height of parent */
  overflow: hidden; /* Disable scrolling here */
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0; /* Critical for Flexbox nested scrolling */
}

.selection-list-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome/Safari */
}

.selection-list-container .vertical-img-list {
  /* Inherits correct properties from above */
  height: auto;
  overflow-y: auto;
}

/* Re-enable pointer events for specific children */
.collapsed-view .vertical-title-box,
.collapsed-view .accordion-toggle-btn {
  pointer-events: auto;
}

.acc-section.inactive .collapsed-view {
  display: flex;
}
.acc-section.active .collapsed-view {
  display: none;
}

.collapsed-content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;

  border-radius: var(--radius-lg);

  /* Ensure it doesn't overflow parent flex */
  min-height: 0;
  overflow: hidden;
  margin-bottom: 8px; /* Space before the toggle button */
  position: relative;
}

.pos-next .collapsed-content-wrapper {
  /* border: 1px dashed var(--text-secondary); */
  border: none;
}

.collapsed-content-wrapper .selection-list-container,
.collapsed-content-wrapper .vertical-img-list {
  flex-grow: 1;
  width: 100%;
  /* Fix for Firefox/Flex overflow */
  min-height: 0;
}

.vertical-title-box {
  writing-mode: horizontal-tb;
  transform: none;
  /* CHANGED: Smaller text */
  font-size: 0.7rem;
  font-weight: 200;
  text-transform: capitalize;
  color: #525252;
  margin-top: 23px;
  margin-bottom: 10px;
  white-space: normal;
  text-align: center;
  width: 100%;
  padding: 0 8px;
  line-height: 1.3;
}

.pos-next .vertical-title-box {
  margin-top: 26px;
}
/* Vertical List of Selected Images */
.vertical-img-list {
  position: relative;
  width: 100%;
  padding: 6px;

  /* SCROLLING HAPPENS HERE */
  overflow-y: auto;
  overflow-x: hidden;

  /* Flex Properties to fill space */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0; /* Allow shrinking below content size */
  height: auto; /* Let Flexbox control height */

  gap: 10px;
  scrollbar-width: none;
  margin-top: 0;
  margin-bottom: 0;
}

.collapsed-actions {
  display: none !important;
  flex-shrink: 0; /* Prevent shrinking */
  width: 100%;
  padding: 10px;
  height: 80px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  z-index: 5; /* Ensure it stays on top */
  background-color: transparent; /* Or var(--bg-main) if overlap occurs */

  /* ADDED: Anchor for tooltips */
  position: relative;
}

.circular-action-btn {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--text-secondary);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
  padding: 0;
}

.circular-action-btn .material-symbols-outlined {
  font-size: 12px; /* Icon size */
}

/* Hover States */
.circular-action-btn:hover {
  border-color: var(--text-inverse);
  color: var(--text-inverse);
  transform: scale(1.05);
}

.circular-action-btn:active {
  transform: scale(0.95);
}

/* Download Variant Hover */
.circular-action-btn.download:hover {
  background-color: var(--accent-primary);
  color: var(--text-dark);
  border-color: var(--accent-primary);
}

.circular-action-btn::after {
  content: "";
  position: absolute;

  /* Positioning relative to .collapsed-actions */

  width: 100%; /* Spans full width of container to center text */

  background-color: transparent;
  border: none;
  box-shadow: none;

  color: var(--text-secondary);

  padding: 0;
  font-size: 0.7rem;
  font-weight: 200;
  text-align: center;
  text-justify: center;
  line-height: 1.1;

  white-space: pre; /* Enable Two Lines */

  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.circular-action-btn:hover::after {
  opacity: 1;
  visibility: visible;
}

.circular-action-btn.download:hover::after {
  content: "Download\aSelection";
  text-align: center;
  left: 12px;
  bottom: 25px; /* Sits above the button row */
}

.circular-action-btn.discard:hover::after {
  content: "Clear\aThe List";
  text-align: center;
  left: -12px;
  bottom: 25px; /* Sits above the button row */
}

/* Discard Variant Hover */
.circular-action-btn.discard:hover {
  background-color: rgba(255, 82, 82, 0.15);
  color: var(--status-red-bright);
  border-color: var(--status-red-bright);
}

/* Spinner for Zipping State */
.circular-action-btn .spin {
  animation: spin 1s linear infinite;
  font-size: 18px;
}

/* Hide legacy text buttons if they still exist in CSS but not DOM */
.download-selection-text-btn,
.clear-selection-text-btn {
  display: none;
}

.empty-selection-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-secondary);
  font-size: 0.65rem;
  text-align: center;
  font-weight: 200;
  /* margin-top: 50%; */
  width: 86px;

  line-height: 1.5;
  opacity: 0.7;
}

.collapsed-actions .download-selection-text-btn,
.collapsed-actions .clear-selection-text-btn {
  width: 100%;
  padding: 8px 4px; /* Tighter padding */
  font-size: 0.65rem; /* Smaller text */
}

.vertical-img-list::-webkit-scrollbar {
  display: none;
}

.mini-img-card {
  width: 100%;
  height: auto;

  /* FIX: Standard stacking context, no isolation, no transforms */
  position: relative;
  z-index: 0;

  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;

  /* Ensure the background is filled so it doesn't look transparent if paint delays */
  background-color: var(--bg-card);
}

.mini-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  display: block;
  /* FIX: Removed position relative and z-index to prevents layer conflicts */
}

.accordion-toggle-btn {
  position: relative;
  overflow: hidden; /* Critical for slide effect */
  width: 70px;
  height: 70px;
  margin-bottom: 5px;
  background-color: var(--bg-mid); /* DEFAULT GRAY */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-full);

  transition:
    transform 0.2s,
    background 0.2s;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-inverse); /* White text on gray */
  pointer-events: auto;

  /* Prevent shrinking and add top margin */
  flex-shrink: 0;
  margin-top: 10px;
}

.pos-next .accordion-toggle-btn:hover {
  transform: scale(1.1);
  background-color: var(--accent-primary);
}

.pos-next .accordion-toggle-btn:hover .material-symbols-outlined,
.pos-next .accordion-toggle-btn:hover .acc-btn-number {
  color: var(--text-primary);
}

.pos-next .accordion-toggle-btn.step-ready {
  background-color: var(--accent-primary);
  color: var(--text-dark);
}
.pos-next .accordion-toggle-btn.step-ready:hover {
  background-color: var(--accent-hover);
}

.accordion-toggle-btn.show-back:hover {
  background-color: var(--accent-primary); /* Or --accent-hover */
  color: var(--text-dark);
}

.acc-btn-number {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 0 4px;
  text-transform: uppercase;
  word-wrap: break-word;

  /* NEW: Smooth Motion Transition */
  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.3s ease;
  transform: translateX(0);
  opacity: 1;
}

.acc-btn-number.is-text {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.accordion-toggle-btn.show-back {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  margin-bottom: 10px;
}
.acc-btn-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Start Position: Centered vertically, but moved far LEFT (-200%) */
  transform: translate(-200%, -50%);
  opacity: 1;

  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease;

  /* Ensure it exists in DOM but doesn't block clicks */
  pointer-events: none;
  font-size: 24px;
  font-weight: bold;

  /* Force block display so transforms work, override any 'none' */
  display: block !important;

  /* Override global green color to ensure visibility on hover */
  color: var(--text-dark);
}

.accordion-toggle-btn.show-back .acc-btn-icon.icon-back {
  display: block;
}
.accordion-toggle-btn.show-forward .acc-btn-icon.icon-forward {
  display: block;
}

.accordion-toggle-btn.show-back:hover .acc-btn-number,
.accordion-toggle-btn.show-forward:hover .acc-btn-number {
  transform: translateX(100%); /* Move Right Out */
  opacity: 1;
  display: block !important; /* Prevent legacy CSS from hiding it instantly */
}

/* Move Icon CENTER (In from Left) */
.accordion-toggle-btn.show-back:hover .acc-btn-icon.icon-back,
.accordion-toggle-btn.show-forward:hover .acc-btn-icon.icon-forward {
  transform: translate(-50%, -50%); /* Move to Absolute Center */
  opacity: 1;
}

/* Keep irrelevant icons hidden */
.acc-btn-icon.icon-back,
.acc-btn-icon.icon-forward {
  display: none;
}

/* Dynamic Hover Icons */
.accordion-toggle-btn.show-back:hover .acc-btn-number {
  display: none;
}
.accordion-toggle-btn.show-back:hover .acc-btn-icon.icon-back {
  display: block;
}
.accordion-toggle-btn.show-back:hover .acc-btn-icon.icon-forward {
  display: none;
}

#btn-expand-perfect,
.pos-next .show-forward.accordion-toggle-btn {
  width: 70px;
  height: 70px;
  margin-bottom: -1px;
}

#btn-expand-perfect {
  margin-bottom: 6px;
}

.pos-next #btn-expand-perfect {
  margin-bottom: 0px;
}

.accordion-toggle-btn.show-forward:hover .acc-btn-number {
  display: none;
}
.accordion-toggle-btn.show-forward:hover .acc-btn-icon.icon-forward {
  display: block;
}
.accordion-toggle-btn.show-forward:hover .acc-btn-icon.icon-back {
  display: none;
}

/* --- EXPANDED VIEW UI --- */
.expanded-view {
  height: 100%;
  width: 100%;
  display: none;
  flex-direction: row;
  overflow: hidden;
}
.acc-section.active .expanded-view {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}
/* 
.acc-section.pos-left .collapsed-view {
  background-color: var(--bg-main);
} */

.acc-section.pos-right .collapsed-view {
  transition: none;
  box-shadow: none; /* Reset shadow for non-next items */
}

/* Apply shadow ONLY to the immediate next section */
.acc-section.pos-next .collapsed-view {
  /* box-shadow: inset 0 0 0 8px var(--bg-main); */
  box-shadow: none;
}

.acc-section.pos-right.pos-next .collapsed-view {
  /* background-color: var(--bg-dark); */
  background-color: var(--bg-main);

  border-radius: 50px;
  padding-bottom: 0px;
  /* box-shadow: inset 0 0 0 8px var(--bg-main); */
  box-shadow: inset 0 0 0 8px var(--accent-primary);
  padding-bottom: 16px;
  transition:
    border-color 0.3s,
    box-shadow 0.4s ease-in-out;
}

/* Removes the 8px accent shadow when an image is selected (Driven safely by JS class) */
.acc-section.pos-right.pos-next .collapsed-view.has-selection {
  box-shadow: inset 0 0 0 0 transparent;
}

.acc-section.pos-right .collapsed-view:has(.accordion-toggle-btn:hover) {
  box-shadow: inset 0 0 0 100px var(--bg-main);
}

.acc-section.pos-right.pos-next
  .collapsed-view.has-selection:has(.accordion-toggle-btn:hover) {
  /* box-shadow: inset 0 0 0 8px var(--bg-dark); */
  box-shadow: inset 0 0 0 100px var(--bg-main);
}

/*  */
/*  */
/*  */

.collapsed-view:not(.has-selection):has(.accordion-toggle-btn:hover)
  .marquee-svg {
  opacity: 1;
}

/* Change fill when toggle button is hovered (Has Selection) */
.collapsed-view.has-selection:has(.accordion-toggle-btn:hover) .marquee-text {
  /* fill: var(--text-primary); */
  opacity: 1;
}

/* Change fill when toggle button is hovered (No Selection) */
.pos-next
  .collapsed-view:not(.has-selection):has(.accordion-toggle-btn:hover)
  .marquee-text {
  /* fill: var(--text-primary); */
  fill: var(--accent-primary);
}

/*  */
/*  */
/*  */

.acc-section.pos-right .vertical-img-list,
.acc-section.pos-right .vertical-title-box {
  color: var(--text-secondary);
  background-color: transparent;
}

.acc-section.pos-left .collapsed-content-wrapper {
  border: none;
}

.acc-section.pos-left .vertical-title-box {
  color: var(--text-primary);
  color: var(--text-secondary);
  font-weight: 400;
}

/* --- SECTION 1: PERSON & PLACE --- */
.sec1-left-panel {
  width: 380px;
  min-width: 380px;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  padding: 8px;
}

.sec1-right-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  /* background-color: var(--bg-main); */
  overflow: hidden;
  /* background-color: var(--bg-dark); */
  background-color: var(--bg-dark);
  margin: 8px;
  margin-left: 0;
  border-radius: var(--radius-md);
}
.sec1-right-panel {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Sub-Boxes (Dark Panels) */
.sub-box {
  position: relative;
  background: var(--bg-dark);
  border-radius: var(--radius-md);
  padding: 20px;
  padding-bottom: 25px;
  margin-bottom: 8px;
}

.sub-box-color--02 {
  background-color: var(--bg-mid);
}

h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-weight: 100;
  color: var(--text-inverse);
  text-transform: capitalize;
}

/* Hair Flex Row (New) */
.hair-flex-row {
  display: flex;
  gap: 6px;
  width: 100%;
}
.hair-flex-row .form-group {
  margin-bottom: 0;
  flex: 1 1 0;
  min-width: 0;
}

.hair-flex-row .select-display-text {
  /* Updated styling for split label/value handled by flex in general rule */
  /* padding: 8px 4px 8px 8px; */

  background-position: right 2px center;
  width: 100%;
  padding-right: 30px;
}

/* NEW RULE: Hide value for hair-related dropdowns */
.hair-flex-row .select-display-text .dd-value {
  display: none;
}

.hair-row-container label {
  width: 100%;
}

/* --- SECTION 2: POSES --- */
.pose-layout {
  display: flex;
  flex-direction: column;

  /* width: 100%; REMOVED fixed width to allow flex sharing */
  flex-grow: 1; /* ADDED flex-grow */
  min-width: 0; /* ADDED to prevent flex overflow */
  margin: 8px;
  background-color: var(--bg-dark);
  border-radius: var(--radius-md);
  width: 100%;
}

.pose-stream-area {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  /* padding-bottom: 450px; Remove giant padding, rely on structure */
  background-color: transparent; /* Changed to transparent for new parent */
  scrollbar-width: none;
}

.product-layout {
  position: relative;
  display: flex;
  flex-direction: row; /* Horizontal Split now */
  height: 100%;
  /* width: 100%; REMOVED fixed width to allow flex sharing */
  flex-grow: 1; /* ADDED flex-grow */
  min-width: 0; /* ADDED to prevent flex overflow */
}

.pose-stream-area::-webkit-scrollbar {
  display: none;
}

.pose-input-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: transparent;
  width: 100%;
}

.pose-input-stack .custom-pose-dropdown {
  width: 100%;
}

.pose-bottom-editor {
  /* position: absolute; removed abs */
  /* bottom: 0; */
  /* left: 0; */
  /* right: 0; */
  background: var(--bg-main);
  padding: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0px;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  /* max-height: 400px; */
  transition: max-height 0.3s ease;
  flex-shrink: 0; /* Keep it fixed height relative to flex */

  width: calc(100%);
  transform: translateY(20px);
  align-self: center;
}

/* New List Container */
#pose-selection-list {
  list-style: none;
  width: 100%;

  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Increased gap for better spacing between presets */
  overflow-y: visible; /* Let the parent scroll-content handle it */
  /* Hide Scrollbar for Firefox */
  scrollbar-width: none;
  margin-bottom: 20px;
  position: relative;
  z-index: 0;
  padding: 0;
}

/* Hide Scrollbar for Chrome, Safari, Edge */
#pose-selection-list::-webkit-scrollbar {
  display: none;
}

/* Updated Pose List Item (Grid Layout) */
.pose-list-item {
  font-size: 0.75rem;
  color: var(--text-inverse);
  background: var(
    --bg-main
  ); /* Changed from --bg-card to match main lighter gray */

  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  position: relative;
  z-index: 10;
  width: 100%;
}

.pose-list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pose-list-number {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  color: var(--text-inverse);
  background-color: var(--text-primary);

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pose-list-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  background-color: var(--text-inverse);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  display: inline-block;
  padding: 10px;
}

.pose-list-remove {
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-muted);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  transition: all 0.2s;
  color: var(--text-primary);
}

.pose-list-remove .material-symbols-outlined {
  color: var(--text-muted);
}

.pose-list-remove:hover {
  color: var(--status-red-bright);
  border-color: var(--status-red-bright);
}

.pose-list-remove .material-symbols-outlined {
  font-size: 18px;
}

.pose-actions-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 4px;
}
.pose-actions-group #btn-alter-pose {
  position: relative;
  border-radius: var(--radius-xl);
  height: 48px;
  width: 100%;
}

#btn-alter-pose {
  position: relative;
}

.pose-actions-group #btn-continue-to-products {
  display: none;
}
/* Base Model Card (Batch) */
.base-model-group-card {
  border-radius: var(--radius-md);
  padding: 15px;
  margin-bottom: 15px;
  background: var(--bg-card); /* Dark */
  animation: fadeIn 0.4s ease-out;
  width: 100%;
}

.base-model-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 5px;
  padding-bottom: 10px;
  color: var(--text-inverse);
}

.base-model-header .batch-info-group {
  flex-grow: 1;
}

.base-model-header .status-icon {
  margin-left: 0;
  display: none;
}

.base-model-thumb {
  width: 25px;
  height: 25px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  object-position: top;
  align-self: flex-start;
}
.group-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-inverse);
}

/* Presets UI */
.pose-presets-row {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 5px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.pose-presets-row::-webkit-scrollbar {
  display: none;
}
.pose-preset-chip {
  background: var(--bg-card);
  color: var(--text-inverse);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 5px 12px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.preset-remove {
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
}
.preset-remove:hover {
  color: var(--status-red-bright);
}

.pose-batch-count-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.pose-number-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-justify: center;
  line-height: 0.4;
  width: 22px;
  height: 22px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
}

/* NEW: Interactive states for + and - buttons */
.decrease-pose-number,
.increase-pose-number {
  cursor: pointer;
  transition: background-color 0.2s;
}

.decrease-pose-number:hover,
.increase-pose-number:hover {
  background-color: var(--accent-primary);
}

.display-pose-number {
  font-size: 0.7rem;
  width: auto;
  min-width: 20px;
}

/* --- POSE SECTION UTILITIES --- */
.pose-sub-box {
  padding-bottom: 15px;
}

.pose-sub-box-header {
  position: static;
  padding: 0;
  background: transparent;
  margin-bottom: 15px;
}

.pose-dropdowns-container {
  padding: 0;
  overflow: visible;
}

.pose-add-row {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}

.pose-batch-counter-wrapper {
  flex-shrink: 0;
  padding: 5px;
  height: 42px;
}

.btn-add-pose {
  height: 42px;
  padding: 0 15px;
}

.pose-list-item-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.pose-list-batch-container {
  height: 28px;
}

.display-pose-number {
  font-size: 0.7rem;
}
.increase-pose-number {
  padding-bottom: 2px;
}

/* ADD PRESET ROW GRID ALIGNMENT */
.add-preset-row {
  display: grid;
  /* Updated columns: 32px for # circle, rest for inputs, 40px for button */
  grid-template-columns: 33px 1fr 1fr 1fr 1fr 80px 33px;
  gap: 1px;
  align-items: center;
  padding-left: 0; /* Removed offset padding */
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-lg);
  margin-bottom: 1px;
}
.add-preset-row .form-group {
  margin-bottom: 0;
  min-width: 0;
}
.add-preset-row .select-display-text {
  padding-right: 30px;
  width: 100%;
}

.pose-list-number.static {
  display: block;
  height: 33px;
  width: 33px;
  border-radius: 50%;
  background: var(--surface-primary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0;
  z-index: 400;
}

/* --- SECTION 3: PRODUCTS (VTO) --- */
.product-layout {
  position: relative;
  display: flex;
  flex-direction: row; /* Horizontal Split now */
  height: 100%;
  width: 100%;
}

.product-stream-area {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  /* padding-bottom: 350px; */
  scrollbar-width: none;
  background: transparent;
}

.product-stream-area::-webkit-scrollbar {
  display: none;
}

/* NEW VERTICAL EDITOR PANEL (RIGHT SIDE) */
/* UPDATED: Removed overflow-y to handle scroll internally */
.vto-right-panel {
  position: relative;
  width: 380px;
  min-width: 380px;
  height: 100%;
  /* background: var(--bg-dark); */
  padding: 8px;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  gap: 0; /* Gap handled by scroll content padding */
  z-index: 50;
  overflow-y: hidden; /* Prevent full panel scroll */
  /* margin: 20px; */
  border-radius: var(--radius-md);
  padding-bottom: 0; /* Reset */
  /* margin-right: 20px; */
}

/* NEW: Scroll Wrapper for VTO Inputs */
.vto-scroll-content {
  flex-grow: 1;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 90px; /* Space for the footer */
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
}

.vto-scroll-content::-webkit-scrollbar {
  display: none;
}

.action-tryon {
  width: 100%;
}

/* --- UTILITIES --- */
.continue-btn-wrapper {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}
.continue-btn {
  background-color: var(--accent-primary);
  color: var(--text-primary);
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-xl);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s;
}
.continue-btn:hover {
  transform: translateY(-2px);
  background-color: var(--accent-hover);
}

/* --- FORM ELEMENTS --- */
.form-group {
  position: relative;
  margin-bottom: 12px;
}

.form-group label {
  font-size: 0.75rem;
  margin-bottom: 8px;
}

.form-group.garment-upload-container {
  position: relative;
  margin-bottom: 0;
  height: 100%;
  /* flex-grow: 1; */
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Unified Input Styles */
select,
textarea,
input[type="text"] {
  width: 100%;
  background-color: var(--surface-primary);
  border: 0px solid var(--border-base);
  color: var(--text-primary);
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 400;
  outline: none;
  font-family: inherit;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

/* select:hover,
input[type="text"]:hover {
  background-color: var(--surface-primary-hover);
} */

select:focus,
textarea:focus,
input[type="text"]:focus {
  border-color: var(--accent-focus);
}

/* NEW: Override generic input styles for save-state elements with higher specificity */
input[type="text"].save-state,
select.save-state,
textarea.save-state {
  height: 33px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-primary);
}

select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23AAAAAA" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 24px;
  padding-right: 40px;
  cursor: pointer;
}

/* Merged Dropdown */
.form-group.merged-dropdown label {
  display: none;
}
.select-wrapper {
  position: relative;
  width: 100%;
}
.select-display-text {
  width: 100%;
  background-color: var(--surface-primary);
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  height: 33px;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-primary);
  background-image: url('data:image/svg+xml;utf8,<svg fill="%2318181c" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 24px;
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: background-color 0.2s;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dd-label {
  font-weight: 800;
  font-size: 0.7rem;
  color: var(--text-primary);
}

.dd-value {
  color: var(--text-primary);
  font-size: 0.7rem;
  font-weight: 400;
  margin-right: 5px; /* Slight offset from the arrow */
}

.native-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.select-wrapper:hover .select-display-text {
  background-color: var(--surface-primary-hover);
}

/* RESPONSIVE DROPDOWN FIXES FOR BOTTOM EDITORS */
.pose-bottom-editor .select-display-text,
.vto-right-panel .select-display-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem; /* Slightly smaller text for fit */
}

textarea {
  resize: none;
}
input[type="color"] {
  border: none !important;
  padding: 0 !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 40px;
  cursor: pointer;
  width: 100%;
}

/* File Upload */
.hidden-input {
  display: none !important;
}

.custom-file-upload .default-content {
  color: var(--text-inverse);
}

.custom-file-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px dashed var(--text-muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 5px;
  height: 120px;
  overflow: hidden;
}
.custom-file-upload:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--text-inverse);
  color: var(--text-inverse);
}
.custom-file-upload.has-file {
  border-style: solid;
  border-color: var(--border-base);
  padding: 0;
  background-color: var(--color-black);
}
.custom-file-upload .default-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 10px;
}
.custom-file-upload .icon {
  font-size: 24px;

  color: inherit;
  line-height: 1;
}
.custom-file-upload .text {
  font-size: 0.7rem;
  font-weight: 400;
}
.custom-file-upload .preview-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-file-upload .preview-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
  text-align: center;
  text-justify: center;
}

.material-symbols-outlined.remove-btn {
  font-size: 12px;
  padding-top: 1px;
}

.remove-btn:hover {
  background: var(--status-red-bright);
}
.remove-btn .material-symbols-outlined {
  font-size: 14px;
  font-weight: bold;
}

.garment-full-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
  overflow: hidden;
  scrollbar-width: 0;
}

.garment-full-container::-webkit-scrollbar {
  display: none;
}
/* Garment Grid */
.garment-split-row {
  position: relative;
  display: flex;
  flex-direction: column; /* Stacking Vertically in Right Panel */
  /* gap: 15px; */
  width: 100%;
  align-items: stretch;
  height: calc(100% - 80px); /* Allow auto height for scrolling */
  overflow: hidden;
  background-color: var(--bg-dark);
  border-radius: var(--radius-md);
  padding-top: 25px;
  padding: 20px;
}
.try-on-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* Fixed height for alignment */
  background-color: var(--bg-dark);
  z-index: 99;

  /* NEW: Flex Layout for Title + Buttons */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-bottom: 10px;
}

.try-on-header h4 {
  margin: 0; /* Reset margins */
}

.garment-half-column {
  position: relative;
  display: flex;
  height: 50%;
  flex-direction: column;
  gap: 6px;
  background-color: var(--bg-mid);

  border-radius: var(--radius-md2);
  overflow: hidden;
  overflow-x: hidden;
}

.garment-half-column-header {
  position: relative;

  padding: 15px 20px; /* Adjusted padding */
  background-color: var(--bg-mid);
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  height: 60px;
}

/* Label fix */
.garment-half-column-header label {
  margin-bottom: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-inverse);
}

.garment-half-column label,
.pose-bottom-editor label {
  /* margin-bottom: 10px; */
  font-size: 1rem;
  font-weight: 100;
  color: var(--text-inverse);
  text-transform: capitalize;
}
.pose-bottom-editor label {
  margin-bottom: 12px;
  color: var(--text-primary);
}

.main-stream-column {
  display: flex;
  flex-direction: column;
  margin: 8px;
  background-color: var(--bg-dark);
  flex-grow: 1;
  flex-direction: column;
  /* height: 100%;  <-- REMOVE THIS LINE */
  border-radius: var(--radius-md);
  overflow: hidden;
  width: 100%;
}

.tryon-input-container {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  background: transparent;
  border-radius: var(--radius-md);
}

/* UPDATED: Fixed footer logic for Try-On button */
.btn-tryon-container {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 16px;

  padding-right: 0;
  left: 0;
  background-color: transparent;
  z-index: 200; /* Sit above scroll content */
}

.primary-btn.btn-run-tryon {
  width: 100%;
}

/* UPDATED: Vertical List Style for Garments */
.garment-vertical-list {
  margin-top: 60px; /* Match header height */
  padding: 10px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  height: calc(100% - 60px); /* Fill remaining space */

  /* Remove old border/bg styles */
  border: none;
  background: transparent;
}

.garment-vertical-list::-webkit-scrollbar {
  display: none;
}

.garment-vertical-list.drag-over {
  border-color: var(--accent-focus);
  background-color: rgba(255, 255, 255, 0.05);
}

/* REPLACED: .garment-card styles for Vertical Row Item */
.garment-item-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Align top so text area can expand */
  gap: 10px;
  background-color: var(--text-inverse);
  padding: 8px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  transition: border-color 0.2s;
  position: relative;
  width: 100%;
}

.garment-item-row.dragging {
  opacity: 0.5;
  border-color: var(--accent-focus);
  transform: scale(0.98);
}
.garment-item-row.sort-target {
  border-color: var(--accent-primary);
  transform: scale(1.02);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.garment-item-row.just-moved {
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.garment-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  display: block;
}

/* New Per-Item Description Box */
.garment-item-desc {
  flex-grow: 1;
  background-color: var(--surface-primary);
  border: 1px solid var(--border-base);
  color: var(--text-primary);
  padding: 8px;
  padding-right: 18px;

  border-radius: var(--radius-xs);
  font-size: 0.8rem;
  resize: none;
  height: 60px; /* Match thumbnail height */
  font-family: inherit;
  height: 80px; /* Match slot height */
  font-size: 0.75rem;
}

.garment-item-desc:focus {
  outline: none;
  border-color: var(--accent-focus);
}

/* Updated Remove Button Position for Row */
.garment-item-row .remove-btn {
  position: absolute;
  top: 14px;
  left: 50px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  cursor: pointer;
  z-index: 2;
  background-color: transparent;

  background: rgba(0, 0, 0, 0.6);
  color: white;

  cursor: pointer;
  z-index: 2;
  padding-top: 0px;
  padding-left: 0px;
}

/* NEW: Wrapper for side-by-side buttons */
.garment-button-wrapper {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: auto; /* Shrink to fit buttons */
}

/* Ensure buttons inside the wrapper share space equally */
.garment-button-wrapper .garment-add-card {
  flex: 1;
  width: auto; /* Override fixed width */
  width: 32px;
  height: 32px;
}

.add-gallery-button-container {
  display: flex;
  flex-direction: row;
}

.add-gallery-button-container {
  display: flex;
  flex-direction: row;
}

/* UPDATED: Add Card Styles to fit Vertical List (Buttons) */
.garment-add-card {
  width: auto;
  height: 32px;
  width: 32px;
  padding: 0 12px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;

  cursor: pointer;
  flex: 0 0 auto;
}

.garment-add-card .material-symbols-outlined {
  font-size: 20px;
}

.garment-add-card:not(.gallery-btn) {
  background-color: var(--bg-green-btn);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-lg); /* Pill shape */
  font-weight: 700;

  /* Match the bouncy animation of the pose button */
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s;
}

.garment-add-card:not(.gallery-btn):hover {
  background-color: var(--accent-bright);
  color: var(--text-primary);
}

.garment-add-card:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--text-inverse);
  color: var(--text-inverse);
}

.garment-add-card .icon {
  font-size: 18px;
  margin-bottom: 0; /* Reset */
  color: inherit;
}
.garment-add-card .text {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

/* Gallery Button styling override */
.garment-add-card.gallery-btn {
  background-color: transparent;
  border: 1px dashed var(--bg-dark);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

/* Buttons */
.primary-btn {
  width: 100%;
  background-color: var(--accent-primary);
  color: var(--text-dark);
  border: none;
  padding: 15.25px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition:
    filter 0.2s,
    transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.primary-btn:hover:not(:disabled) {
  background-color: var(--accent-hover);
  /* transform: translateY(-1px); */
}
.primary-btn:disabled {
  background: var(--border-dark);
  color: var(--text-muted);
  cursor: not-allowed;
}
.primary-btn:disabled .credit-icon-svg {
  fill: var(--text-muted);
}
.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top: 2px solid var(--text-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

/* Secondary Button (Inverse for Dark Panels) */
.secondary-btn {
  background-color: transparent;
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
  height: 100%;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  width: 100%;
  font-weight: 600;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
}

.secondary-btn.icon-btn-small.material-symbols-outlined {
  border: 1px solid var(--text-muted) !important;
  color: var(--text-muted);
}

.secondary-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--text-inverse);
}
.secondary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.secondary-btn .material-symbols-outlined {
  font-size: 20px;
}

/* Batch Cards */
.batch-container {
  background: var(--bg-card);
  width: 100%;
  border-radius: var(--radius-md3);
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  animation: fadeIn 0.4s ease-out;
}
.batch-header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 0.85rem;
  color: var(--text-inverse);
}
.batch-info-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0; /* Crucial for flex child ellipsis */
}
.batch-meta-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 4px;
  color: var(--text-secondary);
  font-weight: 400;
  /* flex-wrap: wrap; */
  /* flex-shrink: 0; */
  line-height: 1.2;
  font-size: 12px;

  display: none;
}
/* NEW: Wrapper for Title and Actions in one line */
.batch-title-actions-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.batch-title-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* gap: 10px; */
  flex-grow: 1;
  min-width: 0;
}

.header-input-container {
  flex-grow: 1;
  min-width: 0;
  background: transparent !important;
  border: 1px solid var(--text-muted) !important;
  border-radius: var(--radius-sm);
  /* display: flex; REMOVED internal flex */
  /* align-items: center; REMOVED */
  overflow: hidden;
  /* padding-left: 0 !important; REMOVED */
}

.breadcrumb-wrapper {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 4px;
}

.breadcrumb-text {
  display: inline;
  background-color: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 700;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  text-align: left;
  height: auto;
}

.breadcrumb-text.is-parent {
  color: var(--text-secondary);
  opacity: 0.8;
}

.breadcrumb-text.collapsed-title,
.breadcrumb-text.style-name-crumb {
  color: var(--text-inverse);
}

.breadcrumb-divider {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Updated Input to fit beside breadcrumb */
.batch-title-input {
  background: transparent;
  border: none;
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.2s;
  padding: 8px 12px !important; /* Standard padding */
  background-color: transparent !important;
  min-width: 50px;
}

.batch-prompt-row {
  display: flex;
  align-items: center;
  color: var(--text-inverse);
}
.batch-params-row {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* Changed from 300px to 100% for full width responsiveness */
}

.batch-title-input:focus {
  outline: none;
  /* border-color: var(--accent-primary); */
}

.batch-actions .secondary-btn {
  font-size: 0.85rem;
  padding: 8px 16px;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  width: auto;
  border: none;
  background: #333;
  color: var(--text-inverse);
  font-weight: 400;
  box-shadow: none;
}
.batch-actions .secondary-btn:hover {
  background-color: #444;
}
.batch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  width: 100%;
}

/* Image Wrappers */
.image-wrapper {
  /* CHANGED: width: 15% -> calc(25% - 14px) to fit exactly 4 per row */

  /* 4 images */
  width: calc(25% - 14px);
  /* 5 images */
  width: calc(20% - 14.4px);
  width: calc(33.333% - 12px);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: fadeIn 0.3s ease-out;
  overflow: hidden;
  border-radius: var(--radius-xs);
  aspect-ratio: 3/4;
  background: var(--bg-card);
  border: 0px solid transparent;
  transition: border-color 0.2s;
}

#model-stream-container .image-wrapper {
  width: calc(25% - 13.5px);
  width: calc(33.333% - 12px);
}

#tryon-stream-container .image-wrapper {
  width: calc(33.333% - 12px);
}

.image-wrapper.selected {
  /* border-color: var(--accent-focus); */
  /* border-width: 2px; */

  outline: 2px solid var(--accent-focus);
}
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loading-placeholder {
  background-color: var(--bg-card);
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
}
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--border-dark);
  border-top: 3px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;

  /* ADDED: Margin to separate from text */
  margin-bottom: 8px;
}

/* NEW: Countdown Text Style */
.countdown-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums; /* Monospaced numbers to prevent jitter */
}

/* Overlay UI */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
  pointer-events: none;
}
.image-wrapper:hover .image-overlay,
.image-wrapper.selected .image-overlay {
  opacity: 1;
  pointer-events: auto;
}
.image-wrapper.selected:not(:hover) .image-overlay {
  background: transparent;
  backdrop-filter: none;
}
/* Selected state without hover: Only checkbox visible, others hidden */
.image-wrapper.selected:not(:hover) .overlay-dl-btn,
.image-wrapper.selected:not(:hover) .expand-btn-overlay,
.image-wrapper.selected:not(:hover) .overlay-bottom {
  opacity: 0;
  pointer-events: none;
}
.image-wrapper.selected:hover .overlay-dl-btn,
.image-wrapper.selected:hover .expand-btn-overlay,
.image-wrapper.selected:hover .overlay-bottom {
  opacity: 1;
  pointer-events: auto;
}

.overlay-top {
  display: flex;
  /* UPDATED: Use space-between to push left and right controls apart */
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: auto;
}

.checkbox-wrapper.overlay-checkbox {
  display: inline-block;
  position: relative;
  width: 28px; /* Increased to 28px to match buttons */
  height: 28px; /* Increased to 28px to match buttons */
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
}
.overlay-checkbox-native {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  margin: 0;
}
.checkbox-skin {
  position: absolute;
  top: 0;
  left: 0;
  height: 28px; /* Increased to 28px */
  width: 28px; /* Increased to 28px */
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%; /* Make Circular */
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  z-index: 1;
}
.overlay-checkbox-native:checked ~ .checkbox-skin {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.checkbox-skin:after {
  content: "";
  position: absolute;
  display: none;
  /* Re-centered for 28px Circle */
  left: 9px;
  top: 5px;
  width: 6px;
  height: 10px;
  border: solid var(--text-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.overlay-checkbox-native:checked ~ .checkbox-skin:after {
  display: block;
}
.overlay-dl-btn {
  /* Position relative/static to sit inside flex flow */
  position: relative;
  bottom: auto;
  right: auto;
  z-index: 20;

  /* Icon Button Styling */
  background: rgba(0, 0, 0, 0.6);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
  padding: 0;
  font-size: 0;

  /* Flex property to prevent shrinking */
  flex-shrink: 0;
}

.overlay-dl-btn:hover {
  background: var(--accent-hover);
  color: var(--text-primary);
  border-color: var(--accent-hover);
  transform: scale(1.1);
}

.overlay-dl-btn .material-symbols-outlined {
  font-size: 18px;
  vertical-align: middle;
}

.overlay-bottom {
  display: flex;
  flex-direction: row; /* Horizontal Layout */
  justify-content: flex-end; /* Editor Left, Download Right */
  align-items: center;
  gap: 6px;
  padding: 6px;
  width: 100%;
}

.overlay-var-btn {
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s;

  /* Flex properties to fill space */
  width: auto;
  flex-grow: 1;

  text-align: center;
  backdrop-filter: blur(4px);
  font-family: inherit;
}
.overlay-var-btn:hover {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-dark);
  transform: translateY(-1px);
}

/* Lightbox Expand Button - Centered */
.expand-btn-overlay {
  position: absolute;
  top: 50%; /* Truly centered */
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: 28px; /* SAME SIZE AS CHECKBOX */
  height: 28px; /* SAME SIZE AS CHECKBOX */
  border-radius: 50%;
  cursor: pointer;
  opacity: 0; /* Visible only on hover */
  transition:
    opacity 0.2s,
    background 0.2s;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.1s ease-in-out;
}
.image-wrapper:hover .expand-btn-overlay {
  opacity: 1;
}
.expand-btn-overlay:hover {
  background: var(--accent-primary);
  color: var(--text-dark);
  border-color: var(--accent-primary);
  transform: translate(-50%, -50%) scale(1.2);
}

.expand-btn-overlay:hover .expand-icon-container,
.expand-btn-overlay:hover .icon-svg {
  fill: var(--text-dark);
  color: var(--text-dark);
}

.image-wrapper:hover .image-overlay,
.image-wrapper.selected .image-overlay {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer; /* ADDED: Moved from JS inline style */
}
.image-wrapper.selected:not(:hover) .image-overlay {
  background: transparent;
  /* ... (lines 1104-1212 unchanged) ... */
  fill: var(--text-dark);
  color: var(--text-dark);
}

.top-left-control {
  width: 28px;
  height: 28px;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.top-left-control:hover + .top-right-control {
  display: none;
}

.top-right-control {
  height: auto; /* Match height of left control */
  display: flex;
  align-items: center;
  z-index: 10;
}

/* UPDATED: Hide old Overlay Buttons (Vary Soft & Vary Strong) */
.overlay-var-btn {
  display: none !important; /* HIDE THEM */
  /* ... old styles remain but are overridden ... */
}

.tooltip {
  position: fixed;
  background-color: var(--bg-dark);
  color: var(--text-inverse);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 1000;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
  border: 1px solid var(--border-dark);
  text-align: left;
  line-height: 2;
  transform: translateY(-100%);
  max-width: 280px;
}

/* Lightbox Overlay */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  padding: 20px;
}
.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-content-wrapper {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  max-height: 80vh;
  border-radius: var(--radius-lg);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--bg-main);
  color: var(--text-primary);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: background 0.2s;
  z-index: 3010;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Lightbox Nav Buttons */
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-main);
  color: var(--text-primary);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 3010;
}
.lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
.lightbox-nav-btn.prev {
  left: 20px;
  display: inline-block;
  padding-left: 16px;
}
.lightbox-nav-btn.next {
  right: 20px;
}
.lightbox-nav-btn .material-symbols-outlined {
  font-size: 28px;
}

/* Lightbox Thumbnails Strip */
.lightbox-thumbnails-container {
  display: flex;
  height: 80px;
  margin-top: 15px;
  z-index: 3010;
  width: 810px;
}
.lightbox-thumb-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  width: 100%;
  padding: 5px;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
  /* background-color: var(--bg-main); */
  /* border-radius: var(--radius-md); */
}
.lightbox-thumb {
  height: 100%;
  aspect-ratio: 3/4;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: all 0.2s;
  flex-shrink: 0;
}
.lightbox-thumb:hover {
  opacity: 1;
}
.lightbox-thumb.active {
  opacity: 1;
  border-color: var(--accent-primary);
}
.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-box {
  height: 100%;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;

  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  background: var(--bg-main);
  border-radius: var(--radius-md);
  overflow: hidden; /* Contain inner scroll */

  /* min-width: 1166px; */
  min-width: 100dvw;
  max-width: 100dvw;
}

#gallery-modal {
  justify-content: flex-start;
  overflow: auto;
  z-index: 20000;
}

#gallery-modal .gallery-box {
  margin: auto;
  flex-shrink: 0;
}

.gallery-unified-view {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: calc(100% - 60px); /* Subtract header */
  overflow: hidden;
  background-color: var(--bg-card);
}
.gallery-column {
  display: flex;
  flex-direction: column;
  height: 100%;

  position: relative;
  background-color: var(--bg-dark);
  min-width: 324px;
}
.gallery-column:last-child {
  border-right: none;
}

.gallery-column-half-container {
  position: relative;
  display: flex;
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
  background-color: var(--bg-dark);
  padding: 20px;
  padding-top: 10px;
  padding-bottom: 0px;
  border-radius: var(--radius-md);
}

.col-inventory {
  min-width: 380px;
  background-color: var(--bg-dark);
  padding: 15px;
  border-radius: var(--radius-md);
}

.col-editor {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;

  gap: 8px;
  background-color: transparent;
}

.col-selection {
  width: 25%;
  min-width: 240px;
  width: 240px;
  background-color: var(--bg-dark);
  padding: 15px;
}

.column-header {
  font-size: 1rem;
  font-weight: 100;
  color: var(--text-secondary);
  text-transform: capitalize;
  /* letter-spacing: 1px; */
  padding-bottom: 15px;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.col-inventory .column-header {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.gallery-header-controls {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  gap: 10px;
}

/* Specific Adjustments */
.gallery-upload-grid {
  background: transparent;
  padding: 0;

  gap: 6px;
  margin-top: 0;
}

.gallery-content.gallery-upload-grid {
  flex: 1 1 auto;

  background: transparent;
  padding: 0; /* Reset padding to 0 to fit narrow column */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  overflow-x: hidden; /* Force hide horizontal scroll */
  overflow-y: auto;
  align-content: start; /* Ensure items stack from top */
}

.mannequin-sub-slot .sub-slot-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  cursor: pointer;
  opacity: 0; /* Hidden until hover */
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mannequin-sub-slot:hover .sub-slot-remove {
  opacity: 1;
}

.mannequin-sub-slot.drag-over {
  border-color: var(--accent-primary);
  background-color: rgba(103, 238, 173, 0.1);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.mannequin-sub-slot .sub-slot-remove:hover {
  background: var(--status-red-bright);
  border-color: var(--status-red-bright);
  transform: scale(1.1);
}

.mannequin-sub-slot .sub-slot-remove svg {
  width: 8px;
  height: 8px;
  stroke: white;
  stroke-width: 3;
}

.scroll-y {
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 0; /* Removed space for scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.scroll-y::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Mannequin Wrapper overrides */
.combine-mannequin-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

/* Embedded Tag Editor (Moved from side panel to embedded) */
.tag-editor-panel-embedded {
  min-width: 210px;
  max-width: 364px;
  margin-top: 0;
  padding: 15px;
  background-color: var(--bg-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  height: 502px;
  overflow-y: auto;

  flex-shrink: 1;
  flex-grow: 1;
}

/* Hide Tab Header completely */
.gallery-nav-header {
  display: none !important;
}

/* Adjust Add Button in Left Col */
.gallery-add-new-row {
  margin-bottom: 10px;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding: 20px 25px;
  /* background-color: var(--bg-card); */
  /* border-bottom: 1px solid var(--border-dark); */
  margin-bottom: 0;
  flex-shrink: 0;
}
.gallery-header h3 {
  margin: 0;
  color: var(--text-inverse);
  font-weight: 200;
}

.gallery-header .close-btn {
  color: var(--text-primary);
}

.gallery-header .close-btn:hover {
  color: var(--text-secondary);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.close-btn:hover {
  color: var(--text-inverse);
}

.gallery-content {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Increased min-width to 210px to fit slots + selection bar */

  align-content: start;
  gap: 12px;
  padding: 15px;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.gallery-content::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.gallery-content {
  /* Increased min-width to 210px to fit slots + selection bar */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.gallery-dual-card:hover {
  border-color: var(--text-muted);
}

.gallery-dual-card.selected {
  border-color: var(--accent-primary);
  background-color: rgba(103, 238, 173, 0.05);
}

.gallery-slots-wrapper {
  flex-shrink: 0;
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 4px;
}
/* --- START OF PARTIAL style.css --- */

/*  */
/*  */
/*  */
/*  */
/*  */
/* Gallery Slot Interactivity */
.gallery-img-slot {
  cursor: pointer; /* Clickable for upload */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* --- START OF PARTIAL style.css --- */

/* NEW: Type Indicator Column (Left Side of Gallery Card) */
.gallery-type-indicator {
  width: 30px;
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
  border-right: 1px solid var(--border-dark);
  flex-shrink: 0;
  z-index: 5; /* Ensure it sits above background/images */
}

.gallery-type-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bg-dark);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  border: 1px solid var(--border-light);
  text-transform: uppercase;
  user-select: none;
  line-height: 1; /* Center text vertically */
}

/* Optional: Different colors for different types if needed later, 
   currently just standard dark/light styling */

/* --- END OF PARTIAL style.css --- */

.gallery-img-slot:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Empty State Icon in Gallery */
.gallery-img-slot .slot-add-icon {
  color: var(--text-muted);
  font-size: 24px;
  z-index: 1;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.gallery-img-slot:hover .slot-add-icon {
  opacity: 1;
  color: var(--text-inverse);
}

/* Hide add icon if image exists */
.gallery-img-slot img + .slot-add-icon {
  display: none;
}

.gallery-img-slot.drag-hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 2px solid var(--accent-primary);
  /* Ensure it sits on top of images visually */
  position: relative;
  z-index: 20;
}

/* Remove Button for Gallery Slots */
.gallery-slot-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  display: none;
  transition: background 0.2s;
}
.gallery-slot-remove:hover {
  background: var(--status-red-bright);
}
.gallery-slot-remove .material-symbols-outlined {
  font-size: 12px;
  color: white;
}
.gallery-img-slot:has(img):hover .gallery-slot-remove {
  display: flex;
}

.gallery-select-col {
  width: 40px;
  min-width: 40px;
  border-left: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Changed from space-between to center */
  padding: 8px 0;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
  cursor: pointer;

  align-self: flex-end;
  justify-self: flex-end;
}

.gallery-delete-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.gallery-delete-btn:hover {
  background-color: rgba(255, 82, 82, 0.1);
  color: var(--status-red-bright);
  opacity: 1;
}

.gallery-delete-btn .material-symbols-outlined {
  font-size: 16px;
}

/* Confirmation Popover */
.delete-popover {
  position: absolute; /* Relative to body or container */
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 15px;
  width: 220px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 21000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn 0.2s ease-out;
}

.delete-popover.hidden {
  display: none;
}

.popover-text {
  font-size: 0.8rem;
  color: var(--text-inverse);
  line-height: 1.4;
  text-align: center;
}

.popover-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.popover-btn {
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  flex: 1;
}

.popover-btn.cancel {
  background-color: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.popover-btn.cancel:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-inverse);
}

.popover-btn.confirm {
  background-color: var(--status-red-soft);
  color: white;
}
.popover-btn.confirm:hover {
  background-color: var(--status-red-bright);
}

.gallery-dual-card:hover .gallery-select-col {
  background-color: rgba(255, 255, 255, 0.02);
}

.gallery-dual-card.selected .gallery-select-col {
  background-color: var(--accent-focus-faint);
  border-left-color: var(--accent-primary);
}

/*  */
/*  */
/*  */
/*  */
/*  */
/* Inner Images */
.gallery-dual-card .gallery-img-slot {
  flex: 1;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;

  /* Inputs logic */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  height: 80px;
  width: 80px;
}

.gallery-dual-card .gallery-img-slot:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.gallery-left-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
  overflow: hidden;
}

.slot-type-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
}

.gallery-type-col {
  width: 60px; /* Increased width to fit larger elements */
  min-width: 60px;
  display: flex;
  flex-direction: column; /* Stack T and Text */
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-dark);
  background-color: rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  gap: 4px; /* Space between Circle and Text */
}

.type-badge-circle {
  width: 40px; /* Larger Circle */
  height: 40px; /* Larger Circle */
  border-radius: 50%;
  background-color: var(--bg-main);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; /* Larger Font */
  font-weight: 800; /* Bolder */
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.type-label-text {
  font-size: 8px;
  text-transform: capitalize;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.gallery-dual-card .gallery-img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Missing Image Placeholder (Visual indicator) */
.gallery-dual-card .gallery-img-slot.empty::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 75%,
    transparent
  );
  background-size: 10px 10px;
  pointer-events: none;
}

/* Label overlay (Front/Back) */
.gallery-dual-card .view-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.7);

  text-align: center;
  padding: 2px 0;
  text-transform: uppercase;
  pointer-events: none;
  font-size: 0.6rem;
}

.gallery-dual-card .slot-add-icon {
  font-size: 18px; /* Smaller icon */
}

.gallery-dual-card .checkmark .material-symbols-outlined {
  font-size: 14px;
  font-weight: 800;
}

/* Checked State */
.gallery-dual-card.selected .checkmark {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-dark);
  opacity: 1;
  transform: scale(1);
}

.gallery-dual-card.selected .checkmark:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.gallery-dual-card.selected .checkmark {
  opacity: 1;
  top: 4px;
  right: 4px;
  transform: scale(1);
}

.gallery-dual-card.selected .checkmark {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-dark);
  opacity: 1;
  transform: scale(1);
}

.gallery-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  aspect-ratio: 1 / 1;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item.selected {
  border-color: var(--accent-primary);
}
.gallery-item .checkmark {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--accent-primary);
  color: var(--text-dark);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
}
.gallery-item.selected .checkmark {
  opacity: 1;
}
.gallery-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.gallery-footer {
  display: flex !important;
  border-top: 1px solid var(--border-dark);
  padding-top: 15px;
  margin-top: 0;
  background-color: var(--bg-card);
  padding: 20px;
}

.gallery-footer .primary-btn {
  width: auto;
  padding-left: 30px;
  padding-right: 30px;
}

/* --- UTILS --- */
.hidden {
  display: none !important;
}
.loading-indicator {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.status-icon {
  vertical-align: middle;
  font-size: 16px !important;
}
.status-icon.success {
  color: var(--accent-primary);
}
.status-icon.failed {
  color: var(--status-red-bright);
}
.status-icon.spin {
  color: var(--text-secondary);
}

/* Spinning Animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spin {
  animation: spin 1s linear infinite;
}

/* --- AUTH MODAL --- */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.auth-box {
  background: var(--surface-panel);
  padding: 40px;
  border-radius: var(--radius-md);
  width: 400px;
  /* border: 1px solid var(--border-base); */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  text-align: center;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.auth-box h2 {
  color: var(--text-inverse);
  margin-top: 0;
  margin-bottom: 5px;
}

.auth-subtitle {
  color: var(--text-secondary);
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 0.9rem;
}
.auth-box input {
  width: 100%;
  padding: 12px;
  margin-bottom: 5px;
  background: var(--surface-input);
  border: 1px solid var(--border-base);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
.auth-box input:focus {
  border-color: var(--accent-focus);
  outline: none;
}
.auth-box .form-group {
  margin-bottom: 12px;
  text-align: left;
}
.auth-switch-container {
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid var(--border-base);
}
.auth-view-transition {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}
.auth-view-transition.transparent {
  opacity: 0;
  transform: translateY(10px);
}
.text-link-btn {
  background: none;
  border: none;
  color: var(--text-link);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 5px;
  transition: color 0.2s;
}
.text-link-btn:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.error-text {
  color: var(--status-red-soft);
  margin-top: 15px;
  font-size: 0.9rem;
  background: var(--status-red-soft-bg);
  padding: 8px;
  border-radius: var(--radius-xs);
}

/* --- STICKY FOOTER --- */
.sticky-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: var(--bg-main); */
  border-top: 0px solid var(--border-base);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 50;

  width: 100%;
}

.sec1-right-panel .stream-search-panel {
  padding-top: 25px !important;
}

/* --- STREAM AREAS --- */
.stream-search-panel {
  display: flex;
  flex-direction: row; /* Changed to column for multiple rows */
  gap: 10px;
  padding: 25px 25px;
  flex-shrink: 0;
  z-index: 10;
  border-bottom: 0px solid rgba(0, 0, 0, 0.05);
  background-color: transparent;
  position: relative; /* REQUIRED FOR POPOVER */
  align-items: center;
  justify-content: center;
}

.stream-search-panel h4 {
  margin: 0;
  margin-right: 15px;
}

.expanded-view .stream-search-panel {
  background-color: transparent;
  /* padding-top: 0; */
}

.stream-header {
  /* display: none; Removed display:none per request for header titles */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Change 'center' to 'flex-start' */

  flex-shrink: 0;
  padding: 25px 25px;
  padding-bottom: 0px;
  z-index: 5;
  text-align: left;
  margin-bottom: 0px;
}

.stream-header h2 {
  width: 100%;
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 0 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.search-bar-container {
  position: relative;
  width: 100%;
}
.search-row-top {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: center;
}

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

.search-box-input {
  position: relative;
  width: 100%;
  background: transparent !important;
  border: 1px solid var(--bg-green-btn) !important; /* REQUESTED CHANGE */
  padding-left: 25px !important;
  padding-right: 35px; /* Space for X button */
  border-radius: var(--radius-xl) !important;
  font-size: 0.9rem;
  color: var(--text-inverse) !important;
}

.search-box-input:focus {
  border-color: var(--accent-primary);
}

.search-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; /* CHANGED FROM none TO flex */
  align-items: center; /* Ensures icon is centered */
  justify-content: center;
  font-size: 18px;
}

.search-clear-btn:hover {
  color: var(--text-primary);
}

.date-filter-input {
  width: 140px;
  background: var(--surface-primary);
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid transparent;
  color: var(--text-primary);
}

/* NEW: Filter Row */
.search-filter-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.stream-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 8px;
  border-radius: var(--radius-lg);
  scrollbar-width: none;
  background-color: transparent;
  /* border-radius: var(--radius-md); */

  position: relative;
}

.stream-content::-webkit-scrollbar {
  display: none;
}

.fixed-selection-bar .mini-img-card {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  z-index: 5; /* Higher than bg text */
  overflow: hidden;
}

.scroll-content {
  overflow-x: hidden; /* Changed from overflow: hidden to allow Y scrolling */
  overflow-y: auto;
  padding-bottom: 0;
  height: calc(100% - 80px);
  flex-grow: 1; /* Ensure it stretches to fill the panel */
  scrollbar-width: none;
  position: relative;
}

.scroll-content::-webkit-scrollbar {
  display: none;
}

.form-dropdowns-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.dropdown-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: rgba(0, 0, 0, 0.05);
  pointer-events: none; /* Prevent clicks */
  font-style: italic;
}

.form-dropdowns-container .form-group:last-child {
  margin-bottom: 0;
}

.form-dropdowns-container::-webkit-scrollbar {
  width: 6px;
  display: none;
}
.form-dropdowns-container::-webkit-scrollbar-thumb {
  display: none;
  background: #ddd;
  border-radius: 3px;
}

.sub-box.person-sub-box {
  position: relative;
  height: calc(100% - 210px);
  overflow: hidden;
  padding-top: 65px;
  padding-bottom: 0;
  padding-right: 0;
  padding-left: 0;
}

.sub-box-header {
  width: calc(100%);
  padding: 25px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 15px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 15px;

  background: var(--bg-dark);
}

.sub-box-header h4 {
  margin-bottom: 0;
}

.place-sub-box {
  height: 130px;
  margin-bottom: 0 !important;
}

.acc-btn-icon.icon-back {
  display: none;
  transform: translate(-60px, -50%);
}

.acc-btn-icon.icon-forward {
  display: none;
  transform: translate(-60px, -50%);
}

.expand-icon-container {
  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  fill: #999;
  transition:
    color 0.3s ease,
    fill 0.3s ease;
}

.food-circle-btn .expand-icon-container .icon-svg {
  fill: var(--text-primary);
}

.icon-svg {
  width: 100%;
  height: 100%;
  fill: inherit;
  fill: var(--accent-primary);
}

.expand-btn-overlay:hover .expand-icon-container {
  fill: var(--text-dark);
}

/* Ensure the wrapper acts as an anchor */
.color-picker-wrapper {
  position: relative;
}

/* Override the global .hidden-input style specifically for color pickers */
.color-picker-wrapper .hidden-input {
  display: block !important; /* Bring it back into the layout */
  position: absolute; /* Take it out of flow so it doesn't break design */
  bottom: 0; /* Anchor it near the button */
  left: 0;
  width: 1px; /* Give it a tiny size */
  height: 1px;
  opacity: 0; /* Make it invisible */
  pointer-events: none; /* Ensure clicks pass through to the wrapper if needed */
  z-index: -1;
}

.custom-color-trigger {
  background-color: var(--surface-primary);
  border-radius: var(--radius-xs);
  height: 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 400;
  padding: 8px 12px;
}

.trigger-label {
  font-size: 0.7rem;
}

.custom-color-trigger:hover {
  background-color: var(--surface-primary-hover);
}
.trigger-left {
  font-weight: 800;
  color: var(--text-primary);
  font-size: 0.7rem;
}
.trigger-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  font-weight: 200;
  color: var(--text-primary);
}
.trigger-value {
  color: inherit;
  font-size: inherit;
}
.trigger-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

/* Circular UI Buttons */
.circular-ui-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent; /* White background to match inputs */
  color: var(--text-muted); /* Dark Icon */
  border: 1px solid var(--bg-green-btn) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition:
    background-color 0.2s,
    transform 0.1s;
  flex-shrink: 0;
}
.circular-ui-btn:hover {
  background-color: var(--accent-focus-faint);
  border: 1px solid var(--accent-primary) !important;
  color: var(--text-primary);
}
.circular-ui-btn:active {
  transform: scale(0.95);
}
.circular-ui-btn.active {
  /* background-color: var(--accent-primary); */
  color: var(--text-dark);
}

/* POPOVER PANELS (Dark Theme) */
.popover-panel {
  position: absolute;
  top: 65px; /* Default */

  top: 248.125px;
  left: 1264.87px;

  /* background: var(--bg-card); */
  background: var(--text-inverse);
  /* border: 1px solid var(--border-dark); */
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 5000; /* Ensure this is extremely high */
  padding: 15px;
  width: 250px;
  color: var(--text-inverse); /* Light text on dark panel */
  animation: fadeIn 0.2s ease-out;
}
/* Specific alignment for Calendar (center-ish relative to button?) */
#calendar-popover {
  width: 320px;
  right: 70px; /* Offset to align roughly with calendar btn */
}
/* Specific alignment for Filters */
#filter-popover {
  right: 20px; /* Align with filter btn */
}

/* Place Popover Layout */
#place-popover {
  position: absolute;
  /* top will be set via inline style or JS if needed, but we can default relative to parent */
  top: auto; /* Push down below the trigger button */
  bottom: 72px;
  left: 20px;
  width: 324px;
  z-index: 400;
  /* scale: 0.8; */
}

/* Hair Popover Layout */
#hair-popover {
  position: absolute;
  top: -154px; /* Sits just below the trigger */
  left: 0;
  right: 0;
  width: 100%; /* Matches parent form-group width */
  z-index: 1000;
  background: var(--text-inverse);
  /* border: 1px solid var(--border-dark); */
  padding: 15px;
  border-radius: var(--radius-sm);
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
}

/* CALENDAR STYLES (Dark Theme) */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.cal-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.cal-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-day {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;

  color: var(--text-primary);
}
.calendar-day:hover:not(.empty) {
  background: rgba(255, 255, 255, 0.1);
}
.calendar-day.empty {
  cursor: default;
}
.calendar-day.selected {
  background: var(--accent-primary);
  color: var(--text-dark); /* Dark text on Lime bg */
  font-weight: 700;
}
.calendar-day.in-range {
  background: var(--accent-focus-faint); /* Faint Lime Green */
  color: var(--text-secondary);
  border-radius: 0; /* Connect the range */
}
.calendar-day.range-start {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.calendar-day.range-end {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.dynamic-popover-pos {
  top: var(--pop-top, 0px) !important;
  left: var(--pop-left, 0px) !important;
  position: fixed !important; /* Ensure it breaks out of containers */
}

/* NEW: Filter Row */

.calendar-footer {
  margin-top: 10px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-dark);
  padding-top: 10px;
}

/* --- START OF PARTIAL style.css --- */
/* --- 1. SPLIT BUTTON SYSTEM (Enforced 45px Height) --- */
.split-button-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 2px;
  height: 45px !important; /* Enforce consistent height */
}

.split-btn-left {
  border-radius: var(--radius-xl) 14px 14px var(--radius-xl);
  width: 70%;
  font-weight: 700;
  background-color: var(--accent-primary);
  color: var(--text-dark);
  height: 45px !important;
  padding-top: 0 !important; /* Let flexbox center vertically */
  padding-bottom: 0 !important;
}

.split-btn-right {
  border-radius: 14px var(--radius-xl) var(--radius-xl) 14px;
  width: 30%;
  background-color: var(--accent-primary);
  color: var(--text-dark);
  white-space: nowrap;
  height: 45px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- 2. FOOD HISTORY CARD LAYOUT (New Dual-Column Design) --- */
.food-history-layout {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
}

.food-history-left-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 52px; /* Perfect width for 24px crops + 4px gap */
}

.food-history-right-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
  overflow: hidden;
  gap: 2px;

  /* --- NEW: Ellipsis & Overlap Fixes --- */
  min-width: 0; /* Forces flex child to shrink properly for text-overflow */
  padding-right: 28px; /* Protects space for the absolute-positioned 'x' or checkmark */
}

.food-history-main-thumb {
  width: 52px !important;
  height: 52px !important;
  border-radius: 6px !important;
  object-fit: cover;
  flex-shrink: 0;
}

.food-history-crops-row {
  display: flex;
  font-size: 0.65rem;
  gap: 4px;
  margin-top: 0 !important; /* Remove legacy margin */
  color: var(--text-inverse);
}

.food-history-crop-thumb {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border-dark);
}

.food-upscale-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto !important; /* Pushes the button to the bottom to align with crops */
  padding-top: 6px; /* Spacing below the date */
}

.food-upscale-action-btn {
  padding: 0 10px !important;
  font-size: 0.75rem !important;
  width: auto !important;
  height: 26px !important; /* Matches height of crops */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-sm);
}

.food-upscale-action-icon {
  font-size: 14px !important;
}

.food-upscale-text-row {
  margin-bottom: 4px;
}

/* --- END OF PARTIAL style.css --- */
/* SETTINGS POPOVER (Chips) */
.settings-popover {
  position: absolute;
  /* Removed hardcoded bottom/left to allow dynamic positioning */
  background: var(--text-primary);
  border-radius: var(--radius-md2);
  padding: 15px;
  width: 348px; /* Reduced width from 348px */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 20000; /* Increased to guarantee it stays on top of footers */
  color: var(--text-inverse);
  animation: fadeIn 0.2s ease-out;
}

#place-style {
  display: none;
}

/* Settings Header Layout */
.settings-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px; /* Slightly closer to chips */
  justify-content: flex-start;
}

.settings-group-header label {
  margin-bottom: 0; /* Reset global label margin */
}

/* Ratio Filter Buttons */
.ratio-filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ratio-filter-btn {
  border: 1px solid var(--text-secondary);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.6;
}

.ratio-filter-btn:hover {
  opacity: 1;
  border-color: var(--text-inverse);
}

.ratio-filter-btn.active {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  opacity: 1;
}

/* Shapes - Unified Height */
.ratio-filter-btn[data-type="horizontal"] {
  width: 21px; /* Aspect ~1.5 */
  height: 14px;
}

.ratio-filter-btn[data-type="square"] {
  width: 14px; /* Aspect 1:1 */
  height: 14px;
}

.ratio-filter-btn[data-type="vertical"] {
  width: 10px; /* Aspect ~0.7 */
  height: 14px;
}

.settings-group {
  margin-bottom: 15px;
}

.settings-group:last-child {
  margin-bottom: 0;
}

.settings-group label {
  color: var(--text-inverse);
  font-size: 0.8rem;
  text-transform: capitalize;
  font-weight: 200;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.setting-chip {
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
}

.chip-row .setting-chip {
  color: var(--text-inverse);
}

.setting-chip:hover {
  background: rgba(255, 255, 255, 0.2);
}

#env-elements-popover {
  background-color: var(--text-primary);
}

.setting-chip.selected {
  background: var(--accent-primary);
  color: var(--text-dark);
  font-weight: 700;
}

/* PLACE TRIGGER VISUALS */
.place-visuals-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.place-hex {
  color: var(--text-primary);
  font-size: 0.7rem;
  text-transform: capitalize;
  font-weight: 200;
}

.place-bubble {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn-sub-text {
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.8;
  letter-spacing: 0.5px;
  margin: 0;

  /* Positioning for animation */
}

#btn-alter-pose .btn-sub-text {
  position: absolute;
  left: calc(50% + 55px); /* Matches button padding */
  top: 50%;
  pointer-events: none; /* Let clicks pass through to button */
  white-space: nowrap;
}

.btn-sub-text.animate-in {
  animation: slideInReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.btn-sub-text.animate-out {
  animation: slideOutHide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#btn-run-tryon {
  z-index: 1000;
}

.filter-popover-content {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.btn-main-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*  */
/*  */
/*  */

.sec1-right-panel-2 {
  display: none; /* Hide any remnants */

  position: relative;
  width: 100px;
  margin: 8px;
  margin-left: 0;
  /* background: var(--bg-dark); */
  background: transparent;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  /* NEW: Flex column layout */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* padding-bottom: 20px; */
}

.selection-bar-footer {
  flex-shrink: 0; /* Don't shrink */
  padding: 15px;
  padding-bottom: 20px; /* A bit more space at bottom */
  padding-left: 4px;
  padding-right: 4px;
  background: var(--bg-dark);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clear-selection-text-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 100;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  width: 100%;
  text-align: center;
}

.download-selection-text-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 100;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  width: 100%;
  text-align: center;
}

.download-selection-text-btn:hover {
  color: var(--text-inverse);
  background-color: rgba(168, 217, 62, 0.4);
}

.clear-selection-text-btn:hover {
  color: var(--text-inverse);
  background-color: var(--status-red-soft-bg);
  color: var(--status-red-bright);
}

.hair-title-first-letter {
  font-weight: 600;
}

.selection-bar-header {
  padding: 15px;
  padding-top: 25px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 200;
  color: var(--text-secondary);
  flex-shrink: 0;
  background: var(--bg-dark);
  z-index: 10;
  /* Layout for text + icon */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.clear-selection-icon {
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
  padding: 4px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
}

.material-symbols-outlined.clear-selection-icon {
  font-size: 16px;
}

.clear-selection-icon:hover {
  color: var(--status-red-bright);
  background-color: rgba(255, 107, 107, 0.1);
}

/* FIXED BOTTOM SELECTION BAR (Accordion 1) */
.fixed-selection-bar {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 15px 15px;
  padding-top: 0;
  overflow-y: auto;
  position: relative;
  margin-top: 0; /* Removed margin-top: auto */
}

.fixed-selection-bar::-webkit-scrollbar {
  display: none;
}

#btn-add-pose-preset {
  background-color: var(--bg-green-btn);
  color: var(--text-primary);
  border: none;

  border-radius: var(--radius-lg);

  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#btn-add-pose-preset:hover {
  background-color: var(--accent-bright);
}

.batch-meta-info {
  font-size: 0.6rem;
}

#btn-approve-generate:hover + #btn-settings-trigger {
  background-color: var(--accent-hover);
}

.overlay-editor-btn {
  /* display: block !important; */
  height: 28px;
  padding: 4px 0;
  display: none;
}

.save-state {
  height: 33px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-primary);
  font-size: 0.7rem;
  font-weight: 400;
  /* HERE HERE */
  margin-bottom: 12px;
  width: 100%;
}

/* --- CUSTOM POSE DROPDOWNS (PORTAL BASED) --- */

/* The Trigger in the Grid */
.custom-pose-dropdown {
  flex: 1;
  height: 100%;
  position: relative;
  cursor: pointer;
  min-width: 0;
}

.pose-dd-trigger {
  height: 33px;
  background-color: var(--surface-primary);
  border-radius: var(--radius-xs);
  padding-left: 12px;
  padding-right: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-primary);
  background-image: url('data:image/svg+xml;utf8,<svg fill="%2318181c" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.2s;
}

.pose-dd-trigger.has-selection {
  background-image: none;
  padding-right: 12px; /* Reset padding since arrow is gone */
}

.add-preset-row .pose-dd-trigger:hover {
  background-color: #d4d4d4;
}

.pose-dd-trigger:hover {
  background-color: var(--surface-primary-hover);
}

.p-label {
  font-weight: 800;
  margin-right: 5px;
  color: var(--text-primary);
}

.p-value {
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

/* --- THE PORTAL (Floating Menu) --- */
#dropdown-portal {
  position: fixed;
  background: white; /* Reference: White Background */
  border-radius: 8px; /* Reference: 8px Radius */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); /* Reference: Specific Shadow */
  z-index: 99999;
  display: none;
  font-family: "Google Sans", "DM Sans", sans-serif; /* Reference Fonts */
  overflow: hidden;
  height: 152px; /* Reference Height */
  width: 305px; /* Reference Width (180 list + 125 preview) */
  border: 1px solid #e0e0e0; /* Subtle border for visibility on white app bg */
}

#dropdown-portal.active {
  display: flex;
  animation: fadeIn 0.1s ease-out;
}

.dropdown-content-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.dropdown-list {
  flex: 1; /* Left side list */
  overflow-y: auto;
  min-width: 180px;
  border-right: 1px solid #f0f0f0; /* Reference: Light separator */
  display: flex;
  flex-direction: column;
}

/* Reference Scrollbar Styles */
.dropdown-list::-webkit-scrollbar {
  width: 6px;
}
.dropdown-list::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.dropdown-option {
  height: 38px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  font-size: 13px; /* Reference Font Size */
  color: #333; /* Reference: Dark Text */
  border-bottom: 1px solid #f9f9f9; /* Reference: Light separator */
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.dropdown-option:hover {
  background-color: #f0f0f0; /* Reference: Hover Color */
}

.dropdown-preview {
  width: 125px; /* Reference Width */
  height: 152px; /* Reference Height */
  background-color: #fafafa; /* Reference Background */
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.preview-image-container {
  width: 100%;
  aspect-ratio: auto; /* Allow height to match reference flow */
  height: 100%;
  background-color: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: none;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}

/* --- MODEL SWITCH TOGGLE --- */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-card); /* Darker background for "Off" */
  border: 1px solid var(--accent-primary);
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: var(--accent-primary);
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

input:checked + .slider:before {
  transform: translateX(20px);
  background-color: var(--text-dark);
}

.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

/* --- LIGHTBOX CAPTION --- */
.lightbox-caption {
  color: var(--text-inverse);
  margin-top: 15px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  z-index: 3010;
  min-height: 24px; /* Prevent jump if empty */
}

/* --- NEXT STEP ANIMATION --- */

/* Ensure button masks the sliding content */

/* Container for "Next Step ->" */
.anim-payload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transform: translateX(-150%); /* Start hidden to the Left */
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.anim-text {
  display: none;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-dark); /* Dark text for Green BG */
}

.anim-arrow.material-symbols-outlined {
  font-size: 18px;
  color: var(--text-dark);
}

/* --- ANIMATION CLASSES --- */

/* NEW: Disable hover/click interactions while animation plays */
.accordion-toggle-btn.animate-bg-pulse {
  pointer-events: none;
}

/* 1. Background Pulse (Gray -> Green -> Gray) */
.animate-bg-pulse {
  animation: bgPulseAnim var(--button-aniamtion-time)
    cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes bgPulseAnim {
  0% {
    background-color: var(--bg-mid);
  } /* Start Gray */
  20% {
    background-color: var(--accent-primary);
  } /* Turn Green */
  100% {
    background-color: var(--accent-primary);
  } /* End Green (Matches step-ready class) */
}

/* 2. Number Slide (Center -> Right -> Wait -> Left -> Center) */
.animate-number-slide .acc-btn-number {
  animation: numberSlideAnim var(--button-aniamtion-time)
    cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes numberSlideAnim {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  20% {
    transform: translateX(150%);
    opacity: 0;
  } /* Exit Right */
  21% {
    transform: translateX(-150%);
  } /* Teleport Left (Hidden) */
  80% {
    transform: translateX(-150%);
    opacity: 0;
  } /* Wait Left */
  100% {
    transform: translateX(0);
    opacity: 1;
  } /* Enter from Left */
}

/* 3. Payload Slide (Left -> Center -> Right) */
.animate-payload-slide .anim-payload {
  animation: payloadSlideAnim var(--button-aniamtion-time)
    cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes payloadSlideAnim {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  20% {
    transform: translateX(0);
    opacity: 1;
  } /* Enter to Center */
  70% {
    transform: translateX(0);
    opacity: 1;
  } /* Pause */
  100% {
    transform: translateX(150%);
    opacity: 0;
  } /* Exit Right */
}

/* 4. Section Background Pulse (Gray -> Green -> Gray) */
.animate-section-pulse {
  animation: sectionPulseAnim var(--button-aniamtion-time)
    cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes sectionPulseAnim {
  0% {
    background-color: #e8e8e8;
  } /* Start Inactive Gray */
  20% {
    background-color: var(--accent-primary);
  } /* Flash Green */
  80% {
    background-color: var(--accent-primary);
  } /* Hold Green */
  100% {
    background-color: #e8e8e8;
  } /* Return to Inactive Gray */
}

.model-switch-wrapper {
  display: flex;
  align-items: center;
  min-width: 200px;
  gap: 8px;
}

.switch-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/*  */
/*  */
/*  */
/*  */
/*  */

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.pose-list-item.animate-in {
  animation: slideDown 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  z-index: 1; /* Slide behind the existing items */
}

/* Request 05: Signal Pulse Animation */
@keyframes signalPulse {
  0% {
    background-color: var(--green-accent);
    color: #2c3e08;
  }
  100% {
    background-color: var(--bg-dark);
    color: white;
  }
}

@keyframes signalPulse2 {
  0% {
    background-color: var(--green-accent);
    color: #2c3e08; /* Dark green text on bright green bg */
  }
  100% {
    background-color: #d5d5d5; /* Standard gray button bg */
    color: var(--text-primary); /* RESTORED: Dark text for readability */
  }
}

.signal-pulse {
  animation: signalPulse 1.2s ease-out forwards !important;
}

.signal-pulse2 {
  animation: signalPulse2 1.2s ease-out forwards !important;
}

/* Request 06: Dropdowns inside list items */
.pose-list-item .custom-pose-dropdown {
  height: 33px; /* Match input height */
  margin: 0;
  width: 100%;
}

.pose-list-item .pose-dd-trigger {
  border: 1px solid transparent;
  background-color: var(--surface-primary); /* Match list background */
  width: 100%;
}

.pose-list-item .pose-dd-trigger:hover {
  background-color: var(--surface-primary-hover);
}

@keyframes slideInReveal {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes slideOutHide {
  0% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(-30px);
  }
}

/*  */
/*  */
/*  */

/* --- COUNTER ANIMATION (Slot Machine Effect) --- */
.counter-mask {
  display: inline-flex;
  position: relative;
  height: 1.1em; /* Matches text height */
  line-height: 1.1em;
  overflow: hidden;
  vertical-align: bottom;
  min-width: 0.6em; /* Prevent collapse */
  justify-content: center;
  align-items: center;
}

.counter-digit {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 400; /* Match parent */

  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(
    0.34,
    1.56,
    0.64,
    1
  ); /* Bouncy/Snap */
  animation-fill-mode: forwards;
}

.counter-digit.static {
  position: relative; /* Takes up space normally */
}

/* Increasing: Old goes UP, New comes from BOTTOM */
@keyframes digitOutUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes digitInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Decreasing: Old goes DOWN, New comes from TOP */
@keyframes digitOutDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes digitInDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animation Classes */
.anim-out-up {
  animation-name: digitOutUp;
}
.anim-in-up {
  animation-name: digitInUp;
}
.anim-out-down {
  animation-name: digitOutDown;
}
.anim-in-down {
  animation-name: digitInDown;
}

/* --- UPDATED LIGHTBOX STYLES --- */

/* Wrapper handles vertical centering */
.lightbox-content-wrapper {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 80vh; /* Keep within view */
}

/* Flex Row: Image Left, Sidebar Right */
.lightbox-main-area {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Align top */
  justify-content: center;

  height: 600px;

  background-color: var(--bg-main);
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;

  flex: 0 0 auto;
}

/* Image Container: Flexible but constrained */
.lightbox-img-container {
  display: flex;
  align-items: center;
  height: 100%;
}

/* The Image itself */
.lightbox-content {
  height: 100%; /* Ensure it fits vertically */
  object-fit: contain;
  border-radius: 4px;
  /* box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); */
}

/* Sidebar: Fixed width or responsive */
.lightbox-details-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
  background-color: var(--bg-dark);
  padding: 25px;
  border-radius: var(--radius-md);
  margin: 20px;

  height: calc(100% - 40px);
  overflow-y: auto;
}

/* Caption is now inside sidebar */
.lightbox-caption {
  color: var(--text-inverse);
  font-size: 1.2rem;
  font-weight: 200;
  text-align: left; /* Align left within sidebar */
  margin-top: 0;
  min-height: auto;
  line-height: 1.3;
}

.divider-line {
  height: 1px;
  background-color: var(--border-light);
  width: 100%;
  opacity: 0.5;
}

/* Meta Grid (Key-Value Pairs) */
.lightbox-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lightbox-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lightbox-meta-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.lightbox-meta-value {
  font-size: 0.9rem;
  color: var(--text-inverse);
  font-weight: 400;
}

.lightbox-vertical-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: transparent;

  align-items: center;
  width: 100dvw;
}

/* --- PARTIAL: style.css (Add to Utilities or Popover section) --- */

.filter-trigger-item .material-symbols-outlined {
  font-size: 16px;
  color: var(--text-primary);
}

.filter-trigger-item:hover {
  background-color: var(--surface-primary-hover);
}

.custom-pose-dropdown.disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(1);
}

.custom-pose-dropdown.disabled .pose-dd-trigger {
  background-color: #e0e0e0;
  cursor: not-allowed;
  background-image: none; /* Hide arrow */
}

.custom-pose-dropdown.disabled .p-value {
  font-style: italic;
  color: var(--text-secondary);
}

@keyframes neonPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 238, 173, 0.7);
  }
  70% {
    box-shadow: 0 0 20px 20px rgba(103, 238, 173, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 238, 173, 0);
  }
}

/* UPDATED: Strictly scoped to the toggle button */
.accordion-toggle-btn.anim-neon-pulse {
  animation: neonPulse 1s ease-out;
}

/* 1. Standard Fade (Titles/General) - NO SCALE */
@keyframes fadeInOp {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Scale Fade (Mini Cards Only) - WITH SCALE */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 3. Fade Out (Shared) */
@keyframes fadeOutOp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(5px);
  }
}

/* Base Classes */
.anim-fade-in {
  animation: fadeInOp 0.3s ease-out forwards;
}
.anim-fade-out {
  animation: fadeOutOp 0.3s ease-out forwards;
}

/* Specific Override for Mini Cards to use Scale */
.mini-img-card.anim-fade-in {
  animation-name: fadeInScale;
}

/* Specific Override for Empty Text (Preserve Centering) */
@keyframes fadeInCenter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(10px);
  }
  to {
    opacity: 0.7;
    transform: translate(-50%, -50%) translateY(0);
  }
}

.empty-selection-text.anim-fade-in {
  animation-name: fadeInCenter;
}

/* Re-styled Mini Discard Button */
.mini-discard-btn {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* FIX: High Z-index only. No GPU hacks (translateZ) */
  z-index: 100;

  padding: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.2s ease-out;
  transform: translateZ(0);
}

.mannequin-slot .mini-discard-btn {
  /* Position relatively in flex flow or absolute right */
  display: none; /* Default hidden */
  position: absolute;
  right: 4px;
  top: 4px;
  display: none; /* Hidden until hover */
  z-index: 100;
}

.mini-discard-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-inverse);
  background: rgba(185, 185, 185, 0.5);
  /* FIX: Scale only */
  transform: scale(1.1);
}

.collapsed-view .mini-img-card,
.collapsed-view .mini-discard-btn {
  pointer-events: auto;
}

.mannequin-slot.filled:hover .mini-discard-btn {
  display: flex;
  animation: fadeIn 0.2s ease-out;
}

.mannequin-slot.filled:hover .mini-discard-btn {
  transform: scale(1.1); /* Override hover scale */
}

.mini-discard-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  stroke: currentColor;
  display: block;
  pointer-events: none;
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* --- MARQUEE ANIMATION --- */
.marquee-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* Sits behind buttons/lists */
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none; /* Default hidden to save resources and visuals */
}

/* Only enable layout for the Next Step */
.acc-section.pos-next .marquee-svg {
  display: block;
}

/* Activate when selection exists (Opacity handled here, Display handled above) */
.collapsed-view.has-selection .marquee-svg {
  opacity: 1;
}

.accordion-wrapper.animating-layout .marquee-svg {
  opacity: 0 !important;
  transition: none !important;
}

.marquee-text {
  /* fill: var(--accent-primary); */
  fill: var(--acc-dist-1-color);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Change fill back to primary text color when a selection is made */
.collapsed-view.has-selection .marquee-text {
  fill: var(--acc-dist-1-color);
  opacity: 0;
}

/* Ensure it stays primary text color and brightens when toggle button is hovered (Has Selection) */
.collapsed-view.has-selection:has(.accordion-toggle-btn:hover) .marquee-text {
  fill: var(--acc-dist-1-color);
  opacity: 0;
}

/* Ensure other content sits above the SVG */
.collapsed-content-wrapper,
.accordion-toggle-btn {
  z-index: 2;
  position: relative;
}

/*  */
/*  */
/*  */
/*  */
/*  */

/* --- NEW: Advanced Color Picker Styles --- */
.picker-area {
  position: relative;
  height: 180px;
  border-radius: 8px 8px 4px 4px;
  cursor: crosshair; /* Better UX for picking */
  overflow: hidden;
  margin-bottom: 8px;
  user-select: none;
  background-color: var(--accent);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}

.cursor-ring {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.8),
    inset 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  margin-left: -9px;
  margin-top: -9px;
  transform: translate3d(0, 0, 0);
  display: none;
  z-index: 20;
}

.color-name-label {
  position: absolute;
  bottom: 12px;
  right: 14px;
  color: #222;
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
  text-align: right;
  transition: color 0.1s ease;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.picker-controls {
  padding: 0 4px 14px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.picker-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
}

.hex-group {
  gap: 10px;
}

.picker-field-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.picker-controls label {
  font-weight: 700;
  font-size: 13px;
  color: #333; /* Dark text for light panel */
  margin-bottom: 0;
}

.picker-controls input {
  border: 1px solid var(--border-base);
  border-radius: 6px;
  padding: 8px 0;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  color: #333;
  background: #fff;
  outline: none;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  height: 32px;
}

.picker-controls input:hover {
  background-color: #fff !important;
}

.picker-controls input:focus {
  border-color: var(--accent-primary);
}

.picker-controls input:focus {
  border-color: var(--accent-primary);
}

.picker-controls input[type="number"],
.picker-controls input[type="text"] {
  border: 1px solid var(--border-base) !important;
  border-radius: 6px !important;
  padding: 8px 0 !important;
  text-align: center;
  font-family: inherit;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  background-color: #ffffff !important;
  outline: none;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  height: 32px !important;
}

/* FIX: Prevents global hover states from overriding the white background */
.picker-controls input[type="number"]:hover,
.picker-controls input[type="text"]:hover {
  background-color: #ffffff !important;
}

.picker-controls input[type="number"]:focus,
.picker-controls input[type="text"]:focus {
  border-color: var(--accent-primary) !important;
}

/* Remove arrows (spinners) from the RGB number inputs */
.picker-controls input[type="number"]::-webkit-inner-spin-button,
.picker-controls input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.picker-controls input[type="number"] {
  appearance: textfield; /* Firefox */
  -moz-appearance: textfield; /* Firefox */
}

.input-rgb {
  width: 100%;
}
.input-hex {
  width: 80px;
  text-transform: uppercase;
}

.recent-colors-container {
  background-color: #f8f8f8;
  border-radius: 8px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid #eee;
}

.color-dot-style {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.1s;
}

.color-dot-style:hover {
  transform: scale(1.1);
}

/* --- START OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */

/* --- PROPERTIES TRIGGER (Replaces Pose Tag Container) --- */
.pose-tags-trigger {
  z-index: 50; /* Higher than other overlays */

  width: 28px;
  height: 28px;
  /* Start as circle */
  border-radius: 14px;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end; /* Grows upwards from bottom if height increases */

  overflow: hidden;
  cursor: pointer;
  color: white;

  /* Smooth expansion animation */
  transition:
    width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-radius 0.3s,
    background-color 0.2s;
}

/* The Central Icon (Visible initially) */
.pose-tags-trigger .trigger-icon {
  position: absolute;
  bottom: 5px; /* Center in the 28px circle */
  left: 5px;
  font-size: 16px;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* The List Container (Hidden initially) */
.pose-tags-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  min-width: 160px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* HOVER STATE: Expand */
.pose-tags-trigger:hover {
  width: auto;
  height: auto; /* Allow growth */
  min-width: 160px; /* Ensure readable width */
  border-radius: var(--radius-md2);
  background: rgba(0, 0, 0, 0.95);
  border-color: var(--text-muted);
}

.pose-tags-trigger:hover .trigger-icon {
  opacity: 0; /* Fade out icon */
}

.pose-tags-trigger:hover .pose-tags-content {
  opacity: 1;
  pointer-events: auto;
}

/* Individual Tag Item (Full Text) */
.pose-tag-item {
  font-size: 0.6rem;
  font-weight: 200;
  color: var(--text-inverse);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pose-tag-item:hover {
  background: var(--accent-primary);
  color: var(--text-dark);
  border-color: var(--accent-primary);
}

/* Restricted State (Dimmed) */
.pose-tag-item.restricted {
  opacity: 0.6;
  cursor: not-allowed;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

.pose-tag-item.restricted:hover {
  background: transparent;
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Label prefix styling */
.tag-prefix {
  font-weight: 200;
  opacity: 0.7;
  margin-right: 6px;
  font-size: 0.6rem;
  text-transform: lowercase;
}

.tag-prefix:first-letter {
  text-transform: capitalize;
}

/* Inner Elements */
.tag-init {
  /* The initial occupies the full circle dimensions to center itself */
  width: 28px; /* Account for border (24px - 2px borders) */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  font-size: 0.54rem;
  /* font-weight: 800; */

  /* Transitions for collapsing on hover */
  transition:
    width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 1;
  transform: scale(1);
  overflow: hidden;
}

.tag-val {
  opacity: 0;
  font-weight: 400;
  margin-left: 0px;
  transform: translateX(-5px);
  transition:
    opacity 0.2s 0.05s,
    transform 0.2s 0.05s;
  white-space: nowrap;
}

/* HOVER EXPANSION */
.pose-tag-pill:hover {
  max-width: 200px; /* Allow expansion */
  width: auto; /* Unlock width */
  border-radius: 60px; /* Become a Pill */

  background: rgba(0, 0, 0, 0.95);
  border-color: var(--accent-primary);
  z-index: 50;

  padding-left: 10px;
  padding-right: 10px;
}

/* Hide the Short Version (Init) on Hover */
.pose-tag-pill:hover .tag-init {
  width: 0px;
  opacity: 0;
  transform: scale(0);
}

.pose-tag-pill:hover .tag-val {
  opacity: 1;
  transform: translateX(0);
}

/* NEW: Hide Lightbox Expand Button when hovering tags to clear the view */
.image-overlay:has(.pose-tag-pill:hover) .expand-btn-overlay {
  opacity: 0 !important; /* Override the default hover visibility */
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.5); /* Shrink away effect */
}

/* --- IN FILE: style.css (Add below the .pose-tag-pill styles) --- */

/* RESTRICTED PILL STATE */
.pose-tag-pill.restricted {
  cursor: not-allowed;
  opacity: 0.8;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(50, 50, 50, 0.6); /* Slightly dimmer */
}

.pose-tag-pill.restricted:hover {
  background: rgba(50, 50, 50, 0.8);
  border-color: rgba(
    255,
    255,
    255,
    0.3
  ); /* Don't highlight with green accent */
}

.pose-tag-pill.restricted:hover .tag-init {
  color: var(--text-secondary); /* Keep text dim */
}

/* --- ACCORDION DISTANCE SHADING --- */
/* Level 1 Darkness (Distance 1) - IS pos-next */
.acc-section.bg-dist-1 {
  background-color: var(--acc-dist-1-color);
}
.acc-section.pos-left.bg-dist-1 .collapsed-view {
  background-color: var(--acc-dist-1-color);
}
.acc-section.pos-right.bg-dist-1 .collapsed-view {
  /* Keep shadow for Distance 1 (pos-next) */
  box-shadow: inset 0 0 0 8px var(--acc-dist-1-color);
}

/* Level 2 Darkness (Distance 2) - NOT pos-next */
.acc-section.bg-dist-2 {
  background-color: var(--acc-dist-2-color);
}
.acc-section.pos-left.bg-dist-2 .collapsed-view {
  background-color: var(--acc-dist-2-color);
}
.acc-section.pos-right.bg-dist-2 .collapsed-view {
  /* No Shadow */
  box-shadow: none;
}

/* Level 3 Darkness (Distance 3) - NOT pos-next */
.acc-section.bg-dist-3 {
  background-color: var(--acc-dist-3-color);
}
.acc-section.pos-left.bg-dist-3 .collapsed-view {
  background-color: var(--acc-dist-3-color);
}
.acc-section.pos-right.bg-dist-3 .collapsed-view {
  /* No Shadow */
  box-shadow: none;
}

/* --- IN FILE: style.css --- */

/* Add this adjacent to the .vary-soft-btn block (around line 1240) */

/* --- START OF PARTIAL style.css --- */
/* --- START OF PARTIAL style.css --- */
/* --- START OF PARTIAL style.css --- */

/* UPDATED: Garment Row Container for Dual View */
.garment-item-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  background-color: var(--color-white);
  padding: 8px;
  border-radius: var(--radius-md2);

  transition: border-color 0.2s;
  position: relative;
  width: 100%;
}

/* Grouping the two slots */
.garment-slots-group {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Individual Slot (Front/Back) */
.garment-slot {
  width: 60px;
  height: 80px; /* Taller to accommodate label */
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px dashed var(--text-muted);
  border-radius: var(--radius-xs);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s;
}

.garment-slot:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--text-inverse);
  border: 1px dashed var(--text-muted);
}

/* Image inside slot */
.garment-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Empty State Icon */
.garment-slot .slot-icon {
  font-size: 18px;
  color: var(--text-muted);
  z-index: 0;
  margin-bottom: 12px; /* Make room for label */
}

/* View Label (Front/Back) */
.garment-slot .slot-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.4); /* Legibility overlay */
  padding: 2px 0;
}

/* Highlight filled slots */
.garment-slot.filled {
  border-style: solid;
  border: none;
  border-color: transparent;
}
.garment-slot.filled .slot-label {
  color: white;
  text-shadow: 0 1px 2px black;
}

/* Mini remove button for individual slot */
.slot-remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  display: none; /* Hidden by default */
}
.slot-remove-btn .material-symbols-outlined {
  font-size: 10px;
  color: white;
}
.garment-slot.filled:hover .slot-remove-btn {
  display: flex;
}
.slot-remove-btn:hover {
  background: var(--status-red-bright);
}

/* Global Row Remove Button (Top Right of container) */
.garment-item-row .row-remove-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 12px;
  height: 12px;

  border-radius: 50%;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
}
.garment-item-row .row-remove-btn:hover {
  color: var(--status-red-bright);
}

.row-remove-btn.material-symbols-outlined {
  font-size: 18px;
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* =========================================
   1. UTILITY CLASSES (Replacing Inline Styles)
   ========================================= */

/* --- Visibility & Display --- */
.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.flex {
  display: flex !important;
}

.flex-gap-8 {
  display: flex;
  gap: 8px;
  align-items: center; /* Generally useful for button groups */
}

/* --- Opacity --- */
.opacity-50 {
  opacity: 0.5;
  pointer-events: none; /* Often desired when disabled/faded */
}

.opacity-100 {
  opacity: 1;
  pointer-events: auto;
}

/* --- Cursors --- */
.cursor-wait {
  cursor: wait !important;
}

.cursor-pointer {
  cursor: pointer;
}

/* --- Typography & Alignment --- */
.text-center-padded {
  text-align: center;
  padding: 20px;
  width: 100%;
}

.color-text-secondary {
  color: var(--text-secondary, #888); /* Fallback to grey if var missing */
}

.font-bold {
  font-weight: 700;
}

/* --- Icon Sizes --- */
.status-icon-size {
  font-size: 18px !important;
}

.icon-size-16 {
  font-size: 16px !important;
}

/* =========================================
   2. ASPECT RATIO SYSTEM
   ========================================= */
/* Used for Placeholders and Image Cards */

.aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.aspect-3-4 {
  aspect-ratio: 3 / 4;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-9-16 {
  aspect-ratio: 9 / 16;
}

/* Fallback for custom ratios handled via JS setProperty('--aspect-ratio', 'x/y') */
.dynamic-aspect {
  aspect-ratio: var(--aspect-ratio, 3/4);
}

/* =========================================
   3. DYNAMIC POSITIONING (Popovers & Cursors)
   ========================================= */

/* For the Dropdown Portal */
.dynamic-pos {
  position: absolute; /* Ensure it floats */
  left: var(--pos-left, 0px);
  top: var(--pos-top, 0px);
  z-index: 9999;
}

/* For the Color Picker Cursor */
.dynamic-cursor-pos {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0);
}

/* =========================================
   4. DYNAMIC COLORS
   ========================================= */
/* Uses CSS Variables set by JS to avoid 'unsafe-inline' style blocks */

.dynamic-bg {
  background-color: var(--bg-color, transparent);
}

.dynamic-text-color {
  color: var(--text-color, inherit);
}

/* =========================================
   5. COMPONENT SPECIFIC STYLES
   ========================================= */

/* --- Place/Backdrop Trigger Visuals --- */
/* (Replaces the inline HTML string generation in updatePlaceVisuals) */
.place-visuals-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Drag & Drop Feedback --- */
.drag-active-state {
  border-color: var(--text-inverse, #fff) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.drag-hover {
  border: 2px dashed var(--accent-color, #4facfe);
  background: rgba(79, 172, 254, 0.1);
}

/* --- Color Picker History Dots --- */

.color-dot-style:hover {
  transform: scale(1.1);
  border-color: #fff;
}

/* --- Status Icons (Spinning) --- */
.spin {
  animation: spin 1s linear infinite;
}

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

/* --- Pose Tags --- */
.pose-tag-item.restricted {
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* --- Hidden Meta Data --- */
/* Ensures metadata divs don't break layout even if .hidden isn't applied immediately */
.hidden-meta-data {
  display: none;
}

/* --- START OF PARTIAL style.css --- */

/* Slot Loading Overlay */
.slot-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border-radius: inherit;
  backdrop-filter: blur(2px);
}

.slot-loading-overlay .spinner-sm {
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent-primary);
  width: 24px;
  height: 24px;
  border-width: 3px;
  margin-right: 0;
}

/* New Split Layout */
.gallery-split-layout {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
}

.gallery-left-panel {
  flex: 1;
  min-width: 350px;
  width: 150px;
  background-color: var(--bg-dark);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--border-dark);
}

.gallery-right-panel {
  width: calc(100% - 350px);
  min-width: calc(100% - 350px);
  background-color: var(--bg-card);
  padding: 25px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Tagging UI */
.tag-category-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.tag-category-header {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-pill {
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-inverse);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.tag-pill:hover {
  border-color: var(--text-secondary);
}

.tag-pill.selected {
  background-color: var(--accent-primary);
  color: var(--text-primary);
  font-weight: 600;
  border-color: var(--accent-primary);
}

.gallery-dual-card {
  position: relative;
  justify-content: space-between;
  background-color: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  /* Removed padding to let columns flush with edges */
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: row;

  overflow: hidden;
  flex: 0 0 auto;
}

.gallery-left-panel .gallery-dual-card.active-editing {
  border-color: var(--text-secondary); /* Neutral highlight */
  box-shadow: 0 0 0 1px var(--text-secondary);
  background-color: rgba(255, 255, 255, 0.02);
}

.gallery-left-panel .gallery-dual-card.selected {
  border-color: var(--accent-primary);
  background-color: rgba(193, 246, 78, 0.05);
}

.gallery-dual-card .gallery-select-col {
  gap: 12px; /* Space between delete and drag icon */
  width: 40px;
  min-width: 40px;
  border-left: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly; /* Changed to space-evenly to ensure visibility */
  padding: 4px 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 5;
  cursor: grab; /* Indicates the whole strip is a handle */
  transition: background-color 0.2s;
  height: 100%; /* Ensure it fills the card height */

  align-self: flex-end;
  justify-self: flex-end;
}

.gallery-dual-card .gallery-select-col:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Add New Slot in Gallery */
.gallery-add-new-row {
  width: 100%;
  height: 60px;
  border: 1px dashed var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
  flex-shrink: 0;
  background-color: transparent;
}

.gallery-add-new-row:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}

.gallery-add-new-row .material-symbols-outlined {
  font-size: 20px;
}

/* Drag Handle Styling - High Visibility */
.gallery-drag-handle {
  cursor: grab;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary); /* Ensure White/Light color */
  opacity: 0.8; /* Increased visibility */
  transition: all 0.2s;
  pointer-events: none; /* Let clicks pass through to container drag */
}

.gallery-drag-handle:hover {
  opacity: 1;
  color: var(--text-inverse);
}

.gallery-drag-handle:active {
  cursor: grabbing;
}

.gallery-drag-handle .material-symbols-outlined {
  font-size: 20px;
}

.gallery-footer {
  display: none; /* Hidden, actions are instant/auto-save */
}

/* Empty State for Right Panel */
.tag-editor-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  font-style: italic;
}

/* Adjustments for the gallery card inside the list */
.gallery-dual-card .gallery-img-slot {
  border-radius: 0; /* Flush edges */
}

.gallery-dual-card .checkmark {
  display: none;
}

.gallery-dual-card .checkmark:hover {
  border-color: var(--accent-primary);
  background-color: rgba(193, 246, 78, 0.1);
}

/* Indicator for "Selected for Project" */
.gallery-dual-card.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--accent-primary);
  z-index: 10;
}

/* --- END OF PARTIAL style.css --- */

.garment-tags-view {
  flex-grow: 1;
  background-color: transparent;
  /* border: 1px solid var(--border-base); */
  padding: 4px;
  padding-right: 24px;
  padding-left: 12px;
  height: 80px; /* Match slot height */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* Stack from top */
  gap: 4px;
  overflow-y: auto;
}

/* Individual Tag Pill in the Main List */
.mini-tag {
  font-size: 0.65rem;
  padding: 2px 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  height: fit-content;
  display: inline-flex;
  align-items: center;
}

.mini-tag.primary {
  cursor: auto;
}

/* Scrollbar for tags if many */
.garment-tags-view::-webkit-scrollbar {
  width: 4px;
}
.garment-tags-view::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 2px;
}

/* Hide the old textarea style if it persists in cache */
.garment-item-desc {
  display: none;
}

/* --- GALLERY TABS --- */
.gallery-tab-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;

  gap: 8px;
  margin-bottom: 15px;

  width: 100%;
  margin-bottom: 8px;
}

.gallery-tab-track {
  background-color: rgba(0, 0, 0, 0.06);
  background-color: var(--bg-mid);
  border-radius: 999px;
  padding: 4px;
  display: flex;
  gap: 0;
  width: 100%;
  position: relative; /* Anchor for highlighter */
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 0;
}

.tab-highlighter {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  background-color: var(--bg-dark); /* The "Active" background */
  border-radius: 999px;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1; /* Behind text, above track */
  pointer-events: none;
}

.gallery-tab-btn {
  background: transparent;
  border: none;

  color: var(--text-primary);
  padding: 10px 0;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  border-radius: 999px;
  flex: 1;
  text-align: center;
  z-index: 2; /* Above highlighter */
}

.gallery-tab-btn:hover {
  color: var(--text-secondary);
}

/* Active State: Text becomes light, background is handled by highlighter */
.gallery-tab-btn.active {
  color: var(--text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- COMBINE EDITOR LAYOUT --- */
.combine-editor-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.combine-inventory-col {
  width: 200px;
  min-width: 200px;
  border-right: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  background-color: var(--bg-dark);
}

.combine-mannequin-col {
  flex-grow: 1;
  background-color: var(--bg-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

/* --- MANNEQUIN CSS DRAWING --- */
.mannequin-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 500px;
  align-items: center;
}

.mannequin-section-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid var(--border-dark);
  line-height: 0.1em;
  margin-bottom: 10px;
}

.mannequin-section-label span {
  background: var(--bg-card);
  padding: 0 10px;
}

.mannequin-slot::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 20px;
  height: 1px;
  background-color: var(--border-dark);
  z-index: 0;
  transition: background-color 0.2s;
}

.mannequin-slot:hover::before,
.mannequin-slot.active-tagging::before {
  background-color: var(--accent-primary);
}

.mannequin-slot:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--text-inverse);
}

.mannequin-slot.active-tagging::before,
.mannequin-slot:hover::before {
  background-color: var(--accent-primary);
}

.mannequin-slot.filled {
  border-style: solid;
  border-color: var(--border-dark);
  background-color: var(--bg-dark);
}

.mannequin-slot.active-tagging {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

/* --- NEW: Sub-Slots (Front/Back) within the Row --- */
.mannequin-sub-slot {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.3);
  /* border: 1px solid var(--border-dark); */
  border-radius: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s;
  flex-shrink: 0;

  aspect-ratio: 1/1;
}

.mannequin-sub-slot:hover {
  border-color: var(--text-inverse);
  background-color: rgba(255, 255, 255, 0.05);
}

.mannequin-sub-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mannequin-sub-slot .sub-icon {
  font-size: 18px;
  color: var(--text-muted);
  opacity: 0.5;
}

.mannequin-sub-slot:hover .sub-icon {
  opacity: 1;
  color: var(--text-inverse);
}

.mannequin-sub-slot .sub-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.55rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 0;
  pointer-events: none;
  border-radius: 0;
}

/* Layer Label (Text next to slots) */
.mannequin-slot .slot-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mannequin-slot.filled {
  border-style: solid;
  border-color: var(--border-dark);
  background-color: var(--bg-dark);
}

.mannequin-slot.active-tagging {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

/* Slot Content Styling updates for Horizontal layout */
.mannequin-slot img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0; /* Reset */
  flex-shrink: 0;
}

.mannequin-slot .slot-name {
  font-size: 0.7rem;
  text-align: left;
  color: var(--text-secondary);
  margin-top: 0;
  line-height: 1.2;
  flex-grow: 1;
}

.mannequin-slot .slot-icon-placeholder {
  font-size: 20px;
  width: 45px;
  text-align: center;
}

/* Section Labels (Hidden for cleaner diagram look, or styled minimally) */
.mannequin-section-label {
  display: none;
}

.mannequin-slot:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--text-inverse);
}

.mannequin-slot.filled {
  border-style: solid;
  border-color: var(--border-dark);
  background-color: var(--bg-dark);
}

/* Show remove button on hover for filled mannequin slots */
.mannequin-slot.filled:hover .slot-remove-btn {
  display: flex;
}

.mannequin-slot.active-tagging {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.mannequin-slot .slot-name {
  font-size: 0.65rem;
  text-align: center;
  color: var(--text-secondary);
  margin-top: 5px;
  padding: 0 4px;
  line-height: 1.2;
}

.mannequin-slot img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 5px;
}

/* Layer Indices for Visual Stacking Concept */
.slot-layer-1 {
  z-index: 30;
} /* Outer */
.slot-layer-2 {
  z-index: 20;
} /* Middle */
.slot-layer-3 {
  z-index: 10;
} /* Inner */

/* --- INVENTORY LIST ITEM (Compact) --- */
.inventory-item-compact {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--border-dark);
  cursor: grab;
  background: var(--bg-dark);
  transition: background 0.2s;
}

.inventory-item-compact:hover {
  /* background: var(--surface-primary-hover); */
  background: var(--bg-green-btn);
  background: var(--accent-hover);
  background: var(--accent-focus);
}

.inventory-item-compact:hover .food-history-title {
  color: var(--text-primary);
}

.inventory-item-compact:hover .food-history-crops-row {
  color: var(--text-primary);
}

.inventory-item-compact:active {
  cursor: grabbing;
}

.inventory-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: #000;
}

.inventory-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- COMBINE LIST ITEM --- */
.combine-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  flex-grow: 1;

  background: var(--bg-dark);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition: all 0.2s;
  /* height: 120px; */

  width: 100%;
  cursor: default;
  gap: 12px;
  padding: 15px;
}

/* Selected State for the Card */
.combine-list-item.selected {
  outline: 4px solid var(--accent-primary);
  outline-offset: -2px;
  /* background-color: rgba(193, 246, 78, 0.05); */
}

.combine-select-checkbox {
  width: 24px;
  height: 24px;
  margin-right: 10px;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom Checkbox Skin (Matches Image Overlay style) */
.combine-checkbox-skin {
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--text-secondary);
  border-radius: 50%;
  transition: all 0.2s;
  pointer-events: none;
  position: relative;
}

.combine-list-item.selected .combine-checkbox-skin {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.combine-list-item.selected .combine-checkbox-skin::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid var(--text-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- MULTI-STYLE VIEW (Right Panel) --- */
.multi-style-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: var(--bg-primary);
  flex-grow: 1;
  overflow-y: auto;
}

.multi-style-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-base);
  transition: transform 0.2s;
}

.multi-style-info {
  display: flex;
  flex-direction: column;
}

.multi-style-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.multi-style-meta {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.multi-style-remove {
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.multi-style-remove:hover {
  background-color: var(--status-red-soft-bg);
  color: var(--status-red-bright);
}

.btn-clear-multi {
  margin-right: 8px;
}

.combine-list-item.active {
  background: rgba(103, 238, 173, 0.05);
  border-color: var(--accent-primary);
}

.combine-list-item.full-width .btn-select-combine {
  width: auto;
  padding: 6px 20px;
  height: 32px; /* Fixed height for consistency */
}

/* --- TAG EDITOR PANEL (Right Side of Combine Editor) --- */
.tag-editor-panel {
  width: 200px;
  min-width: 200px;
  border-left: 1px solid var(--border-dark);
  background-color: var(--bg-dark);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */
/* Add these new classes for the Combine System at the end of the file or near Gallery styles */

/* Layout Overrides */
.gallery-full-panel {
  width: 100%;
  min-width: 100%;
  border: none;
}

/* Inventory Column */
.inventory-header-label {
  padding: 15px;
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-inverse);
  font-size: 0.9rem;
  font-weight: 700;
}

.inventory-list-scroll {
  overflow-y: auto;
  flex-grow: 1;
}

.inventory-item-desc {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

.gallery-center-col {
  justify-content: center;
}

.combine-controls-header {
  width: 100%;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background-color: var(--bg-dark);
  z-index: 9999;
  border-radius: var(--radius-md);
}

.combine-name-input {
  flex-grow: 1; /* Fill available space */
  width: auto; /* Reset fixed width */
  margin: 0;

  /* Match .header-input-container + .batch-title-input style */
  background: transparent !important;
  border: 1px solid var(--text-muted) !important;
  border-radius: 999px !important;
  color: var(--text-secondary) !important; /* Grey text */

  font-weight: 200 !important; /* Bold text, override generic input style */

  height: auto !important; /* Let padding define height */
  transition: border-color 0.2s;

  font-size: 0.85rem !important; /* ~13.6px */
  padding: 8px 12px !important; /* 8px top + 8px bottom = 16px */
  /* Total Content Height ≈ 30px + 2px border from parent = ~32px */
}

.combine-actions-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.combine-name-input:focus {
  outline: none;
  border-color: var(--accent-primary) !important;
}

.btn-save-combine {
  width: 140px;
  height: 100%;
  padding: 0px 20px;
  height: 35px;
  flex-shrink: 0; /* Prevent button from shrinking */
}
.secondary-btn.btn-save-combine {
  width: auto;

  border-radius: 999px;
}

.btn-cancel-combine {
  font-weight: 200;
  font-size: 0.7rem;
  position: absolute;
  right: 20px;
  top: 16px;
}

.combine-instruction-note {
  position: absolute;
  bottom: 0;
  width: 100%;

  pointer-events: none;

  text-align: center;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 200;

  padding: 16px;
  margin-bottom: 10px;
  background-color: var(--accent-primary);
  border-radius: var(--radius-md);

  animation: fadeIn 0.3s ease-out;
  z-index: 999;
}

.combine-instruction-note.hidden {
  display: none;
}

/* Moved visual effects to ::after pseudo-element to sit ON TOP of the note (z-index 999) */
.gallery-column-half-container:has(
    .combine-instruction-note:not(.hidden)
  )::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Visuals */
  outline: 10px solid var(--accent-primary);
  outline-offset: -10px;
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-md); /* Match parent radius */

  /* Layering */
  z-index: 1000; /* Higher than .combine-instruction-note */
  pointer-events: none; /* Allow clicks to pass through */
}

/* Ensure the container itself doesn't duplicate the style */
.gallery-column-half-container:has(.combine-instruction-note:not(.hidden)) {
  outline: none;
  box-shadow: none;
}

/* .gallery-column-half-container:has(.combine-instruction-note:not(.hidden)) {
  outline: 10px solid var(--accent-primary);
  outline-offset: -10px;
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 1);
} */

.btn-cancel-icon {
  width: 32px; /* Matches approximate height of primary button */
  height: 32px;
  padding: 0 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.btn-cancel-icon .material-symbols-outlined {
  font-size: 20px;
}

/* Hover State: Red to indicate discard/negative action */
.btn-cancel-icon:hover {
  color: var(--status-red-bright);
  border-color: var(--status-red-bright);
  background-color: rgba(255, 82, 82, 0.1);
  /* transform: rotate(90deg); */
}

/* Mannequin Slots Icons */
.slot-icon-placeholder {
  font-size: 24px;
  color: var(--text-secondary);
}

.mannequin-slot.drag-target-active {
  border-color: var(--accent-primary) !important;
  background-color: rgba(103, 238, 173, 0.05);
}

/* Tag Editor Panel Specifics */
.tag-editor-header {
  font-weight: 700;
  color: var(--text-inverse);
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.tag-editor-preview-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tag-editor-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.btn-remove-layer {
  height: 30px;
  font-size: 0.7rem;
  align-self: center;
}

/* Combine Selection List */
.combine-selection-container {
  padding: 25px;
  width: 100%;
}

.combine-grid-list {
  gap: 10px;
}

.combine-empty-state {
  color: var(--text-secondary);
  text-align: center;
  padding: 20px;
}

/* Combine List Item Internals */
.combine-item-left {
  display: flex;
  align-items: center;
  gap: 15px;

  width: 100%;
  flex-direction: column; /* Stack contents inside left wrapper */
  align-items: flex-start;
  gap: 8px;
}

.combine-thumb-stack {
  display: flex;

  width: 100%;
  flex-wrap: wrap; /* Allow wrapping if too many items */
  gap: 2px;
  margin-bottom: 2px;
}

.combine-layer-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: -8px;
  border: 1px solid var(--bg-card);
}

.combine-item-name {
  font-weight: 600;
  color: var(--text-inverse);

  font-size: 0.8rem;
  white-space: normal; /* Allow text wrapping */
  word-break: break-word;
  width: 100%;
  line-height: 1.3;
}

.combine-item-actions {
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;

  width: 100%;
  padding-top: 10px;
  gap: 8px;
}

.icon-btn-small {
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-size-small {
  font-size: 16px;
}

.btn-select-combine {
  width: auto;
  padding: 8px 16px;
  font-size: 0.75rem;

  height: 30px;
  font-size: 0.75rem;
  padding: 0;
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */
/* Add near the Combine List Item styles */
.secondary-btn.btn-edit-combine,
.secondary-btn.btn-delete-combine {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.btn-delete-combine:hover {
  background-color: rgba(255, 82, 82, 0.1);
  border-color: var(--status-red-bright);
  color: var(--status-red-bright);
}

.mannequin-layout-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;

  margin-top: 4px;

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.mannequin-visual-col {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 502px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  padding: 10px;
  margin: 0 20px; /* Space for connector lines on both sides */
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Bulk Upload Header Layout */
.column-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Specific styling for the Bulk Upload Button */
.btn-bulk-upload {
  width: auto;
  font-size: 0.7rem;
  padding: 4px 12px;
  height: 28px;
  display: flex;
  align-items: center;
}

/* Spacing for the icon inside the button */
.icon-spacing-right {
  margin-right: 4px;
}

.mannequin-slots-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.mannequin-slots-col-right {
  margin-right: 20px;
}

/* SVG STYLING */
.mannequin-svg {
  scale: 1.2;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateX(4px);
}

/* Base style for all body parts */
.svg-body-part {
  fill: rgba(255, 255, 255, 0.05);
  stroke: var(--border-light);
  stroke-width: 1.5;
  transition: all 0.2s ease-in-out;
}

.svg-static-base .svg-body-part {
  fill: transparent;
}

/* Active Highlight (Applied via JS on Drag) */
.svg-body-part.highlight {
  fill: rgba(193, 246, 78, 0.2); /* Tint of accent color */
  stroke: var(--accent-primary);
  stroke-width: 3;
  filter: drop-shadow(0 0 5px var(--accent-primary));
}

/* Specific Layer Ordering for Visuals */
/* Ensure Outer layer sits visually on top if needed, or manage via DOM order */
#svg-upperOuter {
  z-index: 3;
}
#svg-upperMiddle {
  z-index: 2;
}
#svg-upperInner {
  z-index: 1;
}

/* Slot Row overrides for new layout */
.mannequin-slots-row {
  display: flex;

  flex-direction: column;

  width: 100%;
  justify-content: space-between;
  justify-content: center;
  display: flex;
  flex-direction: column; /* Stack vertically */

  width: 100%;
  gap: 8px; /* Increase gap between layers */
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */
/* Add these to the end of the file or in the Utilities section */

/* Utilities for Dynamic Elements (Replacing Inline Styles) */
.color-red {
  color: #ff5252 !important;
}

.text-bold-600 {
  font-weight: 600;
}

.opacity-50 {
  opacity: 0.5;
}

.cursor-default {
  cursor: default !important;
}

.svg-static-head {
  fill: none;
  stroke: #555;
}

.model-switch-spacing {
  margin-right: auto;
  margin-left: 15px;
}

/* Ensure inventory descriptions have specific styling if needed */
.inventory-item-label {
  font-weight: 600;
}

.inventory-item-id {
  opacity: 0.5;
}
/* --- END OF PARTIAL style.css --- */

/* 1. Add relative positioning helper */
.relative-anchor {
  position: relative !important;
  /* This ensures the absolute child positions relative to this box, not the body */
}

/* 2. Define the anchored state for the popover */
/* This overrides the default fixed/hidden state */
#delete-confirm-popover.anchored {
  position: absolute;
  top: auto; /* Reset fixed/inline coordinates */
  left: auto; /* Reset fixed/inline coordinates */

  /* Position: Above the delete button, aligned right */
  bottom: 100%;
  right: 0;

  margin-bottom: 10px; /* Space between button and popover */
  z-index: 21000;
  display: flex; /* Ensure it's visible (overrides .hidden) */
  width: 220px; /* Ensure consistent width */
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* --- VIEW CONTAINER --- */
.gallery-views-container {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}

.gallery-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gallery-view.hidden {
  display: none !important;
}

/* The Editor view is a split layout */
.gallery-view.split-view {
  flex-direction: row;
}

/* Header Row: Name + Actions */
.combine-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.combine-item-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-inverse);
}

/* Image Row: Horizontal Scroll */
.combine-images-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 5px; /* Space for scrollbar if visible */
  width: 100%;
  align-items: flex-start;
}

.combine-images-row.scroll-x::-webkit-scrollbar {
  height: 6px;
}
.combine-images-row.scroll-x::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 3px;
}

/* Larger Square Images */
.combine-img-square {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-dark);
}

.combine-img-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.combine-no-images {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.8rem;
  padding: 10px;
}

/* Hide the old selection column from HTML (if class persists) or ensure new view handles it */
.col-selection {
  /* No longer used in 3-col layout, logic moved to #view-saved */
  display: none;
}

.mannequin-layer-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* New Label styling (moved out of slot) */
.layer-label {
  font-size: 0.6rem;
  font-weight: 200;
  color: var(--text-secondary);
  text-transform: capitalize;
  /* letter-spacing: 0.5px; */
  padding-left: 2px;
}

/* Slot adjustments */
.mannequin-slot {
  display: flex;
  flex-direction: column;

  gap: 6px;
  padding: 4px;

  min-width: 228px;
  height: 94px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius-sm);
  position: relative;

  /* align-items: center; */
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 4px;
  padding-right: 20px;

  cursor: default;
  transition: all 0.2s;
  overflow: visible;
}

.mannequin-slot .layer-label {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  text-transform: capitalize;

  width: 100%;
  text-align: left;

  pointer-events: none; /* Let clicks pass through to slot if needed, though slot handles bubbling */
}

.mannequin-slot .layer-label .label-examples {
  font-size: 0.85em; /* 85% of the parent font size */
  opacity: 0.7;
  font-weight: 300;
  margin-left: 3px;
  text-transform: none; /* Keep examples normal casing if desired, or inherit */
}

.slot-images-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
  justify-content: flex-start;
}

.mannequin-slot .slot-name {
  display: none;
}

.mannequin-slot.triple-slot {
  width: 228px;
  padding-right: 4px;
  gap: 4px;
}

/* Ensure sub-slots fit in the triple layout */
.mannequin-slot.triple-slot .mannequin-sub-slot {
  width: 60px;
  height: 60px;
}

.mannequin-slot.triple-slot .mannequin-sub-slot img {
  width: 100%;
  height: 100%;
}

/* --- START OF PARTIAL style.css --- */

/* Group container for Front/Back pairs in Saved Styles */
.combine-garment-group {
  display: flex;
  flex-direction: row;
  height: 80px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-xs);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--bg-card);
  margin-right: 0; /* Gap handled by parent flex gap */
}

/* Individual slot within the group */
.combine-slot {
  width: 80px;
  height: 100%;
  position: relative;
  border-right: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.02);
}

.combine-slot:last-child {
  border-right: none;
}

.combine-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Front/Back Label Overlay */
.combine-slot .view-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.55rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 0;
  pointer-events: none;
}

/* Empty State Icon for missing views */
.combine-slot .empty-indicator {
  font-size: 18px;
  color: var(--text-muted);
  opacity: 0.2;
}

/* Wrapper for Image Group + Tags in Saved Styles */
.combine-layer-column {
  display: flex;

  flex-direction: row;
  gap: 6px;
  flex-shrink: 0;
  /* min-width: 144px; */

  align-items: flex-start;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed rgb(103, 103, 103);
}

/* Container for the tags below the images */
.combine-tags-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 3px;
  width: 100%;
  height: 100%;
}

/* Smaller tag styling for this context */
.combine-tags-wrapper .mini-tag {
  font-size: 0.55rem;
  padding: 5.8px 8px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-dark);
  color: var(--text-secondary);
  border-radius: 4px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  flex-grow: 1;
  height: auto;
}

.combine-tags-wrapper .mini-tag.primary {
  color: var(--text-inverse);
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.combine-tags-wrapper .mini-tag.primary {
  color: var(--text-inverse);
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

/*  */
/*  */
/*  */
/*  */
/*  */

/* --- NEW: Unified Product Style View --- */

.selected-style-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(
    --bg-secondary
  ); /* Assuming variable exists, or #f5f5f5 */
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  padding: 12px;
  box-sizing: border-box;
}

.style-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
  font-size: 14px;
  font-style: italic;
  /* color: var(--text-muted); */
}

.selected-style-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.style-name-label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.style-name-value {
  font-size: 14px;
  font-weight: 500;
  color: #111;
}

.selected-style-grid {
  display: grid;
  /* Responsive columns: min 100px wide */
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 4px; /* Space for scrollbar */
}

/* Custom Scrollbar for the grid */
.selected-style-grid::-webkit-scrollbar {
  width: 4px;
}
.selected-style-grid::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.style-item-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.style-item-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border-color: #ccc;
}

.style-thumb-wrapper {
  width: 100%;
  aspect-ratio: 3/4; /* Consistent portrait ratio */
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
}

.style-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-icon {
  font-size: 24px;
  color: #ddd;
}

.style-item-info {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-category {
  font-size: 9px;
  text-transform: uppercase;
  color: #999;
  font-weight: 600;
}

.item-tag {
  font-size: 11px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
/* --- Style Viewer (Replaces Split Columns) --- */

#selected-style-container {
  padding: 0 !important; /* Override generic padding if necessary */
  background: transparent;
  border: none;
  overflow: hidden;
}

.style-viewer-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg-main);
  border-radius: 8px;

  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.style-viewer-header {
  padding: 10px 12px;
  background: #f9f9f9;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.style-viewer-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.style-viewer-title .label {
  font-size: 10px;
  text-transform: uppercase;

  font-weight: 600;
}

.style-viewer-title .value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-inverse);
}

.style-slots-pair {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.style-slot-mini {
  width: 48px;
  height: 64px; /* 3:4 Aspect */
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-slot-mini.empty {
  background: #fafafa;
}

.style-slot-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-icon-sm {
  font-size: 20px;
  color: #ddd;
}

.style-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0; /* Text truncation fix */
}

.style-category-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #999;
  font-weight: 600;
}

.style-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/*  */
/*  */
/*  */
/*  */
/*  */

.style-viewer-header {
  padding: 10px 12px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.style-viewer-header .secondary-btn {
  color: var(--text-muted);
  border-color: var(--text-muted);
  border-radius: 999px;
}

.style-viewer-header .secondary-btn .material-symbols-outlined {
  color: var(--text-muted);
}

.style-viewer-header .secondary-btn:hover {
  color: var(--text-secondary);
  border-color: var(--text-secondary);
}

.style-viewer-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.style-viewer-title .label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.style-viewer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--bg-primary);
}

.style-viewer-row {
  display: flex;
  gap: 12px;

  background-color: white;
  padding: 10px;
  border-radius: var(--radius-sm);
}

.style-slots-pair {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.style-slot-mini {
  width: 48px;
  height: 64px; /* 3:4 Aspect */
  background-color: var(--bg-input);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-slot-mini.empty {
  background-color: var(--bg-secondary);
  opacity: 0.7;
}

.style-slot-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-icon-sm {
  font-size: 20px;
  color: var(--text-muted);
  opacity: 0.5;
}

.style-slot-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 8px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7); /* Standard dark overlay */
  color: #fff; /* Always white on dark overlay */
  padding: 1px 0;
  font-weight: 500;
  backdrop-filter: blur(2px);
}

.style-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0; /* Text truncation fix */
}

.style-category-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.style-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mini-tag-sm {
  font-size: 10px;
  padding: 2px 6px;
  /* background-color: var(--bg-main); */
  border: 1px solid var(--text-primary);
  border-radius: 4px;
  color: var(--text-primary);
  white-space: nowrap;
}

.mini-tag-sm.primary {
  color: var(--text-primary);
  border-color: var(--text-primary);
  font-weight: 200;
}

.mini-tag-sm.placeholder {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 0;
  font-style: italic;
}

.gallery-dual-card .gallery-select-col:active {
  cursor: grabbing;
}

.mannequin-layout-wrapper
  > .mannequin-slots-col:first-child
  .mannequin-slot::before {
  left: auto;
  right: -20px;
}

#btn-save-combine:disabled {
  border-color: #444444; /* Darker gray border */
  color: #666666; /* Darker gray text */
  background-color: transparent;
  opacity: 1; /* Override default disabled opacity to show specific colors */
  cursor: not-allowed;
}

/* --- START OF PARTIAL style.css --- */
/* Replace the snake animation block */

@keyframes snake-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.header-input-container.snake-active {
  position: relative;

  /* 1. Reset native border */
  border: none !important;

  /* 2. Define the THICKNESS of the Snake (2px) */
  padding: 2px !important;

  /* 3. Define the THICKNESS of the Static Base Border (1px) using shadow */
  /* This ensures the gray line stays thin (1px) while the snake pulses thicker (2px) on top */
  box-shadow: inset 0 0 0 1px var(--text-muted);
  background: transparent;

  border-radius: var(--radius-sm);
  overflow: hidden;
  z-index: 0;
}

/* 4. The Snake (Spinning Gradient) */
/* Sits at z-index: 1 to overlap the box-shadow */
.header-input-container.snake-active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  /* Use a large square to ensure a single continuous tail */
  width: 100vh;
  height: 100vh;

  /* Green tail fading to transparent */
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 80%,
    var(--accent-primary) 100%
  );

  animation: snake-spin 3s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* 5. The Mask (Inner Card Background) */
/* Sits at z-index: 2 to cover the center, leaving only the padding area visible */
.header-input-container.snake-active::after {
  content: "";
  position: absolute;
  /* Match the padding (2px) to define the hollow center */
  inset: 2px;
  background: var(--bg-card);
  border-radius: calc(var(--radius-sm) - 2px);
  z-index: 2;
  pointer-events: none;
}

/* 6. The Content */
.header-input-container.snake-active .batch-title-input {
  position: relative;
  z-index: 3;
  background: transparent !important;
  border: none !important;
  width: 100%;
  height: 100%;
}

.gallery-header .close-btn {
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border: 1px solid var(--text-muted); /* Circular Border */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; /* Adjusted icon size to fit */
  transition: all 0.2s;
  background-color: transparent;
}

.gallery-header .close-btn:hover {
  color: var(--text-secondary);
  border-color: var(--text-secondary);
  /* background-color: rgba(0, 0, 0, 0.05);s */
}

/* --- Mannequin Label States --- */

/* Base transition for smooth resizing/coloring */
.mannequin-layer-group .layer-label {
  transition:
    color 0.2s ease,
    font-size 0.2s ease,
    font-weight 0.2s ease,
    text-shadow 0.2s ease;
  /* Ensure backface visibility for smoother rendering during rapid transitions */
  backface-visibility: hidden;
}

/* 
   Active States:
   1. .active-tagging: When the slot is selected for tag editing
   2. .drag-active: When a garment is being dragged over the slot
*/
.mannequin-layer-group.active-tagging .layer-label,
.mannequin-layer-group.drag-active .layer-label {
  color: var(--accent-primary) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-shadow: 0 0 10px rgba(103, 238, 173, 0.4);
}
/*  */
/*  */
/*  */
/*  */
/*  */

/* --- SAVED STYLES SEARCH --- */
.saved-styles-header {
  width: 100%;

  padding-bottom: 5px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  gap: 12px; /* Space between search and button */
}

.saved-styles-header .search-bar-container {
  width: 100%;
}

#btn-use-selected-styles {
  width: auto; /* Override global primary-btn width */
  min-width: 140px;
  height: 42px; /* Match search input height approx */
  padding: 0 20px;
  flex-shrink: 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Override absolute positioning for this specific button's sub-text */
#btn-use-selected-styles .btn-sub-text {
  position: static;
  transform: none;
  opacity: 0.8;
  font-size: 0.75rem;
  font-weight: 300;
  margin-left: 4px;
  animation: none; /* No slide animation needed for this context */
  pointer-events: none;
}

#btn-use-selected-styles .btn-main-content {
  font-size: 0.85rem;
  white-space: nowrap;
}

.search-bar-container .search-box-input {
  color: var(--text-secondary) !important;
}

/* ERROR MESAGES */

.person-sub-box,
.sec1-right-panel,
.pose-layout,
.main-stream-column,
.garment-split-row,
.gallery-box,
.collapsed-content-wrapper,
.sec4-left-panel-top {
  /* <--- ADDED THIS CLASS */
  position: relative;
}

.person-sub-box.has-person-error::after,
.sec1-right-panel.has-person-error::after,
.pose-layout.has-person-error::after,
.main-stream-column.has-person-error::after,
.garment-split-row.has-person-error::after,
.gallery-box.has-person-error::after,
.collapsed-content-wrapper.has-person-error::after,
.sec4-left-panel-top.has-person-error::after {
  /* <--- ADDED THIS SELECTOR */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  outline: 10px solid var(--accent-primary);
  outline-offset: -10px;
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.6);
  border-radius: inherit;

  z-index: 10001;
  pointer-events: none;
  box-sizing: border-box;

  opacity: 1;
  transition: opacity 0.5s ease;
}

.person-sub-box.has-person-error.fading::after,
.sec1-right-panel.has-person-error.fading::after,
.pose-layout.has-person-error.fading::after,
.main-stream-column.has-person-error.fading::after,
.garment-split-row.has-person-error.fading::after,
.gallery-box.has-person-error.fading::after,
.collapsed-content-wrapper.has-person-error.fading::after,
.sec4-left-panel-top.has-person-error.fading::after {
  /* <--- ADDED THIS SELECTOR */
  opacity: 0;
}

/* The Alert Pill */
.custom-person-alert {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  margin: 12px auto;
  padding: 16px 16px;
  text-align: center;
  display: block;

  background-color: var(--accent-primary);
  color: #000;

  /* UPDATED: Changed from 999px to variable */
  border-radius: var(--radius-md);

  font-weight: 200;
  font-size: 0.8rem;

  z-index: 10000;

  opacity: 0;
  transform: translateY(-5px);

  transition:
    opacity 0.5s ease,
    transform 0.3s ease;

  white-space: pre-line;
  line-height: 1.4;
}

/* STATE 2: Visible (Entry) */
.custom-person-alert.show-msg {
  opacity: 1;
  transform: translateY(0);
}

.person-sub-box.has-person-error.fading .custom-person-alert,
.sec1-right-panel.has-person-error.fading .custom-person-alert,
.pose-layout.has-person-error.fading .custom-person-alert,
.main-stream-column.has-person-error.fading .custom-person-alert,
.garment-split-row.has-person-error.fading .custom-person-alert,
.gallery-box.has-person-error.fading .custom-person-alert,
.collapsed-content-wrapper.has-person-error.fading .custom-person-alert,
.sec4-left-panel-top.has-person-error.fading .custom-person-alert {
  /* <--- ADDED THIS SELECTOR */
  opacity: 0 !important;
}

/* --- START OF PARTIAL style.css --- */
/* Add this to the end of the file */

/* Top Bar Refund Alert */
.top-bar {
  position: relative; /* Ensure alert is anchored here */
}

/* --- REFUND / ERROR ALERT TOAST --- */
.credit-refund-alert {
  position: fixed;
  text-align: center;
  top: -100px; /* Start off-screen */

  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-primary);
  color: var(--text-primary);
  padding: 12px 24px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 9999999;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  /* border: 1px solid #333; */
  transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

.credit-refund-alert.active {
  top: 20px; /* Dropped down position */
  pointer-events: auto;
}

.credit-refund-alert .material-symbols-outlined {
  color: #ff4d4d; /* Red icon */
  font-size: 20px;
}

/* --- PARTIAL: style.css --- */
/* Add these styles to the Multi-Style View section (around line 2250) */

.multi-style-thumbs {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 6px;
  padding-left: 2px; /* Slight offset */
}

.multi-style-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 0.4px solid var(--text-primary);
  margin-left: -10px; /* The overlap magic */
  background-color: var(--bg-main);
  flex-shrink: 0;
  position: relative;

  /* Natural stacking: Later elements cover earlier ones */
}

.multi-style-thumb:first-child {
  margin-left: 0;
}

.multi-style-more {
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-left: 6px;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
}

.gallery-cat-filters .setting-chip {
  color: var(--text-primary);
}

/* --- SECTION 4: PERFECT LAYOUT --- */
.sec4-right-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--bg-dark);
  margin: 8px; /* Full margin since no left panel */
  border-radius: var(--radius-md);
  width: 100%;
  overflow: hidden;
}

.sec4-search-panel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 25px;
  flex-shrink: 0;
  border-bottom: 0px solid rgba(0, 0, 0, 0.05);
}

.sec4-search-panel h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 100;
  color: var(--text-inverse);
  text-transform: capitalize;
}

.sec4-content-centered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-grow: 1;
  overflow-y: auto;
  background-color: transparent;
  padding: 8px;

  /* NEW: Hide Scrollbar */
  scrollbar-width: none;
}

.sec4-content-centered::-webkit-scrollbar {
  display: none;
}
/* --- SECTION 4: PERFECT LAYOUT --- */

.sec4-left-panel {
  width: 380px;
  min-width: 380px;
  height: 100%;

  display: flex;
  flex-direction: column;

  position: relative;
}

.sec4-left-panel-top {
  padding: 20px;
  margin: 8px;
  margin-bottom: 0;
  width: auto;

  /* CHANGED: Removed height: 100% to prevent overflow */
  flex-grow: 1;
  min-height: 0; /* Critical for nested flex scrolling */

  display: flex;
  flex-direction: column;
  background-color: var(--bg-dark);
  border-radius: var(--radius-md);
  /* Use bg-main so it looks like a sidebar panel vs the dark stream area */
  position: relative;
}

.perfect-list-header {
  padding: 15px 20px;
  height: 60px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.perfect-list-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Scrollable List Area */
.perfect-scroll-list {
  flex-grow: 1;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: none;
}

.perfect-scroll-list::-webkit-scrollbar {
  display: none;
}

/* List Item Card */
.perfect-list-item {
  display: flex;
  flex-direction: row;
  background-color: var(--color-white);
  padding: 8px;
  border-radius: var(--radius-xs);
  gap: 10px;
  align-items: stretch;
  position: relative;
  min-height: 80px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Left: The Generated Result */
.perfect-result-thumb-wrapper {
  width: 60px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background-color: #f0f0f0;
  position: relative;
}

.perfect-result-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Separator Line */
.perfect-item-separator {
  width: 1px;
  background-color: var(--border-base);
  margin: 4px 0;
}

/* Right: The Source Garments Grid */
.perfect-garment-grid {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}

.perfect-garment-thumb {
  width: 36px;
  height: 48px; /* Portrait ratio for garments */
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-base);
  background-color: #fafafa;
}

/* Remove Button for Item */
.perfect-item-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.perfect-item-remove:hover {
  background-color: var(--status-red-bright);
  transform: scale(1.1);
}

.perfect-item-remove .material-symbols-outlined {
  font-size: 14px;
}

/* Bottom Actions Area */
.perfect-bottom-actions {
  flex-shrink: 0;
  padding: 16px;

  background-color: transparent;
  width: 100%;
}

.sec4-search-panel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 25px;
  flex-shrink: 0;
  border-bottom: 0px solid rgba(0, 0, 0, 0.05);
}

.sec4-search-panel h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 100;
  color: var(--text-inverse);
  text-transform: capitalize;
}

/* Adjust Right Panel to fill space */
.sec4-right-panel {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--bg-dark);

  margin: 8px;
  margin-left: 0; /* Flush with left panel */
  border-radius: var(--radius-md);

  width: 100%;

  overflow: hidden;
}

/* --- IN FILE: style.css --- */

/* Identity Slot Styling */
.perfect-identity-wrapper {
  width: 60px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  border-radius: var(--radius-xs);
  border: 1px dashed var(--border-base);
  position: relative;
  overflow: hidden;
}

.perfect-identity-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.perfect-identity-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  width: 100%;
  cursor: pointer;
  color: var(--text-secondary);
  text-align: center;
  padding: 4px;
  transition: all 0.2s;
}

.perfect-identity-placeholder:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.perfect-identity-placeholder .icon {
  font-size: 18px;
}

.perfect-identity-placeholder .text {
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Status Badge for Identity Type */
.identity-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.5rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 1px 0;
  pointer-events: none;
}

#perfect-stream-container .image-wrapper {
  width: calc(33.333% - 12px);
}

/* --- START OF PARTIAL style.css --- */

/* Pose Tag "Use Settings" Button Styles */
.pose-tag-item.pose-tag-use-btn {
  justify-content: flex-start;
  gap: 8px;
  /* UPDATED: Reset padding/radius as requested */
  padding: 0;
  border-radius: 99px;
}

.use-settings-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* UPDATED: Specific font size override */
.material-symbols-outlined.use-settings-icon,
.use-settings-icon {
  font-size: 16px;
}

.use-settings-text {
  font-weight: 600;
  font-size: 0.75rem;
}

/* Re-generate Button specific tweaks */
.pose-tag-item.pose-tag-regen-btn {
  justify-content: flex-start;
  gap: 8px;
  /* UPDATED: Padding/Radius overrides */
  padding: 0;

  border-radius: 99px;
}

/* UPDATED: Hover state matches standard Use Settings button */
.pose-tag-item.pose-tag-regen-btn:hover {
  background: var(--accent-primary);
  color: var(--text-dark);
  border-color: var(--accent-primary);
}

/* Ensure content wrapper handles stacking nicely */
.pose-tags-content {
  gap: 0; /* Reset gap, handle via margins/padding in items */
}

/* --- NEW: Use Model Button Styles (Inherits structure) --- */
.pose-tag-item.pose-tag-model-btn {
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  margin-top: 4px; /* Space from Use Settings */
  border-radius: 99px;
}

@keyframes subtleGreenPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 238, 173, 0);
    border-color: transparent;
    transform: scale(1);
  }
  30% {
    box-shadow: 0 0 0 4px rgba(103, 238, 173, 0.5);
    border-color: var(--accent-primary);
    transform: scale(0.95);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 238, 173, 0);
    border-color: transparent;
    transform: scale(1);
  }
}
/* Class to trigger the animation */
.anim-pulse-green {
  animation: subtleGreenPulse 0.6s ease-out;
  /* Ensure border transition doesn't conflict */

  z-index: 20; /* Pop above neighbors during pulse */
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */

/* Unified Styles for Overlay Action Buttons (Use Settings, Use Pose, Use Style) */
.pose-tag-item.pose-tag-use-btn,
.pose-tag-item.pose-tag-model-btn,
.pose-tag-item.pose-tag-style-btn {
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  margin-top: 4px;
  border-radius: 99px;
  border: 1px solid transparent; /* Ensure border box consistency */
}

.pose-tag-item.pose-tag-use-btn:last-child {
  margin-bottom: 4px; /* No top margin if it's the only button */
}

/* Unified Hover State */
.pose-tag-item.pose-tag-use-btn:hover,
.pose-tag-item.pose-tag-model-btn:hover,
.pose-tag-item.pose-tag-style-btn:hover {
  background: var(--accent-primary);
  color: var(--text-dark);
  border-color: var(--accent-primary);
}

/* Icon Wrapper Consistency */
.use-settings-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* Text Consistency */
.use-settings-text {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1; /* Fix vertical alignment issues */
  padding-right: 8px; /* Visual balance on the right */
}

/* Re-generate Button (Top, Rounded Top-Corners) */
.pose-tag-item.pose-tag-regen-btn {
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  border-radius: 99px;
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */

/* Lightbox Pose Header */
.lightbox-sidebar-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  width: 100%;
}

.lightbox-root-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  /* UPDATED: Forces the crop to start from the top */
  object-position: top;

  border-radius: 6px;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  background-color: var(--bg-main);
}

.lightbox-header-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-inverse);
  line-height: 1.2;
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */

/* Lightbox Bottom Actions Container */
.lightbox-bottom-actions {
  margin-top: auto; /* Push to bottom of flex container */

  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Lightbox specific action buttons (Mimics overlay logic but fits sidebar) */
.lightbox-action-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  font-weight: 600;
  width: 100%;

  /* UPDATED: Required for internal feedback overlay */
  position: relative;
  overflow: hidden;
}

.lightbox-action-btn:hover {
  background-color: var(--accent-primary);
  color: var(--text-dark);
  border-color: var(--accent-primary);
}

.lightbox-action-btn .material-symbols-outlined {
  font-size: 18px;
}
/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */

/* Clickable Metadata Rows in Lightbox */
.lightbox-meta-item.clickable-meta-row {
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.1s;
  padding: 6px 8px; /* Padding for hit area */
  margin: 0 -8px; /* Negative margin to align text visually */
  border-radius: 6px;
  position: relative;
}

.lightbox-meta-item.clickable-meta-row:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.lightbox-meta-item.clickable-meta-row:active {
  transform: scale(0.98);
  background-color: rgba(193, 246, 78, 0.1); /* Subtle green tint on press */
}

/* Optional: Add a subtle icon or indicator on hover? */
.lightbox-meta-item.clickable-meta-row:hover::after {
  content: "tune"; /* Material Icon content */
  font-family: "Material Symbols Outlined";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-secondary);
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */

/* Metadata Feedback Message (White Box overlay) */
.meta-feedback-msg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--accent-primary);
  color: var(--text-primary); /* Dark text on white */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes feedbackFadeInOut {
  0% {
    opacity: 0;
    transform: translateY(100%); /* Start from bottom */
  }
  15% {
    opacity: 1;
    transform: translateY(0); /* Snap to center */
  }
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10%); /* Fade out slightly up */
  }
}

.anim-feedback-run {
  animation: feedbackFadeInOut 1s ease-in-out forwards;
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */

/* Lightbox Info Rows (Pose/Style Context) */
.lightbox-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;

  width: 100%;
}

.lightbox-info-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  object-position: top;
}

.lightbox-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  min-width: 0;
}

.lightbox-info-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.lightbox-info-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Garment Stack for Lightbox */
.lightbox-garment-stack {
  display: flex;
  align-items: center;
  padding-left: 4px; /* Offset for overlap */
}

.lightbox-garment-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-dark);
  background: var(--bg-main);
  margin-left: -8px; /* Overlap */
  position: relative;
  z-index: 1;
}

.lightbox-garment-circle:first-child {
  margin-left: 0;
}

/* Allow Info Rows to share the clickable behavior */
.lightbox-info-row.clickable-meta-row {
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.1s;
  border-radius: 6px;
  position: relative;
  /* Adjust padding/margin to fit the hover background nicely within the list */
  margin: 0 -8px;
  padding: 12px 8px;
  width: calc(100% + 16px);
}

.lightbox-info-row.clickable-meta-row:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.lightbox-info-row.clickable-meta-row:active {
  transform: scale(0.98);
  background-color: rgba(193, 246, 78, 0.1);
}

/* Custom Tag Input inside Pill */

.tag-pill input[type="text"] {
  width: 80px;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--text-secondary) !important;
  color: var(--text-inverse) !important; /* Keep text white for dark mode */
  font-family: inherit;
  font-size: inherit;
  text-align: center;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.tag-pill input[type="text"]:hover,
.tag-pill input[type="text"]:focus {
  background-color: transparent !important;
  border-bottom: 1px solid var(--accent-primary) !important;
  color: var(--text-inverse) !important;
}

.tag-pill.custom-pill.selected {
  border: 1px dashed var(--accent-primary);
  background-color: rgba(103, 238, 173, 0.1);
  color: var(--text-inverse);
}

/* ==========================================
   --- FOOD STUDIO CLASSES (Replaced Inline Styles) ---
   ========================================== */
.food-unified-view {
  margin: 8px;
  border-radius: var(--radius-md);
  background: transparent;
}
.food-sidebar-col {
  min-width: 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.food-left-col-wrapper {
  padding: 0;
  min-width: 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  overflow: hidden;
  border-radius: var(--radius-md);
}
.food-left-work-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: none;
  position: relative;
  overflow: hidden;
}
.food-items-stack-area {
  border: none;
  border-radius: 0;
  background-color: var(--bg-dark);
}
.food-left-header {
  border-top: none;
  background: var(--bg-dark);
}
.food-gallery-trigger-card {
  width: auto;
  padding: 0 12px;
}
.food-col-header {
  justify-content: flex-start;
  padding-bottom: 5px;
}
.food-header-title {
  font-weight: 700;
  color: var(--text-inverse);
}
.food-desc-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
}

.food-items-wrapper {
  flex: 1 1 0 !important;
  position: relative;
  overflow: hidden !important; /* Force no scrollbars */
  display: flex !important; /* Center the stack */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0 !important; /* Critical for flex child scaling */
  min-width: 0 !important;
}

.food-items-wrapper .img-stack {
  position: relative;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  min-height: 0 !important;
  min-width: 0 !important;
}

.food-items-wrapper .food-bg-empty-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.food-main-col {
  flex-grow: 1;
  background-color: var(--bg-card);
  position: relative;
  margin-left: 8px;
  margin-right: 8px;
}
.food-main-header {
  padding: 20px;
  padding-bottom: 10px;
}
.food-bg-area {
  flex-grow: 1;
  padding: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.food-bg-upload-container {
  flex-grow: 1;
  height: auto;
  border-radius: var(--radius-md);
}
.food-bg-icon {
  font-size: 36px;
}

.food-bg-wrapper {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: auto;
  display: block;
  width: auto;
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
}

.food-rect-list {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.food-empty-state {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
}

.food-form-group {
  margin-bottom: 15px;
}
.food-label {
  font-size: 0.75rem;
}
.food-prompt-input {
  font-size: 0.75rem;
}
.food-gallery-modal-layer {
  z-index: 20000;
}
.food-gallery-box {
  width: 80vw;
  max-width: 1000px;
  height: 80vh;
  margin: auto;
  padding: 20px;
  background: var(--bg-main);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}
.food-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.food-gallery-title {
  margin: 0;
  color: white;
}
.food-gallery-close-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}
.food-gallery-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}
.food-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
  overflow-y: auto;
  flex-grow: 1;
  align-content: start;
}
.food-btn-browse {
  width: 100%;

  padding: 8px;
  font-size: 0.75rem;
}

.food-btn-browse-bg {
  width: 100%;
  padding: 10px;
}
.food-browse-bg-wrapper {
  padding: 10px 20px 0 20px;
}
.food-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
}
.food-gallery-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  aspect-ratio: 1/1;
}
.food-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.food-gallery-delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.food-gallery-delete-icon {
  font-size: 16px;
}
.food-bg-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Ensure the image scales proportionately without blowing out the height */
.food-items-wrapper .img-stack img.food-item-image,
.food-item-image {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.food-overlay-canvas-style {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  z-index: 10;
}
.food-rect-control-custom {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-dark);
  border-left: 4px solid var(--rect-color);
  padding: 12px;
  border-radius: var(--radius-sm);
}
.food-rect-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.food-rect-header-title {
  font-weight: 700;
  color: var(--text-inverse);
  font-size: 0.85rem;
}
.food-rect-name-input {
  padding-left: 10px;
  width: 100%;
  border-left: 5px solid var(--rect-color);
  background: transparent;
  color: white;
  border-top: none;
  border-right: none;
  border-bottom: none;
  outline: none;
}
.food-ratio-select {
  height: 18px;
  width: auto;
  line-height: 1;
  padding: 0 16px 0 6px !important;
  font-size: 10px !important;
  border-radius: 4px;
  border: 1px solid #c1f64e;
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #c1f64e !important;
}

.food-rect-settings-label {
  font-size: 0.75rem;
  margin-bottom: 0;
}
.food-rect-prompt-input {
  font-size: 0.75rem;
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--border-dark);
  background: var(--bg-dark);
  color: white;
  padding: 8px;
  border-radius: 4px;
}

.food-add-rect-btn {
  width: 100%;
}

/* --- START OF PARTIAL style.css --- */
#downloadBtn,
#download4KBtn {
  width: 45px;
  height: 45px;
  min-width: 45px;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition:
    background-color 0.2s,
    transform 0.1s,
    color 0.2s,
    border-color 0.2s;
  flex-shrink: 0;
  margin-top: 0;
  padding: 0;
}

#downloadBtn:hover,
#download4KBtn:hover {
  background-color: var(--surface-primary-hover);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

#downloadBtn:active,
#download4KBtn:active {
  transform: scale(0.95);
}

#download4KBtn {
  font-weight: 800;
  font-size: 0.85rem;
}
/* --- END OF PARTIAL style.css --- */

.app-layout {
  /* background-color: var(--bg-main); */
  padding: 8px;
  margin: 0px;
  border-radius: var(--radius-lg);

  height: calc(100% - 76px - 8px);
  display: flex;
  gap: 8px;
  flex-grow: 1;
  overflow: hidden;

  /* Added to force horizontal scrolling inside body */
  min-width: 1200px;
}

.app-layout-nested {
  height: auto;
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* --- START OF PARTIAL style.css --- */
.sidebar {
  width: 220px; /* Reduced from 22% to a fixed narrower width */
  min-width: 220px; /* Ensures it doesn't crush on small screens */
  background-color: var(--bg-dark);
  padding: 20px; /* Margins/paddings preserved */
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 100;
  overflow-y: auto;
  flex-shrink: 0;

  border-radius: var(--radius-md);

  scrollbar-width: thin;
  scrollbar-color: #444 #1e1e1e;
}

.sidebar::-webkit-scrollbar-track {
  background: #1e1e1e;
}
/* --- END OF PARTIAL style.css --- */

/* Main Canvas Area (Wrapper for Columns 2 & 3) */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-dark);
  position: relative;
  border-radius: var(--radius-md);
}

/* Work Area (Columns 2 & 3) */
.work-area {
  flex: 1;
  display: flex;
  flex-direction: column;

  position: relative;
  overflow: hidden;
}

/* Header in Work Area (Footer) */
.work-area .header {
  padding: 20px;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  z-index: 20;
}

.header-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.2rem;
  font-weight: 100;
  color: var(--text-inverse);
  text-transform: capitalize;
}

/* --- UPLOADER STYLES --- */
.hidden-input {
  display: none !important;
}

/* Single Upload */
.custom-file-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #2c2c2c;
  border: 1px dashed var(--accent-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #aaa;
  text-align: center;
  height: 120px;
  overflow: hidden;
}

.custom-file-upload:hover,
.custom-file-upload.upload-dragging {
  background-color: var(--accent-focus-faint);
  color: #fff;
}

.custom-file-upload.has-file {
  border-style: solid;
  border-color: #444;
  padding: 0;
}

.custom-file-upload .default-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Grid Upload */
.garment-grid-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;

  border: 1px solid #444;
  border-radius: var(--radius-md3);
  padding: 8px;
  height: 80px;
  margin: 8px;
  margin-top: 0;

  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.garment-grid-wrapper::-webkit-scrollbar {
  display: none;
}

.garment-grid-wrapper.upload-dragging {
  border-color: var(--bg-mid);
  background-color: #252a30;
  border-style: dashed;
}

.garment-card {
  width: 50px;
  height: 60px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: grab;
  border: 1px solid #555;
  background: #000;
  flex-shrink: 0;
}
.garment-card:active {
  cursor: grabbing;
}
.garment-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.garment-add-card {
  width: 50px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #666;
  border-radius: 4px;
  cursor: pointer;
  color: #888;
  flex-shrink: 0;
}
.garment-add-card:hover {
  border-color: #007bff;
  color: #007bff;
  background: #333;
}
.garment-add-card .icon {
  font-size: 18px;
}
.garment-add-card .text {
  font-size: 0.6rem;
}

.remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.remove-btn .material-symbols-outlined {
  font-size: 12px;
}
.remove-btn:hover {
  background: red;
}

/* --- CRITICAL FIX FOR CALCULATION ACCURACY --- */
.img-wrapper {
  flex: 1;
  position: relative;
  overflow: auto;
  display: block;
  padding: 0;
  margin: 0;

  scrollbar-width: thin;
  scrollbar-color: #444 #000;

  margin: 8px;
  border-radius: var(--radius-md3);
}

.img-wrapper::-webkit-scrollbar-track {
  background: #000;
}

.img-stack {
  position: relative;
  width: 100%;
  display: block;
  padding: 0;
  margin: 0;
}

.img-stack img {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
  object-fit: contain;
}

.overlay-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: auto;
}

/* --- FORM ELEMENTS --- */
label {
  display: block;
  font-size: 0.85rem;
  color: #aaa;
  font-weight: bold;
}

input[type="text"],
input[type="number"],
input[type="file"],
textarea,
select {
  width: 100%;
  background-color: #2c2c2c;
  border: 1px solid #444;
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #666;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23e0e0e0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding-right: 35px;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* --- RECT CONTROLS --- */
.rect-control-item {
  background-color: #2c2c2c;
  padding: 15px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 6px;
  border: 1px solid #444;
  position: relative;
}

.ratio-select {
  width: 70px !important;
  padding: 5px !important;
  height: 30px;
  font-size: 0.8rem !important;
  background-color: #222 !important;
}

.rect-name-input {
  flex: 1;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  font-weight: bold;
  padding: 5px !important;
  font-size: 0.95rem !important;
  height: 30px;
}
.rect-name-input:focus {
  background-color: #1e1e1e !important;
  border-color: #555 !important;
}
.rect-name-input:hover {
  background-color: #333 !important;
}

/* Settings Bar */
.rect-settings-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #222;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #3d3d3d;
}

/* Prompt */
.rect-prompt-label {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: bold;
}

.rect-prompt-input {
  font-family: monospace;
  font-size: 0.85rem;
  min-height: 70px;
  background-color: #181818;
}

#profile-trigger {
  display: flex;
}

/* --- FOOD STUDIO HEADER ROW & BUTTONS --- */
.food-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.food-header-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.food-circle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;

  background: var(--bg-green-btn);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.food-circle-btn .material-symbols-outlined {
  color: var(--text-primary);
}

.food-circle-btn:hover {
  background: var(--surface-primary-hover);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.food-circle-btn .material-symbols-outlined {
  font-size: 18px;
}

.food-history-item-card {
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  position: relative; /* REQUIRED for the active-on-canvas checkmark positioning */
}

.food-history-main-thumb {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.food-history-info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  flex-grow: 1;
}

.food-history-title {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.food-history-date {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.food-history-crops-row {
  display: flex;
  font-size: 0.65rem;
  gap: 4px;
  margin-top: 6px;
  color: var(--text-inverse);
}

.food-history-crop-thumb {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border-dark);
}

.discard-btn {
  background: #ff5252;
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.accept-btn {
  background: #c1f64e;
  color: #000;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.food-history-item-card.active-on-canvas {
  border-color: var(--accent-primary);
  background-color: rgba(103, 238, 173, 0.05);
}

/* Restrict the checkmark to ONLY the history list */
#historyList .food-history-item-card.active-on-canvas::after {
  content: "check_circle";
  font-family: "Material Symbols Outlined";
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--accent-primary);
  font-size: 18px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Ensure it never appears in the Active Layers list */
#activeLayersList .food-history-item-card.active-on-canvas::after {
  display: none !important;
}

.food-history-item-card.active-on-canvas::after {
  content: "check_circle";
  font-family: "Material Symbols Outlined";
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--accent-primary);
  font-size: 18px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* --- FOOD STUDIO LOADING OVERLAY --- */
.food-loading-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5); /* 50% black opacity */
  pointer-events: none;
  z-index: 10;
}

.food-loading-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0;
}

/* --- START OF PARTIAL style.css --- */
/* Add these to the end of the file */

.food-active-layers-wrapper {
  flex: 0 0 35%; /* Forces constant height (35% of sidebar) */
  height: 35%;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 15px;
  overflow: hidden; /* Ensures internal content scrolls instead of stretching the box */
}

.food-history-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.layer-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
}

.layer-remove-btn:hover {
  background: var(--status-red-bright);
}

.layer-remove-btn .material-symbols-outlined {
  font-size: 14px;
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* --- START OF PARTIAL style.css --- */
/* Add to the end of the file */

/* --- FOOD UPSCALE DEBUG MODAL --- */
.debug-image-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dark);
}

.debug-image-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: #000;
  border-radius: 4px;
}

.debug-image-label {
  font-size: 0.8rem;
  color: var(--text-inverse);
  text-align: center;
  font-weight: 600;
}

#btn-upscale {
  height: 45px;
  border-radius: var(--radius-lg);
  margin-top: 10px;
}

.food-floating-select-wrapper {
  position: static;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: var(--bg-dark);
  border: none !important; /* Removed border */
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.food-floating-select-wrapper.is-collapsed {
  width: auto;
  width: fit-content;
}

.rect-ui-toggle-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #333333; /* Dark gray background */
  color: #ffffff; /* White icon */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  border: none; /* Removed the light colored stroke */
  transition:
    transform 0.1s,
    background-color 0.2s;
  flex-shrink: 0;
  align-self: flex-start;
}

.rect-ui-toggle-btn:hover {
  transform: scale(1.1);
  background-color: #4a4a4a; /* Slightly lighter gray on hover */
}

.rect-ui-toggle-btn .material-symbols-outlined {
  font-size: 18px;
  font-weight: 800;
}

.food-floating-select-wrapper .merged-dropdown {
  margin: 0;
}

/* --- START OF PARTIAL style.css --- */
/* Add to the end of the file */

.food-floating-actions-container {
  position: absolute;
  top: -2px;
  left: 0;
  pointer-events: none;
  z-index: 30;
  width: var(--container-width, 100%);
  height: var(--container-height, 100%);
}

.food-dynamic-ratio-select {
  height: 26px;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 24px 0 10px !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  border-radius: var(--radius-xl); /* Modern pill shape */
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-inverse) !important; /* Crisp white text */
  /* Force a clean white SVG arrow instead of dynamic colors to reduce visual noise */
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
  background-size: 16px;
  background-position: right 4px center;
  background-repeat: no-repeat;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition:
    background-color 0.2s,
    border-color 0.2s;
  margin: 0;
}

.food-dynamic-ratio-select:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.food-loading-overlay.dynamic-bounds {
  left: var(--pos-left, 0px);
  top: var(--pos-top, 0px);
  width: var(--pos-width, 100%);
  height: var(--pos-height, 100%);
}

.food-main-footer {
  padding: 0 20px 20px 20px;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* --- ACTIVE LAYERS DRAG AND DROP STYLES --- */
.draggable-layer {
  cursor: grab;
}

.draggable-layer:active {
  cursor: grabbing;
}

.layer-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 20px !important; /* Ensure it matches standard icon size */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  user-select: none;
}

.layer-drag-handle:hover {
  color: var(--text-inverse);
}

.layer-drag-ghost {
  opacity: 0.4;
  border: 1px dashed var(--accent-primary) !important;
}

.layer-drag-over {
  background-color: rgba(103, 238, 173, 0.15) !important;
  box-shadow: inset 0 0 0 2px var(--accent-primary) !important;
  transform: scale(1.02);
  transition: all 0.1s ease;
}

/* --- FOOD COMPARE / DEBUG MODALS & HISTORY --- */
.compare-modal-box {
  max-height: 90vh;
  width: 80vw !important; /* Make the modal wider for better comparison */
  max-width: 1200px !important;
}
.compare-slider-container {
  position: relative;
  width: 100%;
  height: 60vh; /* Dynamic height based on viewport */
  min-height: 400px;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  user-select: none;
  cursor: ew-resize;
}
.compare-slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Maintains aspect ratio perfectly */
  pointer-events: none;
}

.compare-slider-upscaled {
  /* Default mask at 50% revealing the RIGHT side */
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.compare-slider-dynamic {
  /* Overrides default with CSS variable updated by JS, revealing the RIGHT side */
  clip-path: polygon(
    var(--clip-pos, 50%) 0,
    100% 0,
    100% 100%,
    var(--clip-pos, 50%) 100%
  ) !important;
}

.compare-slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 100%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none; /* Let the container handle the drag events */
}

.compare-handle-dynamic {
  left: var(--clip-pos, 50%) !important;
}

.compare-slider-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: var(--color-white);
  transform: translateX(-50%);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.compare-slider-button {
  position: relative;
  width: 32px;
  height: 32px;
  background-color: var(--accent-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.compare-label {
  position: absolute;
  top: 15px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 5;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.compare-label-left {
  left: 15px;
}

.compare-label-right {
  right: 15px;
}
.debug-scroll-content {
  padding: 20px;
  overflow-y: auto;
  background-color: var(--bg-card);
  border-radius: var(--radius-sm);
}
.debug-title-text {
  color: white;
  margin-top: 0;
}
.debug-prompt-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}
.debug-subtitle-text {
  color: white;
}
.debug-footer-actions {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.debug-confirm-btn {
  width: auto;
}

/* History Upscale Pending & Action Styles */
.food-history-pending-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
}
.food-history-pending-spinner {
  margin: 0;
}
.food-history-upscale-title {
  color: var(--accent-primary);
  font-weight: bold;
}
.food-history-upscale-crops {
  color: var(--accent-primary);
  font-size: 10px;
  font-weight: bold;
}
.food-upscale-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.food-upscale-action-btn {
  padding: 4px 8px;
  font-size: 0.7rem;
  width: auto;
  height: 24px;
}
.food-upscale-action-icon {
  font-size: 14px;
}

/* Compare Modal Specifics */
.compare-modal-content {
  display: flex;
  gap: 15px;
  padding: 20px;
  height: 100%;
}
.compare-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.compare-col-title {
  color: var(--text-inverse);
  font-weight: 600;
  margin: 0;
}
.compare-col-title-accent {
  color: var(--accent-primary);
  font-weight: 600;
  margin: 0;
}
.compare-img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dark);
  object-fit: contain;
  background: var(--bg-card);
}
.compare-img-accent {
  border-color: var(--accent-primary);
}

/* --- FOOD BACKGROUND EMPTY STATE --- */
.food-bg-empty-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0.5;
  color: var(--text-secondary);
  text-align: center;
  padding: 20px;
  pointer-events: none; /* Let clicks pass through if needed */
}

.food-bg-empty-icon {
  display: none;
  font-size: 48px !important;
  margin-bottom: 10px;
}

.food-bg-empty-text {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

#itemsWrapper {
  background-color: var(--bg-card);
}

#acc-environment .image-wrapper {
  width: calc(32% - 14.4px);
}

.food-dynamic-ratio-select.type-select,
.food-dynamic-ratio-select.action-select,
.food-dynamic-ratio-select.perspective-select,
.food-dynamic-ratio-select.light-select {
  width: auto !important;
  max-width: 130px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-state {
  margin-top: 20px;
  margin-left: 10px;
  color: var(--text-link);
}

.food-grid-empty-text {
  text-align: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  color: var(--text-muted);
}

/* --- START OF PARTIAL style.css --- */
/* Add to the end of the file */

/* --- CANVAS ZOOM CONTROLS --- */
.zoom-control-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto; /* Pushes the Action buttons to the right */
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 12px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-dark);
}

#edge-blend-control {
  display: none;
}

.zoom-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100px;
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  outline: none;
  cursor: ew-resize;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
}

.zoom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: none;
}

.text-muted {
  color: var(--text-muted);
}

/* Enable Dynamic Width driven by JS */
#bgWrapper {
  --zoom-level: 100%;
}

#bgWrapper .img-stack {
  width: var(--zoom-level);
  margin: 0 auto; /* Keeps the zoomed-out image perfectly centered */
}
/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */
/* Add to the end of the file */

/* Garment Card Single View UI Enhancements */
.garment-card {
  cursor: pointer !important;
}

.garment-card.selected {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 2px var(--accent-primary);
  background-color: rgba(193, 246, 78, 0.05); /* Faint green highlight */
}
/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */
/* --- DOWNLOAD POPOVER & FOOTER UTILITIES --- */
.download-popover-panel {
  width: 180px !important;
  padding: 15px;
  z-index: 99999 !important;
  bottom: auto !important; /* Prevents conflict with dynamic fixed positioning */
}

.download-chip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.download-chip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
}

.download-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.download-trigger-btn .material-symbols-outlined {
  color: var(--text-primary);
}

.download-trigger-text {
  font-size: 0.85rem;
}

.flex-grow-1 {
  flex-grow: 1;
}

.mb-0 {
  margin-bottom: 0 !important;
}
/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */
/* --- BATCH HEADER COLLAPSED/EXPANDED VIEW --- */
.batch-info-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.batch-collapsed-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.batch-info-group.is-expanded .batch-collapsed-view {
  display: none;
}

.batch-expanded-view {
  display: none;
  flex-direction: column;
  width: 100%;
}

.batch-info-group.is-expanded .batch-expanded-view {
  display: flex;
}

.collapsed-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
}

.collapsed-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-inverse);
  flex-shrink: 0;
}

.collapsed-parent-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-inverse);
  flex-shrink: 0;
  margin-right: 4px;
}

.collapsed-divider {
  display: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.collapsed-summary {
  display: none;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collapsed-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-toggle-expand {
  background: transparent;
  border: 1px solid var(--accent-primary);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-lg);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-toggle-expand:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-inverse);
  border-color: var(--text-inverse);
}
/* --- END OF PARTIAL style.css --- */

.icon-btn-small.btn-toggle-expand .icon-size-small {
  font-size: 18px;
}

.collapsed-right .icon-btn-small {
  width: 32px;
  height: 32px;
}
/* --- CSP Compliant Loader Utilities --- */
.spinner-sm.centered {
  margin-right: 0;
  margin-left: 0;
}

.identity-pending-spinner {
  border-width: 3px;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}

.upload-overlay-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 5;
  backdrop-filter: blur(2px);
}

.align-self-center {
  align-self: center;
}

.pointer-events-none {
  pointer-events: none !important;
}

/* --- START OF PARTIAL style.css --- */
/* --- STREAM SEARCH PANEL COLLAPSE SYSTEM --- */

/* Base transition for smooth expand/collapse */
.stream-search-panel {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 25px 25px;
  flex-shrink: 0;
  z-index: 10;
  border-bottom: 0px solid rgba(0, 0, 0, 0.05);
  background-color: transparent;
  position: relative;
  align-items: center;
  justify-content: center;

  /* Smooth animation for the revealing header */
  transition:
    max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.3s ease,
    margin 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  max-height: 150px;
  opacity: 1;
  padding-right: 60px !important; /* Make room for the active floating search toggle */
  overflow: visible;
}

.stream-search-panel h4 {
  margin: 0;
  margin-right: 15px;
}

.expanded-view .stream-search-panel {
  background-color: transparent;
}

/* Collapsed state (Hides the search header smoothly) */
.stream-search-panel.search-panel-collapsed {
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden !important;
}

/* 
   FLOATING SEARCH TOGGLE 
   Tucked diagonally into the top-right corner. 
   Parent's overflow:hidden will clip it into a nice curved tab.
*/
.floating-search-toggle .material-symbols-outlined {
  color: var(--bg-green-btn);
}
.floating-search-toggle {
  position: absolute;
  top: 23px; /* Tucked up into the corner */
  right: 80px; /* Tucked right into the center */
  transform: translateX(50%);
  z-index: 100;
  opacity: 1;
  background-color: var(--bg-card);
  /* box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.5); */

  /* Animate both Top and Right to slide diagonally into view */
  transition:
    top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.3s ease,
    background-color 0.2s;
}

/* Slide down and left diagonally into full view on hover */
.floating-search-toggle:hover {
  top: 23px;
  right: 80px;
  transform: translateX(50%);
  opacity: 1;
}

/* Keep the button fully visible and highlighted when the search panel is OPEN */
.floating-search-toggle.active {
  top: 29px;
  right: 20px;
  transform: translateX(0); /* Clean snap to the right edge */
  opacity: 1;
  /* background-color: var(--accent-primary); */
  color: var(--text-dark);
  border-color: var(--accent-primary) !important;
}

.floating-search-toggle.active:hover {
  /* background-color: var(--accent-hover); */
  color: var(--text-dark);
}
/* --- END OF PARTIAL style.css --- */

/* --- NEW POSE LIST HEADER & SIMPLE ADD BUTTON --- */
.pose-list-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  margin-top: 15px;
}

.pose-list-header-label {
  margin: 0;
  color: var(--text-inverse);
}

.btn-add-pose-simple {
  width: auto;
  height: 32px;
  padding: 0 16px;
  border-radius: 99px;
  font-size: 0.75rem;
  gap: 4px;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.btn-add-pose-simple:hover {
  background-color: rgba(103, 238, 173, 0.1) !important;
}

/* --- POSE LIST HEADER FIXES & SCROLL AREA --- */

/* --- POSE LIST HEADER FIXES & SCROLL AREA --- */

.sub-box.pose-sub-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 80px; /* Clears the absolute sticky footer */
  padding-bottom: 10px; /* Small inner padding at bottom */
}

/* Header layout: title on left, + button on right */
.sub-box.pose-sub-box .sub-box-header.pose-sub-box-header {
  position: relative;
  width: 100%;
  padding: 0;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  flex-shrink: 0;
}

/* The circular Add Button styling */
.btn-add-pose-circle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-green-btn);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s;
}

.btn-add-pose-circle .material-symbols-outlined {
  font-size: 20px;
  color: var(--text-dark);
}

.btn-add-pose-circle:hover {
  background-color: var(--accent-bright);
  color: var(--text-primary);
}

.btn-add-pose-circle:active {
  transform: scale(0.95);
}

/* Dedicated scrolling area inside the sub-box */
.pose-scroll-area {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  height: auto !important; /* Override global .scroll-content fixed calc height */

  scrollbar-width: none; /* Firefox */
}

.pose-scroll-area::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* --- POSE LIST ITEM REARRANGEMENT --- */
.pose-list-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pose-list-item-footer {
  display: none !important; /* Hide old footer permanently */
}

#env-elements-popover,
#landscape-elements-popover,
#urban-elements-popover {
  background-color: var(--text-primary);
}

/* --- START OF PARTIAL style.css --- */
/* --- CANVAS PREVIEW ZOOM --- */
.zoomable-img {
  cursor: zoom-in;
  transition: transform 0.2s ease-out;
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

.zoomable-img.zoomed-img {
  cursor: zoom-out;
  transform: scale(2.5); /* 2.5x zoom factor */
}
/* --- END OF PARTIAL style.css --- */

.powered-text {
  font-size: 10px;
  text-transform: capitalize;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-left: 6px;
}

.credit-container {
  display: none !important;
}

.gallery-view .column-header {
  display: none !important;
}

/* Prevent background and text color change on hover/focus for custom save-state text inputs */
input[type="text"].save-state:not(.combine-name-input),
input[type="text"].save-state:not(.combine-name-input):hover,
input[type="text"].save-state:not(.combine-name-input):focus {
  background-color: var(--surface-primary) !important;
  color: var(--text-primary) !important;
}

/* --- START OF PARTIAL style.css --- */
/* --- NEW: Scale Edit Object Name Input --- */
.canvas-scale-name-input {
  width: 100%;
  background-color: var(--surface-primary);
  border: 1px solid transparent;
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  font-size: 0.7rem;
  font-weight: 400;
  outline: none;
  font-family: inherit;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  box-sizing: border-box;
}

.canvas-scale-name-input:focus {
  border-color: var(--accent-focus);
}

.canvas-scale-name-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}

/* --- END OF PARTIAL style.css --- */

/* --- START OF PARTIAL style.css --- */
/* --- NEW: Scale Edit 5-Stop Slider --- */
.scale-slider-group {
  padding: 8px 12px;
  background-color: var(--bg-dark);
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.scale-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
}

.canvas-scale-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  margin: 4px 0;
}

.canvas-scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s;
}

.canvas-scale-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

.canvas-scale-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s;
}

.canvas-scale-slider::-moz-range-thumb:active {
  transform: scale(1.2);
}
/* --- END OF PARTIAL style.css --- */

/* --- FOOD HISTORY HOVER MENU (TOP-LEFT ANCHOR) --- */
.food-history-hover-menu {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 50;
  justify-content: flex-start;
}

/* HIDE BUTTON GLOBALLY IF ENVIRONMENT IS PRODUCTION */
body.env-production .food-history-hover-menu {
  display: none !important;
}

.food-history-hover-menu .trigger-icon {
  top: 5px;
  bottom: auto;
}

/* Custom trigger state for toggled-off items (lowers opacity but remains clickable) */
.custom-color-trigger.is-off {
  opacity: 0.5;
}