/* =======================================================================
   Brand Engine — custom.css
   Stack: Tabler (Bootstrap 5) + this file.
   Admin templates also use this file (unified CSS stack).
   ======================================================================= */

/* Utility: gallery.html uses .hidden for JS-toggled state elements */
.hidden { display: none !important; }

/* ── Generation queue status strip ─────────────────────────────────── */
.gen-queue-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 4px 2px;
  font-size: 12px;
  color: var(--tblr-warning, #f59f00);
}
.gen-queue-status #gen-queue-label {
  margin-right: auto;  /* push label left, buttons right */
}
.gen-queue-status .btn-xs {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 4px;
}
/* Cancel — same filled style as the Generate button (btn-primary) */
#gen-queue-cancel-current {
  background-color: var(--tblr-primary, #206bc4);
  border-color:     var(--tblr-primary, #206bc4);
  color: #fff;
}
#gen-queue-cancel-current:hover {
  background-color: color-mix(in srgb, var(--tblr-primary, #206bc4) 85%, #000);
  border-color:     color-mix(in srgb, var(--tblr-primary, #206bc4) 85%, #000);
  color: #fff;
}
/* Cancel all — filled danger */
#gen-queue-cancel-all {
  background-color: var(--tblr-danger, #d63939);
  border-color:     var(--tblr-danger, #d63939);
  color: #fff;
}
#gen-queue-cancel-all:hover {
  background-color: color-mix(in srgb, var(--tblr-danger, #d63939) 85%, #000);
  border-color:     color-mix(in srgb, var(--tblr-danger, #d63939) 85%, #000);
  color: #fff;
}

/* Tabler form-hint is too small by default — bump to 12px */
.form-hint { font-size: 1.0rem; }

/* ── Bridge variables — Tabler tokens → project component naming ──── */
:root {
  --clr-bg:      var(--tblr-body-bg);
  --clr-bg-2:    var(--tblr-secondary-bg);
  --clr-bg-3:    color-mix(in srgb, var(--tblr-body-bg) 70%, #000);
  --clr-text:    var(--tblr-body-color);
  --clr-muted:   var(--tblr-secondary-color);
  --clr-primary: var(--tblr-primary, #206bc4);
  --clr-danger:  var(--tblr-danger,  #d63939);
  --clr-success: var(--tblr-success, #2fb344);
  --clr-warning: var(--tblr-warning, #f76707);
  --clr-border:  var(--tblr-border-color);
}

/* ── Text selection — high-contrast on dark theme ──────────────────── */
::selection      { background: rgba(100, 160, 255, 0.45); color: #fff; }
::-moz-selection { background: rgba(100, 160, 255, 0.45); color: #fff; }

/* ── App navbar ─────────────────────────────────────────────────────── */
.app-navbar {
  position: fixed;
  top: 0; left: 0; right: 0; height: 52px;
  z-index: 50;
  display: flex; align-items: center;
  padding: 0 1rem; gap: 0.25rem;
  background: var(--tblr-card-bg, var(--clr-bg-2));
  border-bottom: 1px solid var(--clr-border);
}
.app-navbar-brand {
  font-size: 0.875rem; font-weight: 700; letter-spacing: -0.02em;
  text-decoration: none; color: var(--clr-text);
  margin-right: 0.75rem; flex-shrink: 0;
  display: flex; flex-direction: column; line-height: 1.15;
}
.app-navbar-brand-sub {
  font-size: 9px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--tblr-warning, #f59f00);
  display: block; margin-top: 3px; text-align: center;
}
#nav-plugin-tabs {
  flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
#nav-plugin-tabs::-webkit-scrollbar { display: none; }
.app-navbar-right {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0; padding-left: 0.75rem;
}

/* Tab buttons */
.tab-btn {
  border: none; background: transparent;
  color: color-mix(in srgb, var(--clr-text) 50%, transparent);
  padding: 7px 14px; border-radius: 8px; font: inherit;
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  text-decoration: none; display: inline-block;
}
.tab-btn:hover  { background: color-mix(in srgb, var(--clr-text) 6%, transparent); color: var(--clr-text); }
.nav-tab-gap    { width: 20px; flex-shrink: 0; display: inline-block; }
.tab-btn.active {
  color: var(--clr-text);
  border-bottom: 1px solid color-mix(in srgb, var(--clr-text) 50%, transparent);
  border-radius: 0;
}

/* Hide the in-tab Generate button rendered by <process-tabbar> — the
   canonical Generate lives in the global top-bar slot now. */
process-tabbar .ptb__action { display: none !important; }

/* ── Top-bar Generate slot (global output pill + Generate button) ──── */
.topbar-generate-slot {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  margin: 0 8px 0 12px; flex-shrink: 0;
}
.topbar-output-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--clr-text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--clr-text) 16%, transparent);
  color: var(--clr-text);
  font-size: 14px; font-weight: 600; line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.topbar-output-pill:hover,
.topbar-output-pill.is-open {
  background: color-mix(in srgb, var(--clr-text) 14%, transparent);
  border-color: color-mix(in srgb, var(--clr-text) 32%, transparent);
}
.topbar-output-pill svg { opacity: 0.7; }

/* Compound Generate button — primary action + privacy chevron. */
.topbar-generate-group {
  display: inline-flex; align-items: stretch;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.15s;
}
.topbar-generate-btn,
.topbar-privacy-chevron {
  padding: 8px 16px; font-size: 14px; font-weight: 600;
  line-height: 1.2; border: none; cursor: pointer;
  background: var(--tblr-primary, #206bc4);
  color: #fff;
  transition: background 0.15s, opacity 0.15s;
}
.topbar-generate-btn {
  border-radius: 10px 0 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar-generate-private-icon { display: none; }
.topbar-generate-group.is-private .topbar-generate-private-icon { display: inline-block; }
.topbar-generate-public-icon { display: inline-block; }
.topbar-generate-group.is-private .topbar-generate-public-icon { display: none; }
.topbar-privacy-chevron {
  padding: 8px 8px; border-radius: 0 10px 10px 0;
  border-left: 1px solid rgba(255,255,255,0.2);
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-generate-btn:hover:not(:disabled),
.topbar-privacy-chevron:hover {
  background: color-mix(in srgb, var(--tblr-primary, #206bc4) 88%, #000);
}
.topbar-generate-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.topbar-generate-btn.is-busy  { opacity: 0.7; cursor: progress; }

/* Private state — button turns warning-gold to match the admin accent. */
.topbar-generate-group.is-private .topbar-generate-btn,
.topbar-generate-group.is-private .topbar-privacy-chevron {
  background: var(--tblr-warning, #f59f00);
  color: #1a1000;
}
.topbar-generate-group.is-private .topbar-privacy-chevron {
  border-left-color: rgba(0,0,0,0.15);
}
.topbar-generate-group.is-private .topbar-generate-btn:hover:not(:disabled),
.topbar-generate-group.is-private .topbar-privacy-chevron:hover {
  background: color-mix(in srgb, var(--tblr-warning, #f59f00) 88%, #000);
}

.topbar-privacy-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 180px; padding: 4px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px color-mix(in srgb, #000 40%, transparent);
  z-index: 100;
}
.topbar-privacy-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border-radius: 6px;
  background: transparent; border: none; color: var(--clr-text);
  font-size: 13px; text-align: left; cursor: pointer;
}
.topbar-privacy-option:hover {
  background: color-mix(in srgb, var(--clr-text) 8%, transparent);
}
.topbar-privacy-option-check { width: 14px; display: inline-block; color: var(--tblr-success, #2fb344); }
.topbar-privacy-option-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--tblr-primary, #206bc4);
}
.topbar-privacy-option[data-value="private"] .topbar-privacy-option-dot {
  background: var(--tblr-warning, #f59f00);
}
.topbar-privacy-option-label { flex: 1; font-weight: 500; }
.topbar-privacy-option-sub { font-size: 11px; color: var(--clr-muted); }
.topbar-output-popover {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 240px; padding: 12px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px color-mix(in srgb, #000 40%, transparent);
  z-index: 100;
}
.topbar-popover-row { margin-bottom: 10px; }
.topbar-popover-row:last-child { margin-bottom: 0; }
.topbar-popover-label {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--clr-text) 60%, transparent);
}

/* ── Toast ──────────────────────────────────────────────────────────── */
.app-toast {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 200;
  padding: 0.625rem 1rem; border-radius: 0.75rem;
  font-size: 0.875rem; font-weight: 500;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  box-shadow: 0 4px 24px color-mix(in srgb, #000 40%, transparent);
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.app-toast.show { opacity: 1 !important; pointer-events: auto !important; }

/* ── Tool layout ────────────────────────────────────────────────────── */
.tool-pane { overflow-y: auto; padding: 24px; height: 100%; }
.tool-wrap  { max-width: 1100px; margin: 0 auto; }

/* Gallery left-rail drawer — content pane shifts right when drawer is open. */
.tool-pane--with-rail {
  display: block;
  padding-left: 24px;
  transition: padding-left 0.22s ease;
}
.tool-pane--with-rail.gallery-drawer-open {
  padding-left: 196px; /* 180px drawer + 16px gap */
}
.tool-pane--with-rail .tool-wrap { max-width: none; margin: 0; }

/* ── Gallery rail drawer ─────────────────────────────────────────────── */
.gallery-rail {
  position: fixed;
  top: 52px;
  left: 0;
  bottom: 0;
  width: 180px;
  transform: translateX(-180px);
  transition: transform 0.22s ease, bottom 0.22s ease;
  z-index: 200;
  background: var(--clr-bg-1, #16181d);
  border-right: 1px solid var(--clr-border, rgba(255,255,255,0.08));
  overflow-y: auto;
  padding: 16px 8px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.gallery-rail--open {
  transform: translateX(0);
}

/* Drawer handle — vertical tab at the left edge, text reads downward (base against drawer) */
.gallery-drawer-handle {
  position: fixed;
  bottom: 33%;
  left: 0;
  z-index: 201;
  writing-mode: vertical-rl;
  background: var(--clr-bg-2, rgba(255,255,255,0.06));
  border: 1px solid var(--clr-border, rgba(255,255,255,0.12));
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 18px 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: left 0.22s ease, background 0.15s;
}
.gallery-drawer-handle:hover {
  background: var(--clr-bg-3, rgba(255,255,255,0.1));
}
.gallery-drawer-handle__label {
  color: var(--tblr-warning, #f59f00);
  font-weight: 600;
  letter-spacing: 0.05em;
}
/* Shift handle right when drawer is open */
.gallery-drawer-handle--open {
  left: 180px;
}
.gallery-rail__pinned { display: flex; flex-direction: column; gap: 2px; }
.gallery-rail__pin {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px; border-radius: 6px;
  background: transparent; border: 0; color: inherit;
  font: inherit; cursor: pointer;
}
.gallery-rail__pin:hover { background: var(--clr-bg-2, rgba(255,255,255,0.04)); }
.gallery-rail__pin.is-active { background: var(--clr-primary, #3b82f6); color: #fff; }
.gallery-rail__section { margin-top: 18px; }
.gallery-rail__heading {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0.55; padding: 0 10px 6px;
}

/* Tutorials section in the folder drawer */
.gallery-rail__tutorials {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--clr-border, rgba(255,255,255,0.08));
}
.gallery-rail__tutorials-heading {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.55;
  padding: 0 8px 6px;
}
.gallery-rail__tutorial {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 6px;
  font-size: 12px; line-height: 1.25;
  text-decoration: none; color: inherit;
  transition: background 0.12s, color 0.12s;
}
.gallery-rail__tutorial:hover {
  background: var(--clr-bg-2, rgba(255,255,255,0.05));
  color: var(--tblr-warning, #f59f00);
  text-decoration: none;
}
.gallery-rail__tutorial img { opacity: 0.7; flex-shrink: 0; }
.gallery-rail__tutorial:hover img { opacity: 1; }

/* Feedback footer pinned to bottom of drawer */
.gallery-rail__footer {
  margin-top: auto;
  padding: 12px 8px 4px;
  border-top: 1px solid var(--clr-border, rgba(255,255,255,0.08));
}
.gallery-rail__feedback {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 6px;
  font-size: 12px; line-height: 1.25;
  text-decoration: none; color: inherit;
  opacity: 0.6;
  transition: background 0.12s, opacity 0.12s, color 0.12s;
}
.gallery-rail__feedback:hover {
  background: var(--clr-bg-2, rgba(255,255,255,0.05));
  opacity: 1;
  color: var(--tblr-warning, #f59f00);
  text-decoration: none;
}

/* ── Folder tree ─────────────────────────────────────────────────────── */
.folder-tree { position: relative; flex: 1 1 auto; }
.folder-tree--loading { opacity: 0.5; }
.folder-tree__list { list-style: none; margin: 0; padding: 0; }
.folder-tree__empty, .folder-tree__error {
  font-size: 12px; opacity: 0.6; padding: 6px 10px;
}

.folder-node { list-style: none; }
.folder-node__row {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 0; border-radius: 6px; cursor: pointer;
  transition: background-color 0.12s;
}
.folder-node__row:hover { background: var(--clr-bg-2, rgba(255,255,255,0.04)); }
.folder-node.is-active > .folder-node__row { background: var(--clr-primary, #3b82f6); color: #fff; }
.folder-node__row.is-drop-target {
  outline: 2px solid var(--clr-primary, #3b82f6);
  outline-offset: -2px;
}
.folder-node__twisty {
  width: 16px; height: 16px; flex: 0 0 16px;
  background: transparent; border: 0; padding: 0; color: inherit;
  font-size: 10px; line-height: 1; cursor: pointer; opacity: 0.7;
}
.folder-node__twisty:disabled { cursor: default; opacity: 0.3; }
.folder-node__twisty .tw--leaf::before { content: '·'; opacity: 0.35; }
.folder-node__label {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folder-node__count {
  font-size: 10px; opacity: 0.55; padding: 0 4px;
}
.folder-node__kebab {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  opacity: 0; padding: 0 4px; font-size: 14px; line-height: 1;
  transition: opacity 0.12s;
}
.folder-node__row:hover .folder-node__kebab { opacity: 0.8; }
.folder-node__kebab:hover { opacity: 1; }

/* ── Sections (yours / shared / public) ─────────────────────────────── */
.folder-section + .folder-section { margin-top: 14px; }
.folder-section__header {
  display: flex; align-items: center;
  padding: 0 4px 4px 0;
}
.folder-section__toggle {
  flex: 1 1 auto; display: flex; align-items: center; gap: 6px;
  min-width: 0; text-align: left;
  background: transparent; border: 0; color: inherit;
  padding: 4px 4px 2px 8px; cursor: pointer;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0.55;
}
.folder-section__toggle:hover { opacity: 0.85; }
.folder-section__caret { font-size: 10px; line-height: 1; opacity: 0.8; width: 10px; flex-shrink: 0; }
.folder-section__title { font-weight: 600; }
.folder-section__add {
  flex: 0 0 auto;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  padding: 2px 6px; border-radius: 4px;
  font-size: 16px; line-height: 1; opacity: 0.4;
  transition: opacity 0.12s, background 0.12s;
}
.folder-section__add:hover { opacity: 1; background: var(--clr-bg-2, rgba(255,255,255,0.06)); }

/* Virtual row (Home / Favorites / References / Global) */
.folder-node--virtual .folder-node__icon {
  flex: 0 0 16px; text-align: center; opacity: 0.7; font-size: 13px;
}
.folder-node__role {
  font-size: 11px; opacity: 0.55; padding: 0 2px;
}
.folder-node.is-active > .folder-node__row .folder-node__role,
.folder-node.is-active > .folder-node__row .folder-node__count { opacity: 0.9; }

/* Move picker — slightly wider, indented entries */
.folder-context-menu--move { min-width: 220px; max-height: 60vh; overflow-y: auto; }
.folder-context-menu__hint {
  padding: 8px 10px; font-size: 12px; opacity: 0.6;
}

/* ── Folder context menu ─────────────────────────────────────────────── */
.folder-context-menu {
  min-width: 180px; z-index: 10050;
  background: var(--clr-bg-1, #1f2128); color: var(--clr-fg, #e7e9ef);
  border: 1px solid var(--clr-border, rgba(255,255,255,0.12));
  border-radius: 8px; padding: 4px; font-size: 13px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.folder-context-menu__item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: inherit;
  padding: 7px 10px; border-radius: 4px; cursor: pointer; font: inherit;
}
.folder-context-menu__item:hover:not(:disabled) { background: var(--clr-bg-2, rgba(255,255,255,0.06)); }
.folder-context-menu__item:disabled { opacity: 0.35; cursor: default; }
.folder-context-menu__item.is-danger { color: #f87171; }

/* ── Folder share modal ──────────────────────────────────────────────── */
.folder-share-modal {
  position: fixed; inset: 0; z-index: 10060;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.folder-share-modal__panel {
  width: 480px; max-width: 94vw; max-height: 82vh; overflow: auto;
  background: var(--clr-bg-1, #1f2128); color: var(--clr-fg, #e7e9ef);
  border: 1px solid var(--clr-border, rgba(255,255,255,0.1));
  border-radius: 10px; padding: 18px; font-size: 13px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.folder-share-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.folder-share-modal__title { margin: 0; font-size: 15px; font-weight: 600; }
.folder-share-modal__close {
  background: transparent; border: 0; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.folder-share-modal__add {
  display: flex; gap: 6px; margin-bottom: 12px; position: relative;
}
.folder-share-modal__input-wrap {
  flex: 1 1 auto; position: relative;
}
.folder-share-modal__input {
  width: 100%; font: inherit; padding: 6px 8px;
  background: var(--clr-bg-2, #2a2d36); color: inherit;
  border: 1px solid var(--clr-border, rgba(255,255,255,0.12));
  border-radius: 6px;
}
/* Email autocomplete dropdown */
.share-autocomplete {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10100;
  margin: 2px 0 0;
  background: var(--clr-bg-1, #1f2128);
  border: 1px solid var(--clr-border, rgba(255,255,255,0.15));
  border-radius: 6px;
  list-style: none; padding: 4px 0; margin-top: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: 200px; overflow-y: auto;
}
.share-autocomplete li {
  padding: 7px 10px; cursor: pointer; font-size: 13px; line-height: 1.3;
}
.share-autocomplete li:hover,
.share-autocomplete li.is-focused {
  background: var(--clr-bg-2, rgba(255,255,255,0.07));
}
.share-autocomplete__name { font-weight: 500; }
.share-autocomplete__email { font-size: 11px; opacity: 0.6; }
.folder-share-modal__role {
  font: inherit; padding: 6px 8px;
  background: var(--clr-bg-2, #2a2d36); color: inherit;
  border: 1px solid var(--clr-border, rgba(255,255,255,0.12));
  border-radius: 6px;
}
.folder-share-modal__add-btn {
  font: inherit; padding: 6px 12px; cursor: pointer;
  background: var(--clr-primary, #3b82f6); color: #fff; border: 0;
  border-radius: 6px;
}
.folder-share-modal__list { display: flex; flex-direction: column; gap: 4px; }
.folder-share-modal__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  background: var(--clr-bg-2, rgba(255,255,255,0.04));
}
.folder-share-modal__who { flex: 1 1 auto; min-width: 0; }
.folder-share-modal__name { font-weight: 500; }
.folder-share-modal__email { font-size: 11px; opacity: 0.55; }
.folder-share-modal__remove {
  background: transparent; border: 0; color: #f87171;
  font: inherit; cursor: pointer;
}
.folder-share-modal__empty, .folder-share-modal__loading, .folder-share-modal__error {
  padding: 12px 10px; text-align: center; opacity: 0.7;
}
.folder-share-modal__error { color: #f87171; }
.tool-grid  {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
@media (max-width: 820px) { .tool-grid { grid-template-columns: 1fr; } }

/* ── Layout helpers ─────────────────────────────────────────────────── */
.row2  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.adv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adv-row label { font-size: 12px; color: color-mix(in srgb, var(--clr-text) 55%, transparent); }
.adv-row select, .adv-row input { display: block; margin-top: 4px; width: 100%; }

.section-sep {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--clr-text) 50%, transparent);
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--clr-text) 10%, transparent);
}

/* ── Square slot grid (character gen) ──────────────────────────────── */
.slot-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.img-slot {
  width: 112px; height: 112px; border-radius: 8px; overflow: hidden; position: relative;
  border: 2px dashed color-mix(in srgb, var(--clr-text) 25%, transparent);
  display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start;
  cursor: pointer; background: var(--clr-bg-2);
  transition: border-color 0.2s, background-color 0.2s;
}
.img-slot:hover  { border-color: var(--clr-primary); background-color: color-mix(in srgb, var(--clr-primary) 5%, transparent); }
.img-slot.filled { border-style: solid; border-color: color-mix(in srgb, var(--clr-primary) 40%, transparent); }
/* When strength bar is present, the tile grows so the image stays square. */
.img-slot.has-strength { width: 136px; }
.img-slot .slot-body {
  position: relative;
  width: 112px; height: 100%; flex: 0 0 112px;
  overflow: hidden;
}
.img-slot .slot-body img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-slot.empty { justify-content: center; align-items: center; }
.img-slot.empty {
  border: 1px dashed color-mix(in srgb, var(--clr-text) 25%, transparent);
  flex-direction: column; color: color-mix(in srgb, var(--clr-text) 40%, transparent);
  background: var(--clr-bg-2); gap: 4px;
}
.img-slot.empty:hover, .img-slot.empty.dv {
  border-color: var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 7%, transparent);
  color: var(--clr-primary);
}
.slot-badge {
  position: absolute; bottom: 3px; left: 3px;
  background: var(--clr-primary); color: #fff;
  font-size: 9px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.slot-index {
  position: absolute; top: 4px; left: 4px;
  background: color-mix(in srgb, var(--clr-bg) 75%, transparent); color: var(--clr-text);
  font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 4px;
  z-index: 2; pointer-events: none; user-select: none;
  backdrop-filter: blur(4px);
}
.slot-icon  { font-size: 20px; font-weight: 300; line-height: 1; }
.slot-label { font-size: 10px; font-weight: 500; letter-spacing: 0.04em; }
/* ── Shared overlay icon style (remove + analyze + replace) — always readable ─── */
.slot-rm,
.slot-analyze,
.slot-replace,
.slot-inject {
  position: absolute; top: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 22, 28, 0.72);
  color: #fff;
  padding: 0; z-index: 4; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.85;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: opacity 0.15s, background 0.15s, color 0.15s, transform 0.12s;
}
.slot-rm      { right: 4px; }
.slot-analyze { right: 30px; }
.slot-replace { right: 56px; }
.slot-inject  { left: 4px; }
.slot-label-overlay {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  z-index: 3; padding: 2px 6px; border-radius: 4px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 10px; font-weight: 600; white-space: nowrap;
  pointer-events: none;
}

.img-slot.filled:hover .slot-rm,
.img-slot.filled:hover .slot-analyze,
.img-slot.filled:hover .slot-replace,
.img-slot.filled:hover .slot-inject { opacity: 1; }

.slot-rm:hover {
  background: var(--clr-danger); color: #fff; transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.5);
}
.slot-analyze:hover,
.slot-replace:hover,
.slot-inject:hover {
  background: var(--clr-primary); color: #fff; transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.5);
}
.slot-analyze.is-busy {
  opacity: 1; animation: slot-analyze-pulse 1s ease-in-out infinite;
}
@keyframes slot-analyze-pulse {
  0%, 100% { background: var(--clr-primary); color: #fff; }
  50%      { background: rgba(20, 22, 28, 0.72); color: #fff; }
}

/* Library-sourced badge (star indicator on URL-based slots) */
.slot-lib-badge {
  position: absolute; top: 4px; left: 28px;
  font-size: 11px; line-height: 1; color: var(--clr-warning, #f5a623);
  text-shadow: 0 0 3px rgba(0,0,0,.8);
  pointer-events: none; z-index: 2;
}

/* ── Reference strength dots (dot row below image) ──────────────── */
.img-slot.has-strength {
  width: 112px;
  height: auto;
  flex-direction: column;
}
.img-slot.has-strength .slot-body {
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
}
.slot-strength {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 7px;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid color-mix(in srgb, var(--clr-text) 12%, transparent);
}
.slot-str-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}
.slot-str-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0; flex-shrink: 0;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.slot-str-dot:hover { transform: scale(1.35); }
.slot-str-dot.filled {
  background: var(--clr-primary);
  box-shadow: 0 0 5px rgba(124,106,247,0.55);
}
.slot-str-dot.dim { background: rgba(255,255,255,0.15); }
.slot-str-label {
  margin-left: auto;
  font-size: 9px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--clr-text) 50%, transparent);
  text-align: right;
}

/* ── Reusable source-image widget (refine / removebg / upscale / vectorize) */
.source-image-wrap { position: relative; }
.source-image-wrap .source-image-overlay {
  position: absolute; top: 8px; right: 8px;
  z-index: 4;
  display: flex; gap: 6px;
  background: color-mix(in srgb, var(--clr-bg) 60%, transparent);
  border-radius: 6px;
  padding: 3px;
  backdrop-filter: blur(4px);
}
.source-size-hint  { margin: 4px 0 0; font-size: 11px; }
.source-size-error { margin: 2px 0 0; font-size: 11px; }
.ref-size-hint     { margin: 4px 0 0; font-size: 11px; }
.ref-size-error    { margin: 2px 0 0; font-size: 11px; }

/* ── Reusable reference-image row: tiles + icons on the same row ──── */
.ref-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 6px;
}
.ref-row > .slot-grid {
  flex: 1 1 auto; min-width: 0;
}
.ref-row > .ref-tile-header {
  flex: 0 0 auto; margin-left: auto;
}
.ref-tile-header {
  display: flex; align-items: center; gap: 6px;
}
.ref-tile-header .ref-analyze-all.is-busy {
  animation: slot-analyze-pulse 1s ease-in-out infinite;
  color: #fff; border-radius: 4px;
}

/* ── Single-file drop zone (initDropZone) ──────────────────────────── */
.dz-single {
  width: 100%; height: 180px; border-radius: 8px; overflow: hidden; position: relative;
  border: 2px dashed color-mix(in srgb, var(--clr-text) 25%, transparent);
  background: var(--clr-bg-2);
  transition: border-color 0.15s, background 0.15s;
}
.dz-single.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; text-align: center; padding: 16px;
}
.dz-single.empty:hover,
.dz-single.empty.dv {
  border-color: var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 5%, transparent);
}
.dz-single.filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--clr-primary) 40%, transparent);
}
.dz-single.filled img { width: 100%; height: 100%; object-fit: contain; }
.dz-single:hover .slot-rm { opacity: 1; }
.dz-single.is-busy { cursor: wait; }
.dz-single.is-busy img { opacity: 0.45; }
.dz-busy-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.25); border-radius: 6px; pointer-events: none;
}
.dz-hint { font-size: 13px; color: var(--clr-text); }
.dz-sub  { font-size: 11px; color: color-mix(in srgb, var(--clr-text) 45%, transparent); }

/* ── Upload zone with indexed tiles (initUploadZone) ────────────────── */
.upload-zone {
  border: 1px dashed color-mix(in srgb, var(--clr-text) 20%, transparent);
  border-radius: 10px; text-align: center;
  color: color-mix(in srgb, var(--clr-text) 50%, transparent);
  font-size: 12px; transition: border-color 0.15s, background 0.15s; position: relative;
}
.uz-drop-target { padding: 14px; cursor: pointer; position: relative; }
.uz-drop-target:hover { border-radius: 10px; background: color-mix(in srgb, var(--clr-primary) 4%, transparent); }
.upload-zone.has-files .uz-drop-target { padding: 10px 14px; }
.upload-zone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%; padding: 0; border: none; background: none; z-index: 1;
}
.upload-zone:has(.uz-tiles:not(:empty)) {
  border-style: solid; border-color: color-mix(in srgb, var(--clr-text) 15%, transparent);
}
.upload-zone p { pointer-events: none; }
.uz-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; padding: 10px; padding-top: 0;
}
.uz-tile {
  background: var(--clr-bg);
  border: 1px solid color-mix(in srgb, var(--clr-text) 12%, transparent);
  border-radius: 10px; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.uz-tile-img-wrap { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; }
.uz-tile-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uz-index {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--clr-primary); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.uz-remove {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--clr-bg) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--clr-text) 15%, transparent);
  color: var(--clr-text); font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; padding: 0;
}
.uz-remove:hover { background: var(--clr-danger); border-color: var(--clr-danger); color: #fff; }
.uz-label-input {
  width: 100%; background: transparent; border: none;
  border-top: 1px solid color-mix(in srgb, var(--clr-text) 10%, transparent);
  color: var(--clr-text); font: inherit; font-size: 11px; padding: 5px 7px;
  outline: none; transition: background 0.15s;
}
.uz-label-input:focus { background: color-mix(in srgb, var(--clr-primary) 7%, transparent); }
.uz-label-input::placeholder { color: color-mix(in srgb, var(--clr-text) 30%, transparent); }

/* ── Unified image tile ─────────────────────────────────────────────── */
.image-tile {
  position: relative; overflow: hidden; border-radius: 0.5rem;
  background: var(--clr-bg-2); cursor: pointer; aspect-ratio: 1;
}
.tile-img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s;
}
.image-tile:hover .tile-img { transform: scale(1.03); }
/* Fold drag state — dims the tile so the ghost image stays prominent. */
.image-tile.is-dragging { opacity: 0.55; }
.tile-video-badge {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tile-video-badge svg,
.tile-video-badge img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
  opacity: 0.85;
  /* 3× the original 28px inline size */
  width: 84px !important;
  height: 84px !important;
}
.image-tile:hover .tile-video-badge svg,
.image-tile:hover .tile-video-badge img { opacity: 1; }
/* Asset picker tiles get a proportionally smaller badge (22px → ~50px) */
.asset-picker-thumb .tile-video-badge svg,
.asset-picker-thumb .tile-video-badge img {
  width: 50px !important;
  height: 50px !important;
}
.asset-picker-thumb:hover .tile-video-badge img { opacity: 1; }

.tile-svg-badge {
  position: absolute; bottom: 6px; left: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  pointer-events: none;
}
.tile-svg-badge img {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.image-tile:hover .tile-svg-badge img { opacity: 1; }

.tile-meta-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 1;
}

/* Reusable checkered background for images with an alpha channel.
 * Applied anywhere a transparent cutout would otherwise sit on a flat
 * surface and be indistinguishable from a gray-backgrounded opaque image.
 * Consumers opt in by adding the class or by tagging the wrapper with
 * ``data-has-alpha="true"`` — both the image-tile gallery and the
 * Settings reference-collection-manager honor this. */
.alpha-checker,
.image-tile[data-has-alpha="true"],
[data-has-alpha="true"] .tile-img {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #d0d0d0 25%, transparent 25%),
    linear-gradient(-45deg, #d0d0d0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d0d0d0 75%),
    linear-gradient(-45deg, transparent 75%, #d0d0d0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.image-tile[data-has-alpha="true"] .tile-img {
  /* Contain instead of cover so cutouts aren't cropped against the
   * checkered backdrop — users usually want to see the whole shape. */
  object-fit: contain;
}
.tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--clr-bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--clr-bg) 15%, transparent) 55%,
    transparent 100%);
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.image-tile:hover .tile-overlay { opacity: 1; pointer-events: auto; }
.tile-top-bar {
  position: absolute; top: 0.375rem; right: 0.375rem;
  display: flex; align-items: center; gap: 0.25rem;
}
.tile-top-bar--even {
  position: absolute; top: 0.375rem; left: 0.375rem; right: 0.375rem;
  display: flex; align-items: center; justify-content: space-evenly;
}
/* tile-bottom-bar retained for any external usage; menu replaces it for actions */
.tile-bottom-bar {
  position: absolute; bottom: 0.375rem; left: 0.375rem; right: 0.375rem;
  display: flex; align-items: center; gap: 0.25rem;
}
.tile-spacer { flex: 1; }
.tile-bottom-bar--even { justify-content: space-evenly; }

/* ── Action menu ────────────────────────────────────────────────────── */
.tile-menu-wrap {
  position: absolute; bottom: 0.375rem; right: 0.375rem;
}
.tile-menu-dropdown {
  /* position:fixed and coords set in JS (portal — escapes overflow:hidden) */
  background: var(--clr-bg-3);
  border: 1px solid color-mix(in srgb, var(--clr-text) 10%, transparent);
  border-radius: 8px;
  min-width: 160px;
  padding: 3px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  z-index: 10000;
}
.tile-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px;
  background: none; border: none;
  font: inherit; font-size: 12px; color: color-mix(in srgb, var(--clr-text) 80%, transparent);
  cursor: pointer; text-align: left; white-space: nowrap; user-select: none;
}
.tile-menu-item:hover {
  background: color-mix(in srgb, var(--clr-text) 8%, transparent);
  color: var(--clr-text);
}
.tile-menu-item--danger:hover {
  background: rgba(220, 38, 38, 0.15); color: #f87171;
}
.tile-menu-item-icon {
  display: inline-flex; align-items: center; flex-shrink: 0; opacity: 0.65;
}
.tile-menu-divider {
  height: 1px; background: color-mix(in srgb, var(--clr-text) 10%, transparent); margin: 3px 0;
}

.tile-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.78); color: rgba(245,245,245,.92);
  box-shadow: 0 1px 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
  cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  text-decoration: none; flex-shrink: 0;
}
.tile-btn:hover:not(:disabled) {
  background: rgba(0,0,0,.92); color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.15);
}
.tile-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.tile-btn-danger:hover { color: var(--clr-danger); }

/* ── Detail panel image overlay ───────────────────────────────────────
   Reuses the tile overlay inside the image-inspection panel. The hover
   gating from .image-tile doesn't apply here — the user already opened
   the preview, so the action affordances are always visible. Drops
   the gradient backdrop so the preview image isn't darkened. */
.detail-image-overlay {
  opacity: 1;
  pointer-events: none;
  background: none;
}
.detail-image-overlay .tile-top-bar,
.detail-image-overlay .tile-menu-wrap {
  pointer-events: auto;
}
.tile-favorited { color: var(--clr-warning, #f5a623); }
.tile-badge { position: absolute; bottom: 0.375rem; left: 0.375rem; pointer-events: none; z-index: 1; }
.tile-icon { display: block; width: 26px; height: 26px; }
img.icon    { width: 28px; height: 28px; }
img.icon-sm { width: 20px; height: 20px; }

/* ── Privacy toggle (header bar) ───────────────────────────────────── */
.privacy-toggle-wrap {
  margin-left: auto; margin-right: auto;
  flex-shrink: 0;
}
.privacy-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px; border: none;
  background: color-mix(in srgb, var(--clr-text) 8%, transparent);
  color: color-mix(in srgb, var(--clr-text) 60%, transparent);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.privacy-toggle:hover {
  background: color-mix(in srgb, var(--clr-text) 14%, transparent);
  color: var(--clr-text);
}
.privacy-toggle.is-private {
  background: color-mix(in srgb, var(--clr-warning) 18%, transparent);
  color: var(--clr-warning);
}
.privacy-toggle-icon { display: block; width: 16px; height: 16px; opacity: 0.7; }
.privacy-toggle.is-private .privacy-toggle-icon { opacity: 1; }
.privacy-toggle-label { line-height: 1; }

/* ── Owner sash (top-left corner of tile) ──────────────────────────── */
.tile-owner-sash {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85);
  pointer-events: none; line-height: 1;
}
.tile-owner-sash .sash-eye { width: 16px; height: 16px; display: block; }
.tile-owner-sash.is-private {
  color: var(--clr-warning);
}
.tile-owner-sash.is-hidden {
  color: var(--clr-muted);
}

/* ── Lock badge for character sheet assets ────────────────────────── */
.tile-lock-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  color: rgba(255,255,255,0.7);
  pointer-events: none;
}

/* ── Danger-styled tile button ────────────────────────────────────── */
.tile-btn--danger { color: var(--clr-danger, #e55); }
.tile-btn--danger:hover { color: #fff; background: var(--clr-danger, #e55); }

/* ── Tile selection checkbox ───────────────────────────────────────── */
.tile-select-cb {
  position: absolute; bottom: 30px; left: 8px; z-index: 3;
  width: 20px; height: 20px; margin: 0; cursor: pointer;
  accent-color: var(--clr-primary, #6366f1);
  opacity: 0; transition: opacity 0.15s;
  pointer-events: auto;
}
.image-tile:hover .tile-select-cb,
.image-tile.is-selected .tile-select-cb,
#gallery-grid.has-selection .tile-select-cb {
  opacity: 1;
}

/* Brand gallery drag-and-drop upload zone */
#gallery-grid.gallery-grid-dragover {
  outline: 2px dashed var(--clr-primary, #206bc4);
  outline-offset: -4px;
  background: color-mix(in srgb, var(--clr-primary, #206bc4) 6%, transparent);
  border-radius: 8px;
  min-height: 200px;
}
.gallery-section-header {
  grid-column: 1 / -1;
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--tblr-secondary, #626976);
  padding: 0.75rem 0 0.25rem; border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  margin-bottom: 0.25rem;
}
.image-tile.is-selected {
  outline: 3px solid var(--clr-primary, #6366f1);
  outline-offset: -3px;
}
.image-tile.is-selected .tile-img { opacity: 0.8; }

/* ── Batch action bar ─────────────────────────────────────────────── */
/* ── Gallery filter bar ───────────────────────────────────────────── */
.gallery-filter-bar {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
  flex-wrap: nowrap; width: 100%;
}
.gallery-filter-right {
  display: flex; align-items: center; gap: 0.5rem;
  flex-shrink: 0; margin-left: auto;
}
.gallery-search { width: 160px; }
.gallery-filter-select { width: auto; flex-shrink: 0; }

/* ── Gallery scope tabs (segmented) ──────────────────────────────── */
.gallery-scope-toggle {
  display: inline-flex; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--tblr-border-color, rgba(98,105,118,.24));
  background: var(--tblr-bg-surface, #fff);
}
.gallery-scope-btn {
  padding: 5px 14px; font-size: 13px; font-weight: 500; line-height: 1.4;
  border: none; background: transparent; cursor: pointer;
  color: var(--tblr-secondary, #626976); transition: all 0.15s;
  white-space: nowrap;
}
.gallery-scope-btn:hover:not(.is-active) {
  background: var(--tblr-bg-surface-secondary, rgba(98,105,118,.06));
}
.gallery-scope-btn.is-active {
  background: var(--tblr-primary, #0054a6); color: #fff;
}
.gallery-scope-btn--admin {
  border-left: 1px dashed var(--clr-warning); color: var(--clr-warning);
}
.gallery-scope-btn--admin.is-active {
  background: var(--clr-warning); color: var(--tblr-bg-surface, #fff);
}

/* Gallery upload bar (shown on References / Brand tabs) */
.gallery-upload-bar-wrap {
  display: inline-flex; align-items: center; gap: 6px;
}
.gallery-upload-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 500;
  background: var(--clr-primary); color: #fff; cursor: pointer; border: none;
  white-space: nowrap;
}
.gallery-upload-btn:hover { opacity: 0.9; }

.batch-bar {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 1rem;
  background: var(--clr-bg-3, #1e1e2e);
  border: 1px solid color-mix(in srgb, var(--clr-text) 12%, transparent);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  animation: batch-bar-in 0.2s ease-out;
}
.batch-bar.hidden { display: none; }
@keyframes batch-bar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.batch-bar-count {
  font-size: 13px; font-weight: 600;
  color: var(--clr-primary, #6366f1);
  white-space: nowrap; padding: 0 0.5rem;
}
.batch-bar-actions { display: flex; gap: 0.25rem; }
.batch-bar .btn { gap: 0.35rem; font-size: 13px; }

/* ── Result tile wrapper ────────────────────────────────────────────── */
.result-tile-wrap { display: grid; gap: 8px; width: 100%; grid-template-columns: 1fr; }
.result-tile-wrap[data-count="2"] { grid-template-columns: 1fr 1fr; }
.result-tile-wrap[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.result-tile-wrap[data-count="4"] { grid-template-columns: 1fr 1fr; }
.result-tile-wrap .image-tile { aspect-ratio: auto; min-height: 0; }
.result-tile-wrap .image-tile .tile-img { object-fit: contain; height: auto; }

/* ── Generation states ──────────────────────────────────────────────── */
.gen-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 200px; border: 1px dashed color-mix(in srgb, var(--clr-text) 15%, transparent);
  border-radius: 10px; color: color-mix(in srgb, var(--clr-text) 40%, transparent); font-size: 13px;
  padding: 24px 16px;
}
.gen-placeholder__img {
  width: 100%; border-radius: 8px; object-fit: contain; opacity: 0.55;
  pointer-events: none; user-select: none;
}
.gen-placeholder:has(.gen-placeholder__img) {
  border: none; padding: 0; gap: 8px;
}
.gen-placeholder__text { text-align: center; }
.gen-spinner-wrap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 200px; gap: 14px;
  color: color-mix(in srgb, var(--clr-text) 50%, transparent); font-size: 13px;
}

/* ── Session-history bottom drawer ─────────────────────────────────── */
#main-content { transition: bottom 0.22s ease; }

.history-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--clr-bg-1, #16181d);
  border-top: 1px solid var(--clr-border, rgba(255,255,255,0.08));
  flex-direction: column;
  max-height: 50vh;
  overflow: visible;
}

/* Edge tab — horizontal, positioned 1/3 from left */
.history-drawer-tab {
  position: absolute;
  top: 0; left: 33%;
  transform: translateY(-100%);
  z-index: 201;
  display: inline-flex;
  align-items: center;
  background: var(--clr-bg-2, rgba(255,255,255,0.06));
  border: 1px solid var(--clr-border, rgba(255,255,255,0.12));
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  white-space: nowrap;
  user-select: none;
}
.history-drawer-tab__toggle {
  background: none; border: none; padding: 6px 14px 6px 18px;
  cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center;
}
.history-drawer-tab__toggle:hover {
  background: var(--clr-bg-3, rgba(255,255,255,0.1));
  border-radius: 6px 0 0 0;
}
.history-drawer-tab__label {
  color: var(--tblr-warning, #f59f00);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.history-drawer-tab__sep {
  width: 1px; align-self: stretch; margin: 6px 0;
  background: var(--clr-border, rgba(255,255,255,0.12));
  flex-shrink: 0;
}
.history-drawer-tab__clear {
  background: none; border: none;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--clr-text) 35%, transparent);
  transition: color 0.15s;
  border-radius: 0 6px 0 0;
}
.history-drawer-tab__clear:hover {
  color: var(--clr-text);
  background: var(--clr-bg-3, rgba(255,255,255,0.1));
}

.history-drawer-body {
  padding: 0 16px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.22s ease, opacity 0.15s ease, padding 0.22s ease;
}
.history-drawer--open .history-drawer-body {
  padding: 12px 16px;
  overflow-y: auto;
  max-height: 50vh;
  opacity: 1;
}

.history-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

.history-thumb {
  width: 100%; aspect-ratio: 1; border-radius: 0.5rem;
  overflow: hidden; cursor: pointer;
  transition: transform 0.15s; border: 2px solid transparent;
}
.history-thumb:hover { transform: scale(1.03); border-color: color-mix(in srgb, var(--clr-primary) 60%, transparent); }
.history-thumb-count {
  position: absolute; bottom: 3px; right: 3px;
  background: color-mix(in srgb, var(--clr-bg) 80%, transparent); color: var(--clr-text);
  font-size: 9px; font-weight: 700; padding: 2px 4px; border-radius: 3px;
}

@media (max-width: 640px) {
  .history-drawer-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* ── Action header (custom properties only — layout via Bootstrap utilities) ── */
.action-header-label {
  margin: 0; font-size: 1.1em; font-weight: 400;
  color: var(--clr-text-muted, #6c757d);
}
.action-header-icon {
  background: none; border: none; padding: 2px; cursor: pointer;
  opacity: 0.45; transition: opacity 0.15s;
  display: inline-flex; align-items: center; border-radius: 4px;
  color: inherit; line-height: 0;
}
.action-header-icon:hover   { opacity: 1; }
.action-header-icon:disabled { opacity: 0.2; cursor: not-allowed; }
.action-header-icon img { display: block; }
/* Per-icon size overrides */
.action-header-icon.enhance-btn img { width: 30px; height: 30px; }
#analyze-btn img { width: 30px; height: 30px; }

.tutorial-link {
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; font-size: 13px; font-weight: 500;
  color: color-mix(in srgb, var(--tblr-warning, #f59f00) 75%, transparent);
  opacity: 0.85; transition: opacity 0.15s, color 0.15s;
}
.tutorial-link:hover { opacity: 1; color: var(--tblr-warning, #f59f00); text-decoration: none; }
.tutorial-link img { display: block; opacity: 0.75; }
.tutorial-link:hover img { opacity: 1; }

/* ── Feedback animations for async icon actions ────────────────────── */
@keyframes ah-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
.action-header-icon.is-busy {
  animation: ah-pulse 1.1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ah-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
textarea.is-shimmer {
  background-image: linear-gradient(
    90deg,
    transparent 30%,
    color-mix(in srgb, var(--clr-primary, #206bc4) 8%, transparent) 50%,
    transparent 70%
  );
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: ah-shimmer 1.6s ease-in-out infinite;
}

/* Action summary (<summary> element) — override browser defaults */
details > summary.action-summary {
  list-style: none; cursor: pointer; user-select: none;
}
details > summary.action-summary::-webkit-details-marker { display: none; }
details > summary.action-summary::marker { display: none; content: ''; }
details > summary.action-summary .action-header-label::before {
  content: '▸'; display: inline-block; margin-right: 6px;
  transition: transform 0.15s; font-size: 30px;
}
details[open] > summary.action-summary .action-header-label::before {
  transform: rotate(90deg);
}
/* Hide icons when section is collapsed; reveal on open */
details > summary.action-summary .action-summary-icons {
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
details[open] > summary.action-summary .action-summary-icons {
  opacity: 1; pointer-events: auto;
}

/* ── Enhance prompt button (legacy overlay — kept for fallback) ────── */
.enhance-btn {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  opacity: 0.45; transition: opacity 0.15s;
  display: inline-flex; align-items: center; border-radius: 4px;
}
.enhance-btn:hover   { opacity: 1; }
.enhance-btn:disabled { opacity: 0.2; cursor: not-allowed; }

.textarea-wrap { position: relative; }
.enhance-overlay {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  padding: 3px;
}

/* ── Gallery / collection ────────────────────────────────────────────── */
.gallery-card { display: block; text-decoration: none; }
.masonry-grid { columns: 5 220px; column-gap: 10px; }
.masonry-grid > * { break-inside: avoid; margin-bottom: 10px; }
@media (max-width: 640px) { .masonry-grid { columns: 2 160px; } }

/* ── Segmented group ────────────────────────────────────────────────── */
.seg-group {
  display: inline-flex; border-radius: 0.5rem; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--clr-text) 20%, transparent);
}
.seg-btn {
  padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 500;
  background: transparent; color: color-mix(in srgb, var(--clr-text) 70%, transparent);
  border: none; border-right: 1px solid color-mix(in srgb, var(--clr-text) 20%, transparent);
  cursor: pointer; transition: background-color 0.15s, color 0.15s; line-height: 1.25;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: color-mix(in srgb, var(--clr-text) 8%, transparent); color: var(--clr-text); }
.seg-btn.active,
.seg-btn[data-active="true"] { background: var(--clr-primary); color: #fff; }

/* ── Asset picker popup (selection-only — CRUD lives in gallery) ────── */
.asset-picker-overlay {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.15s ease-out;
}
.asset-picker {
  width: 900px; max-width: 95vw; height: 70vh; max-height: 90vh;
  background: var(--tblr-bg-surface, #fff); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35); display: flex; flex-direction: column;
  overflow: hidden; animation: slide-up 0.2s ease-out;
  resize: both; min-width: 420px; min-height: 320px;
}
.asset-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.asset-picker-title { font-size: 0.95rem; font-weight: 600; }
.asset-picker-close {
  background: none; border: none; font-size: 1.3rem; cursor: pointer;
  color: var(--tblr-secondary, #626976); line-height: 1; padding: 0 4px;
}
.asset-picker-tabs {
  display: flex; border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.asset-picker-tab {
  padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 500; cursor: pointer;
  color: var(--tblr-secondary, #626976); border: none; background: none;
  border-bottom: 2px solid transparent; transition: all 0.15s;
}
.asset-picker-tab.active { color: var(--tblr-primary, #0054a6); border-bottom-color: var(--tblr-primary, #0054a6); }
.asset-picker-tab:hover:not(.active) { color: var(--tblr-body-color, #1e293b); }
.asset-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 0.5rem;
  padding: 1rem; overflow-y: auto; min-height: 160px; flex: 1;
  align-content: start;
}
.asset-picker-thumb {
  position: relative;
  aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.12s;
  background: var(--tblr-bg-surface-secondary, #f1f5f9);
}
.asset-picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-picker-thumb:hover { border-color: var(--tblr-primary, #0054a6); }
.asset-picker-thumb.selected { border-color: var(--tblr-primary, #0054a6); box-shadow: 0 0 0 1px var(--tblr-primary, #0054a6); }
.asset-picker-footer {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0.75rem 1rem; border-top: 1px solid var(--tblr-border-color, #e6e7e9);
}
.asset-picker-select-btn {
  padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 500;
  background: var(--tblr-primary, #0054a6); border: none; color: #fff; cursor: pointer;
}
.asset-picker-select-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.asset-picker-loading, .asset-picker-empty {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--tblr-secondary, #626976); padding: 2rem 0;
}

.asset-picker-separator {
  grid-column: 1 / -1; border: none;
  border-top: 1px solid var(--tblr-border-color, #e6e7e9);
  margin: 0.25rem 0;
}
.asset-picker-section-heading {
  grid-column: 1 / -1;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--tblr-secondary, #626976);
  padding: 0.25rem 0 0;
}

/* Collapsible per-type groups in the Brand tab. ``.asset-picker-grid``
   becomes the vertical stack; each ``<details>`` holds its own inner grid
   so thumbnail wrapping works inside the section. */
.asset-picker-grid:has(.asset-picker-group) {
  display: block;
}
.asset-picker-group {
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  background: var(--tblr-bg-surface, #fff);
}
.asset-picker-group[open] { padding-bottom: 0.5rem; }
.asset-picker-group > summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
  user-select: none;
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  border-bottom: 1px solid transparent;
}
.asset-picker-group[open] > summary {
  border-bottom-color: var(--tblr-border-color, #e6e7e9);
}
.asset-picker-group > summary::-webkit-details-marker { display: none; }
.asset-picker-group > summary::before {
  content: '▸'; font-size: 0.7rem; color: var(--tblr-secondary, #626976);
  transition: transform 0.15s;
}
.asset-picker-group[open] > summary::before { transform: rotate(90deg); }
.asset-picker-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  align-content: start;
}

/* Asset picker tag badges */
.asset-picker-tags {
  position: absolute; bottom: 2px; left: 2px; right: 2px;
  display: flex; flex-wrap: wrap; gap: 2px;
  pointer-events: none;
}
.asset-picker-tag-badge {
  font-size: 9px; line-height: 1;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(0,0,0,0.55); color: #fff;
  white-space: nowrap;
}

/* Browse Library button — inherits .action-header-icon; just size the SVG */
.browse-library-btn svg { width: 20px; height: 20px; }

/* ── Brand Photo character rows ────────────────────────────────────── */
.bp-char-row {
  padding: 8px 0;
}
.bp-char-row + .bp-char-row {
  border-top: 1px solid rgba(255,255,255,0.08);
}
.bp-char-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.bp-char-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--clr-border);
}
.bp-char-select {
  flex: 1 1 auto; min-width: 0; font-size: 12px;
}

/* ── Prompt mention bar ────────────────────────────────────────────── */
.prompt-mention-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.prompt-mention-hint {
  flex-basis: 100%;
  font-size: 11px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--clr-text) 55%, transparent);
  margin-bottom: 2px;
}
/* ── Mention tiles (scene panel reference bar) ────────────────────── */
.mention-tile {
  position: relative;
  width: 112px; height: 112px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--clr-border);
  background: color-mix(in srgb, var(--clr-bg-3) 70%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.mention-tile:hover {
  border-color: var(--clr-primary);
  background: color-mix(in srgb, var(--clr-primary) 10%, var(--clr-bg-3));
}
.mention-tile.passive { cursor: default; }
.mention-tile-thumb {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0; border-radius: 7px;
}
.mention-tile-label {
  position: relative; z-index: 1;
  padding: 2px 6px; margin-bottom: 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 10px; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.mention-tile-check {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #22c55e; color: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.mention-tile-inject {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(20,22,28,0.72); color: #fff;
  padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  transition: opacity 0.15s, background 0.15s;
}
.mention-tile:hover .mention-tile-inject { opacity: 1; }
.mention-tile-inject:hover { background: var(--clr-primary); }
.bp-char-badge {
  font-weight: 700; font-size: 11px; flex-shrink: 0; white-space: nowrap;
}
input.bp-char-badge-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 2px 6px;
  width: 110px;
  min-width: 90px;
  outline: none;
}
input.bp-char-badge-input:focus {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}
input.bp-char-badge-input[readonly] {
  opacity: 0.7;
  cursor: default;
  background: transparent;
  border-color: transparent;
}
.bp-char-collapse-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(255,255,255,0.5); flex-shrink: 0; line-height: 0;
  transition: color 0.15s;
}
.bp-char-collapse-btn:hover { color: rgba(255,255,255,0.9); }
.bp-char-collapse-btn svg { transition: transform 0.2s; }
.bp-char-collapse-btn.is-collapsed svg { transform: rotate(-90deg); }
.char-spec-details { margin-top: 2px; margin-bottom: 0; }
.subject-refs-section { margin-top: 12px; }
.bp-char-remove {
  cursor: pointer; display: inline-flex; line-height: 0; color: #fff; opacity: 0.5;
  flex-shrink: 0;
}
.bp-char-remove:hover { opacity: 1; }
.bp-char-slots {
  flex: 1 1 auto; min-width: 0;
  /* Horizontal scroll when the tile row doesn't fit — keeps them on one line. */
  overflow-x: auto;
}
.bp-char-slots.slot-grid {
  flex-wrap: nowrap;
}
.bp-char-sheets-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 8px;
}
.bp-char-sheets-row .bp-char-browse {
  flex-shrink: 0; margin-left: auto; align-self: flex-start;
}
.bp-char-divider {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--clr-text) 8%, transparent);
  margin: 4px 0;
}
.bp-char-spec {
  flex: 1; font-size: 12px !important; resize: vertical; min-height: 80px;
}

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE TAB BAR — chevron-shaped process step tabs
   Reused by Brand Photo, Animation, and future feature pages.
   ═══════════════════════════════════════════════════════════════════════ */

.ft-bar {
  display: flex;
  margin: 0 0 16px 0;
  background: color-mix(in srgb, var(--clr-bg-3) 60%, transparent);
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  overflow: hidden;
}

/* Each chevron tab */
.ft-tab {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 8px 10px 7px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--clr-text) 42%, transparent);
  text-align: left;
  transition: background 0.15s, color 0.15s;
  /* Arrow shape — right point, left notch */
  clip-path: polygon(
    0%                0%,
    calc(100% - 10px) 0%,
    100%              50%,
    calc(100% - 10px) 100%,
    0%                100%,
    10px              50%
  );
}

/* First tab: no left notch */
.ft-tab:first-child {
  padding-left: 12px;
  clip-path: polygon(
    0%                0%,
    calc(100% - 10px) 0%,
    100%              50%,
    calc(100% - 10px) 100%,
    0%                100%
  );
}

/* Last tab: no right point */
.ft-tab:last-child {
  clip-path: polygon(
    0%   0%,
    100% 0%,
    100% 100%,
    0%   100%,
    10px 50%
  );
}

/* Single tab (if only one rendered) */
.ft-tab:first-child:last-child {
  clip-path: none;
  padding-left: 12px;
}

.ft-tab:hover:not(.is-active) {
  background: color-mix(in srgb, var(--clr-text) 7%, transparent);
  color: color-mix(in srgb, var(--clr-text) 75%, transparent);
}

.ft-tab.is-active {
  background: color-mix(in srgb, var(--clr-primary) 16%, transparent);
  color: var(--clr-text);
}

/* Active indicator line at bottom */
.ft-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 10px;
  height: 2px;
  background: var(--clr-primary);
  border-radius: 1px 1px 0 0;
}
.ft-tab:first-child.is-active::after { left: 12px; }
.ft-tab:last-child.is-active::after  { right: 0; }

/* Tab label */
.ft-tab-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

/* Summary line — surfaces filled-in values below the tab name */
.ft-tab-summary {
  display: block;
  font-size: 9.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--clr-primary) 75%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 13px;
  margin-top: 1px;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.15s;
}
.ft-tab.has-summary .ft-tab-summary { opacity: 1; }

/* ── Action tab (Generate / Cancel) ──────────────────────────────────── */

.ft-tab-action {
  flex: 0 0 auto;
  min-width: 110px;
  text-align: center;
  font-weight: 600;
  color: #fff;
  background: var(--clr-primary, #6366f1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10px 50%) !important;
}
.ft-tab-action:hover {
  background: color-mix(in srgb, var(--clr-primary) 85%, #000) !important;
  color: #fff !important;
}
.ft-tab-action.is-generating {
  background: var(--tblr-danger, #d63939);
}
.ft-tab-action.is-generating:hover {
  background: color-mix(in srgb, var(--tblr-danger, #d63939) 80%, #000) !important;
}
.ft-tab-action:disabled,
.ft-tab-action.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ft-tab-action .ft-tab-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ── Tab panels ──────────────────────────────────────────────────────── */

.ft-panel {
  display: none;
}

.ft-panel.is-active {
  display: block;
  animation: ft-panel-fade 0.14s ease-out;
}

@keyframes ft-panel-fade {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Optional-tab enable switch (in-tab header) ─────────────────────── */
/* Style and Framing tabs grow a tiny switch inside their tab button.
   Clicking it flips the matching hidden input and toggles
   `.ft-panel--disabled` on the enclosing panel so every control below
   paints muted as a visual cue. Clicking the tab itself still activates
   the panel (so users can tweak settings before re-enabling). */
/* Lay the tab body out as a flex row so the switch sits inline with
   the label. ``.ft-tab-summary`` still wants its own line below, so we
   flex-wrap and force it to 100% so it drops to the second row. */
.ft-tab--with-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;  /* horizontal pad between switch and label */
}
.ft-tab--with-toggle .ft-tab-name {
  display: inline-block;
  flex: 0 0 auto;  /* hug the text so toggle sits right next to label, not at far right */
  min-width: 0;
  order: 1;  /* label first */
}
.ft-tab--with-toggle .ft-tab-toggle {
  order: 2;  /* switch to the right of the label */
  margin-left: 8px;  /* nominal space between label and toggle */
}
.ft-tab--with-toggle .ft-tab-summary {
  flex: 1 1 100%;
  order: 3;  /* drop to a new line under the label + switch row */
}
.ft-tab-toggle {
  display: inline-flex;
  align-items: center;
  width: 26px;
  height: 14px;
  padding: 2px;
  border-radius: 999px;
  background: var(--tblr-success, #2fb344);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease-out;
  flex-shrink: 0;
}
.ft-tab-toggle.is-off {
  background: color-mix(in srgb, var(--clr-text) 28%, transparent);
}
.ft-tab-toggle-knob {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(12px);
  transition: transform 0.15s ease-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.ft-tab-toggle.is-off .ft-tab-toggle-knob {
  transform: translateX(0);
}
.ft-tab-toggle:focus-visible {
  outline: 2px solid var(--tblr-primary, #206bc4);
  outline-offset: 2px;
}

.ft-panel--disabled > * {
  opacity: 0.42;
  pointer-events: none;
  filter: saturate(0.6);
  transition: opacity 0.12s ease-out, filter 0.12s ease-out;
}

/* Top strip — preset + output config above the tab bar */
.bp-top-strip {
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--clr-border) 50%, transparent);
}
.bp-top-strip .adv-row {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRESET PICKER — shared component
   ═══════════════════════════════════════════════════════════════════════ */

.preset-picker__row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.preset-picker__label-inline {
  font-size: 12px;
  color: color-mix(in srgb, var(--clr-text) 65%, transparent);
  white-space: nowrap;
}
.preset-picker__select {
  flex: 1;
  font-size: 12px;
  min-width: 0;
}
.preset-picker__save,
.preset-picker__save-global,
.preset-picker__delete {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
}
.preset-picker--stacked {
  margin-bottom: 10px;
}
.preset-picker--inline {
  padding: 0;
}

/* ── Top-of-form whole-scene preset row (brand photo, etc.) ───────── */
.photo-preset-row {
  padding: 8px 14px;
  border-bottom: 1px solid var(--clr-border);
}

/* ── Right column layout for Brand Photo ─────────────────────────────── */

.bp-result-card {
  min-height: 220px;
}

/* Grid column ratio tweak for complex feature pages */
.tool-pane--bp .tool-grid {
  grid-template-columns: minmax(360px, 1.05fr) minmax(280px, 0.95fr);
}

@media (max-width: 900px) {
  .tool-pane--bp .tool-grid { grid-template-columns: 1fr; }
  .ft-tab { font-size: 10.5px; padding: 7px 8px 6px 16px; }
  .ft-tab:first-child { padding-left: 10px; }
  .ft-tab-summary { display: none; }
}

@media (max-width: 520px) {
  .ft-tab-name { font-size: 10px; }
  .ft-bar { overflow-x: auto; }
}

/* ── Per-panel top bar (Clear button row) ───────────────────────────── */

.bp-panel-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 6px 0;
}
/* ── Admin Full-Prompt drawer (right side, mirror of Scene Brief) ──── */

.prompt-preview {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  width: 340px;
  background: var(--clr-bg-1, #16181d);
  border-left: 1px solid var(--clr-border);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.25s ease, bottom 0.22s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.prompt-preview.pp-drawer-open {
  transform: translateX(0);
}
.prompt-preview.is-admin-hidden {
  display: none;
}

.prompt-preview-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.prompt-preview-eyebrow {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--tblr-warning, #f59f00) 75%, transparent);
  flex-shrink: 0;
}
.prompt-preview-title {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--clr-text) 70%, transparent);
  flex: 1;
}
.prompt-preview-copy-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--clr-border) 70%, transparent);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--clr-text) 50%, transparent);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.prompt-preview-copy-btn:hover {
  color: var(--clr-text);
  border-color: var(--clr-primary);
}
.prompt-preview-toggle {
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--clr-text) 35%, transparent);
  flex-shrink: 0;
  cursor: pointer;
}
.prompt-preview-body {
  padding: 12px 14px 14px;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-border) transparent;
}
.prompt-preview-section {
  margin-bottom: 14px;
}
.prompt-preview-section:last-child {
  margin-bottom: 0;
}
.prompt-preview-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: color-mix(in srgb, var(--clr-primary) 55%, transparent);
  margin-bottom: 5px;
}
.prompt-preview-count {
  color: color-mix(in srgb, var(--clr-text) 40%, transparent);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.prompt-preview-text {
  font-family: var(--tblr-font-monospace, ui-monospace, Consolas, monospace);
  font-size: 11px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--clr-text) 88%, transparent);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--clr-bg-3, rgba(0,0,0,0.18)) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--clr-border) 55%, transparent);
  border-radius: 4px;
}
.prompt-preview-refs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 6px;
}
.prompt-preview-refs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--clr-border) 60%, transparent);
  background: #000;
}

/* Toggle tab on the right edge — text reads upward (base against drawer) */
.prompt-preview-toggle-btn {
  position: fixed;
  bottom: 33%;
  right: 0;
  z-index: 201;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  background: var(--clr-bg-2, rgba(255,255,255,0.06));
  border: 1px solid var(--clr-border, rgba(255,255,255,0.12));
  border-right: none;
  border-radius: 6px 0 0 6px;
  padding: 18px 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: right 0.25s ease, background 0.15s;
}
.prompt-preview-toggle-btn:hover {
  background: var(--clr-bg-3, rgba(255,255,255,0.1));
}
.prompt-preview-toggle-btn.is-active {
  right: 340px;
}
.prompt-preview-toggle-btn.is-admin-hidden {
  display: none;
}
.prompt-preview-toggle-btn .prompt-preview-toggle-label {
  color: var(--tblr-warning, #f59f00);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.prompt-preview-toggle-btn .prompt-preview-toggle-icon { display: none; }

/* Push the tool-pane content left when the right drawer is open so the
   form doesn't slip behind the drawer. Mirrors the left-side push. */
.tool-pane--bp.pp-pushed .tool-wrap {
  margin-right: 340px;
}

@media (max-width: 900px) {
  .prompt-preview { width: 280px; }
  .prompt-preview-toggle-btn.is-active { right: 280px; }
  .tool-pane--bp.pp-pushed .tool-wrap { margin-right: 280px; }
}

@media (max-width: 520px) {
  .prompt-preview { width: 85vw; }
  .prompt-preview-toggle-btn.is-active { right: 85vw; }
  .tool-pane--bp.pp-pushed .tool-wrap { margin-right: 0; }
}

/* History drawer pushes side drawers up */
.gallery-rail.has-history-drawer          { bottom: var(--history-drawer-h, 0px); }
.gallery-drawer-handle.has-history-drawer { margin-bottom: var(--history-drawer-h, 0px); }
.prompt-preview.has-history-drawer        { bottom: var(--history-drawer-h, 0px); }
.prompt-preview-toggle-btn.has-history-drawer { margin-bottom: var(--history-drawer-h, 0px); }

/* ── PreviewSelect — shared styled pulldown with inline thumbnail ──────
   Used by CharacterRows (characters/people) and the preset picker
   (global/style/framing). One visual language across every pulldown in
   the app: thumbnail swatch to the left, native <select> to the right. */
.preview-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.preview-select__thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.preview-select__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.preview-select__select {
  flex: 1 1 auto;
  min-width: 0;
}
.preview-select--sm .preview-select__thumb {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.preview-select.is-disabled {
  opacity: 0.6;
}

/* ── Save-to-library toggle ───────────────────────────────────────── */
.save-to-library-toggle { color: var(--clr-text-muted); }
.save-to-library-toggle.is-active { color: var(--clr-primary); }

/* ── Tile: from-spec banner (character sheet tiles from preset defs) */
.slot-from-spec {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  background: var(--clr-warning, #f76707);
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* ── Tile action menu: legacy notice ─────────────────────────────── */
.tile-menu-legacy-notice {
  padding: 7px 12px;
  font-size: 11px;
  color: var(--tblr-secondary, #626976);
  font-style: italic;
  cursor: default;
  user-select: none;
}