/* ── Asset Library resize handle → uses .splitter.is-v from components.css ── */

/* ── Asset Library ── */
.asset-library{
  background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.asset-library.collapsed{height:37px !important;}
.asset-library.alib-animating{transition:height .25s ease;}
.asset-library.alib-animating .asset-lib-body{overflow:hidden;}
.asset-lib-head{
  gap:6px;padding:0 10px 0 12px;cursor:default;
}
.asset-library.collapsed .asset-lib-head{cursor:pointer;}
.asset-library.collapsed .asset-lib-head .view-toggle{pointer-events:none;}
.asset-lib-chev{
  width:14px;height:14px;color:var(--text-muted);transition:transform .15s;transform:rotate(90deg);
  flex-shrink:0;
}
.asset-library.collapsed .asset-lib-chev{transform:rotate(0);}

/* Studio mode label — hidden by default, shown via studio.css */
.asset-lib-studio-label{
  display:none;
  align-items:center;
  padding:0 14px;
  font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap;line-height:37px;
  margin-left:2px;
}
/* ── Group tabs in header ── */
.asset-group-tabs{
  display:flex;gap:0;margin-left:6px;
}
.asset-group-tab{
  padding:0 14px;font-size:12px;font-weight:600;font-family:inherit;
  text-transform:uppercase;letter-spacing:.5px;height:100%;line-height:37px;
  color:var(--text-muted);border:none;background:none;cursor:pointer;
  transition:var(--tr);
}
.asset-group-tab:hover{color:var(--text);}
.asset-group-tab.active{color:var(--primary);}

/* ── Body: sidebar + main ── */
.asset-lib-body{
  display:flex;flex:1;overflow:hidden;min-height:0;
}

/* ── Vertical sub-category sidebar ── */
.asset-sidebar{
  width:148px;min-width:148px;flex-shrink:0;display:flex;flex-direction:column;gap:0;
  border-right:1px solid var(--border-light);background:var(--bg-inset);overflow-y:auto;
  padding:2px 0;
}
.asset-side-item{
  display:flex;flex-direction:row;align-items:center;gap:6px;
  padding:5px 10px;font-size:11px;font-weight:500;color:var(--text-muted);
  border:none;background:none;cursor:pointer;transition:var(--tr);
  border-left:2px solid transparent;
}
.asset-side-item svg{width:16px;height:16px;flex-shrink:0;}
.asset-side-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asset-side-item:hover{color:var(--text);background:var(--hover);}
.asset-side-item.active:hover{background:color-mix(in srgb, var(--primary) 12%, transparent);}
/* Indent image subcategory items (all img* except imgall itself) */
.asset-side-item[data-group="images"]:not([data-tab="imgall"]){
  padding-left:22px;font-size:10.5px;
}
.asset-side-item.active{
  color:var(--primary);background:color-mix(in srgb, var(--primary) 8%, transparent);
  border-left-color:var(--primary);
}

/* ── Main content pane ── */
.asset-lib-main{
  flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;
}

/* Scrollable content wrapper inside the main pane.
   In normal mode each grid scrolls on its own; in IMAGES mode this
   wrapper becomes the single scroll container so the toolbar stays
   fixed above it. */
.asset-lib-content{
  flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;
}

/* IMAGES > All composite mode: toolbar stays fixed, content wrapper scrolls.
   Each grid expands to its own content height (overflow:visible, height:auto)
   so we get ONE scrollbar instead of one per grid. */
.asset-lib-main.alib-imgall-mode{
  overflow:hidden;
  position:relative;
}
.asset-lib-main.alib-imgall-mode .asset-lib-content{
  overflow-y:auto;overflow-x:hidden;
}
.asset-lib-main.alib-imgall-mode .asset-lib-toolbar{
  position:static;z-index:auto;
  background:var(--surface);
}
.asset-lib-main.alib-imgall-mode .asset-lib-grid{
  flex:none;height:auto;overflow:visible;min-height:0;
  padding-top:8px; /* match other tabs for consistent vertical rhythm */
}
.asset-lib-main.alib-imgall-mode .asset-lib-grid + .asset-lib-grid{
  padding-top:0;
}

/* ── Asset Library Toolbar ── */
.asset-lib-toolbar{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-bottom:1px solid var(--border-light);flex-shrink:0;
}
/* .alib-search base → components.css; only min-width override here */
.alib-search{min-width:80px;}
.alib-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.alib-btn{
  height:26px;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;
  gap:4px;color:var(--text-muted);transition:var(--tr);padding:0 8px;
  font-size:11px;white-space:nowrap;
}
.alib-btn:hover{background:var(--bg);color:var(--text);}
.alib-btn svg{width:14px;height:14px;flex-shrink:0;}
.alib-btn.icon-only{width:26px;padding:0;justify-content:center;}
.alib-btn.primary{background:var(--primary);color:white;border-color:var(--primary);font-size:11.5px;}
.alib-btn.primary:hover{opacity:.85;}
.alib-btn.primary-light{background:var(--primary-bg);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 25%,transparent);font-size:11.5px;}
.alib-btn.primary-light:hover{background:var(--primary-bg-hover);border-color:color-mix(in srgb,var(--primary) 40%,transparent);}
.alib-btn.generate{background:var(--green,#00b894);color:white;border-color:var(--green,#00b894);font-size:11.5px;}
.alib-btn.generate:hover{opacity:.85;}
.alib-sep{width:1px;height:18px;background:var(--border-light);margin:0 2px;}
/* Filter dropdown */
.alib-filter-wrap{position:relative;flex-shrink:0;}
.alib-filter-btn{
  display:flex;align-items:center;gap:4px;font-size:12px;padding:0 8px;
  height:26px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);
  cursor:pointer;color:var(--text-muted);transition:var(--tr);white-space:nowrap;box-sizing:border-box;
}
.alib-filter-btn:hover{background:var(--bg);color:var(--text);}
.alib-filter-btn.active{background:var(--primary-bg);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 30%,transparent);}
.alib-filter-btn.active:hover{background:color-mix(in srgb,var(--primary) 14%,transparent);}
.alib-filter-menu{
  display:none;position:absolute;top:100%;left:0;margin-top:4px;z-index:100;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh);min-width:140px;padding:4px;
}
.alib-filter-menu.open{display:block;}
/* .alib-filter-item base → components.css */
.alib-filter-item.hidden{display:none;}
/* Hide cards when filtered out */
.asset-card.filtered-out,
.compact-row.filtered-out{display:none!important;}
.master-group.filtered-out{display:none!important;}

/* ── Asset grid & cards ── */
.asset-lib-grid{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 14px;
  display:flex;flex-wrap:wrap;
  gap:6px;align-content:flex-start;
}
.asset-card{
  width:100px;min-width:100px;display:flex;flex-direction:column;gap:4px;
  cursor:pointer !important;transition:var(--tr);border-radius:var(--r-sm);padding:4px;
  position:relative;
}
.asset-card:hover{background:var(--bg);}
.asset-card-thumb{
  width:92px;height:92px;border-radius:6px;background:var(--bg);
  border:1px solid var(--border-light);display:grid;place-items:center;overflow:hidden;
  position:relative;
}
.asset-card-thumb svg{width:28px;height:28px;color:var(--text-faint);}
.asset-card-thumb img{width:100%;height:100%;object-fit:cover;}
.asset-card-name{font-size:10px;color:var(--text-secondary);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asset-card-add{
  border:1.5px dashed var(--border);background:transparent;
  display:grid;place-items:center;
}
.asset-card-add:hover{border-color:var(--primary-light);background:var(--primary-bg);}
.asset-card-add svg{color:var(--primary-light);}

/* ── Master-group wrapper (encloses master + instances in grid view) ── */
.master-group{
  display:flex;align-items:flex-start;gap:0;
  padding:3px;border-radius:8px;overflow:visible;
  background:transparent;
}
.master-group:hover{background:var(--bg);}

/* Grid card toggle chevron — horizontal, straddling right edge of master thumb */
.asset-card-toggle{
  position:absolute;top:50%;right:-11px;transform:translateY(-50%);
  width:22px;height:22px;border:1px solid var(--border-light);background:var(--surface);border-radius:50%;
  cursor:pointer;display:grid;place-items:center;color:var(--text-muted);
  transition:var(--tr);z-index:2;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.asset-card-toggle:hover{background:var(--primary-bg);color:var(--primary);border-color:var(--primary-light);}
.asset-card-toggle svg{width:10px;height:10px;transition:transform .15s;}
.asset-card-toggle:not(.collapsed) svg{transform:rotate(180deg);}

/* Hidden instances (collapsed drawer) */
.asset-card[data-parent].drawer-hidden,
.compact-row[data-parent].drawer-hidden{display:none;}

/* Material thumbnail — circular sphere look */
.asset-card-thumb.mat-sphere{
  border-radius:50%;width:80px;height:80px;margin:6px auto 0;
  border:none;background:transparent;overflow:visible;
}
.asset-card-thumb.mat-sphere img{border-radius:50%;}

/* ── Asset Card Badge (Master / Instance) ── */
.asset-card-badge{
  position:absolute;top:6px;right:6px;
  width:18px;height:18px;border-radius:50%;
  font-size:9px;font-weight:700;display:grid;place-items:center;
  line-height:1;
}
.asset-card-badge.master{background:var(--primary-bg);color:var(--primary);}
.asset-card-badge.instance{background:var(--orange-bg);color:var(--orange);}
.asset-card.selected .asset-card-thumb{border-color:var(--border-light);box-shadow:none;}
.asset-card.selected .asset-card-name,
.compact-row.selected .compact-name{color:var(--primary);}

/* ── Usage dots (bottom-right on grid cards, inline on compact) ── */
.usage-dots{position:absolute;bottom:4px;right:4px;display:flex;gap:3px;}
.usage-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.6);}
.usage-dot.in-assets{background:#5b7def;}
.usage-dot.in-scene{background:#34c759;}
.compact-usage-dots{display:flex;gap:3px;flex-shrink:0;margin-left:auto;}
.compact-usage-dot{width:7px;height:7px;border-radius:50%;}
.compact-usage-dot.in-assets{background:#5b7def;}
.compact-usage-dot.in-scene{background:#34c759;}

/* ── Compact (list) view — horizontal scroll, multi-column ── */
.asset-lib-compact{
  flex:1;overflow-x:auto;overflow-y:hidden;padding:8px 14px;
  display:flex;flex-direction:column;flex-wrap:wrap;
  gap:1px;align-content:flex-start;
}
.compact-row{
  display:flex;align-items:center;gap:8px;padding:5px 10px;
  background:var(--surface);cursor:pointer !important;transition:background .12s;
  width:240px;min-width:240px;
  border-bottom:1px solid var(--border-light);box-sizing:border-box;
}
.compact-row:hover{background:var(--bg);}
.compact-row.selected{background:var(--primary-bg);}
.compact-row.instance{padding-left:36px;}
.compact-row.master{font-weight:600;}
.compact-swatch{
  width:20px;height:20px;border-radius:4px;border:1px solid var(--border);flex-shrink:0;
}
.compact-swatch.mat-sphere-sm{
  border-radius:50%;border:none;background:transparent;overflow:hidden;
}
.compact-swatch.mat-sphere-sm img{width:100%;height:100%;border-radius:50%;}
.compact-name{
  flex:1;font-size:11px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.compact-meta{
  font-size:10px;color:var(--text-muted);white-space:nowrap;
}
.compact-master-tag{
  font-size:9px;font-weight:700;
  width:16px;height:16px;border-radius:50%;
  background:var(--primary-bg);color:var(--primary);
  display:grid;place-items:center;flex-shrink:0;line-height:1;
}
.compact-row.instance .compact-master-tag{
  background:var(--orange-bg);color:var(--orange);
}
/* Compact toggle chevron */
.compact-toggle{
  width:18px;height:18px;border:none;background:transparent;border-radius:3px;
  cursor:pointer;display:grid;place-items:center;color:var(--text-muted);
  transition:var(--tr);flex-shrink:0;
}
.compact-toggle:hover{background:var(--bg);color:var(--text);}
.compact-toggle svg{width:12px;height:12px;transition:transform .15s;}
.compact-toggle.collapsed svg{transform:rotate(-90deg);}

/* ── View Toggle (grid / compact) in asset lib header ── */
.view-toggle{
  display:flex;gap:2px;margin-left:auto;
}
.vt-btn{
  width:26px;height:26px;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;
  color:var(--text-muted);transition:var(--tr);
}
.vt-btn:hover{background:var(--bg);color:var(--text);}
.vt-btn.active{background:var(--primary-bg);border-color:var(--primary-light);color:var(--primary);}
.vt-btn svg{width:14px;height:14px;}

/* ── Tab count badge ── */
.tab-count{
  margin-left:auto;font-size:9px;font-weight:500;
  color:var(--text-muted);background:var(--bg);
  min-width:16px;text-align:center;
  padding:1px 5px;border-radius:10px;flex-shrink:0;
  line-height:14px;
}
.asset-side-item.active .tab-count{color:var(--primary);background:var(--primary-bg);}

/* ── Variable Cards (grid view) ── */
.var-thumb.var-numeric{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;background:var(--bg);
}
.var-value{font-size:18px;font-weight:700;color:var(--text);line-height:1;}
.var-range{font-size:9px;color:var(--text-faint);}

/* Variable type badge on grid cards */
.var-type-badge{
  position:absolute;top:6px;right:6px;
  font-size:9px;font-weight:600;padding:1px 6px;border-radius:8px;
  text-transform:uppercase;letter-spacing:.3px;
}
.var-type-badge.color{background:#fdecea;color:var(--red);}
.var-type-badge.float{background:#e8f4fd;color:var(--blue);}
.var-type-badge.int{background:#e6f9f4;color:var(--green);}

/* ── Variable compact row extras ── */
.compact-var-val{
  font-size:10px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.compact-var-type{
  font-size:9px;font-weight:600;padding:1px 5px;border-radius:8px;
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;flex-shrink:0;
}
.compact-var-type.color{background:#fdecea;color:var(--red);}
.compact-var-type.float{background:#e8f4fd;color:var(--blue);}
.compact-var-type.int{background:#e6f9f4;color:var(--green);}
.var-icon-swatch{display:grid;place-items:center;}

/* ── Material Clone Popover ── */
.mat-clone-popover{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh);padding:4px;min-width:160px;
  display:flex;flex-direction:column;gap:2px;
}
/* .mcp-option base → components.css */
.mcp-option small{font-size:10px;color:var(--text-faint);margin-left:auto;}

/* ── Inline rename editing ── */
.asset-card-name.editing,
.compact-name.editing{
  background:var(--surface-raised);border:1px solid var(--primary);border-radius:3px;
  outline:none;padding:1px 4px;cursor:text;min-width:40px;
  color:var(--text);font-family:inherit;
  white-space:nowrap;overflow:visible;text-overflow:clip;
  display:inline-block;max-width:100%;
}

/* ── Folder group (grid view) ── */
.folder-group{
  display:flex;align-items:flex-start;gap:0;flex-wrap:wrap;
  padding:3px;border-radius:8px;overflow:visible;
  background:var(--bg);position:relative;
}
.folder-group>.folder-card{flex-shrink:0;}
.folder-group>.asset-card:not(.folder-card),
.folder-group>.master-group{flex-shrink:0;}
.folder-group>.asset-card.folder-child.drawer-hidden,
.folder-group>.master-group.folder-child.drawer-hidden{display:none;}

/* Folder card: grid view — inherits .asset-card styles */
.asset-card.folder-card{position:relative;}
.asset-card.folder-card .folder-toggle{
  position:absolute;top:50%;right:-11px;transform:translateY(-50%);
  width:22px;height:22px;border:1px solid var(--border-light);background:var(--surface);border-radius:50%;
  cursor:pointer;display:grid;place-items:center;color:var(--text-muted);
  transition:var(--tr);z-index:2;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.asset-card.folder-card .folder-toggle:hover{background:var(--primary-bg);color:var(--primary);border-color:var(--primary-light);}
.asset-card.folder-card .folder-toggle svg{width:10px;height:10px;transition:transform .15s;}
.asset-card.folder-card .folder-toggle:not(.collapsed) svg{transform:rotate(180deg);}
.folder-card.drop-hover,
.folder-row.drop-hover{
  outline:2px solid var(--primary);outline-offset:-2px;
  background:var(--primary-bg);
}

/* Folder compact row */
.compact-row.folder-row{font-weight:600;}
.compact-row.folder-child{padding-left:36px;}
.compact-row.folder-child.instance{padding-left:62px;}
.compact-row.folder-child.drawer-hidden{display:none;}
/* Compact folder toggle (reuses same pattern as compact-toggle) */
.folder-compact-toggle{
  width:18px;height:18px;border:none;background:transparent;border-radius:3px;
  cursor:pointer;display:grid;place-items:center;color:var(--text-muted);
  transition:var(--tr);flex-shrink:0;
}
.folder-compact-toggle:hover{background:var(--bg);color:var(--text);}
.folder-compact-toggle svg{width:12px;height:12px;transition:transform .15s;}
.folder-compact-toggle.collapsed svg{transform:rotate(-90deg);}

/* ── Multi-select highlight ── */
.asset-card.selected{background:var(--primary-bg);outline:2px solid var(--primary);outline-offset:-1px;}
.compact-row.selected{background:var(--primary-bg);box-shadow:inset 2px 0 0 var(--primary);}

/* ── Locate-flash highlight (temporary, distinct from selection) ── */
.locate-flash{
  outline:2px solid var(--primary);outline-offset:-2px;
  animation:locateFlash 1.8s ease-out forwards;
}
@keyframes locateFlash{
  0%{outline-color:var(--primary);}
  15%{outline-color:transparent;}
  30%{outline-color:var(--primary);}
  55%{outline-color:var(--primary);}
  100%{outline-color:transparent;}
}

/* ── Pointer cursor on draggable asset items ── */
.asset-library [draggable="true"]{cursor:pointer !important;}
.asset-library [draggable="true"] *{cursor:inherit;}

/* ── Outliner drop hover for material/env ── */
.o-row.mat-drop-hover{background:var(--primary-bg);outline:1px solid var(--primary);outline-offset:-1px;}