/* ══════════════════════════════════════════════════════════════════
   Assets Panel — theme-aware
   Dark by default; light via body.light-mode
══════════════════════════════════════════════════════════════════ */

/* ── Dark defaults ── */
:root {
  --ap-bg:           rgba(11,20,16,.95);
  --ap-border:       rgba(44,221,127,.12);
  --ap-header-bg:    rgba(44,221,127,.05);
  --ap-accent:       #2cdd7f;
  --ap-tab-bg:       rgba(0,0,0,.30);
  --ap-tab-c:        #719983;
  --ap-tab-c-h:      #94b8a5;
  --ap-tab-bg-h:     rgba(255,255,255,.03);
  --ap-cnt-bg:       rgba(0,0,0,.35);
  --ap-cnt-c:        #719983;
  --ap-cnt-act-bg:   rgba(44,221,127,.20);
  --ap-cnt-act-c:    #2cdd7f;
  --ap-sec-bdr:      #1f322a;
  --ap-cat-bg:       #1b2b24;
  --ap-cat-bdr:      #2c493d;
  --ap-cat-c:        #719983;
  --ap-cat-c-h:      #bad6c8;
  --ap-cat-bdr-h:    #4fe294;
  --ap-cat-act-bg:   rgba(79,226,148,.20);
  --ap-cat-act-bdr:  #4fe294;
  --ap-cat-act-c:    #bad6c8;
  --ap-search-bg:    rgba(44,221,127,.05);
  --ap-search-bdr:   rgba(44,221,127,.20);
  --ap-text:         #e4eee9;
  --ap-text2:        #94b8a5;
  --ap-muted:        #719983;
  --ap-card-bg:      rgba(18,32,26,.80);
  --ap-card-bdr:     rgba(44,221,127,.10);
  --ap-icon-bg:      rgba(44,221,127,.05);
  --ap-icon-bdr:     #2b473b;
  --ap-label-c:      #cce0d6;
  --ap-placed-bg:    #1f322a;
  --ap-placed-bdr:   #2c493d;
  --ap-placed-name:  #94b8a5;
  --ap-empty-c:      #709983;
  --ap-close-c:      #729783;
  --ap-close-bg-h:   rgba(255,255,255,.07);
  --ap-close-c-h:    #e4eee9;
  --ap-scrollbar:    #2c493d;
  --ap-ctx-bg:       #1b2d25;
  --ap-ctx-bdr:      rgba(79,226,148,.55);
  --ap-ctx-text:     #e4eee9;
  --ap-ctx-name:     #bad6c8;
  --ap-ctx-lbl:      #719983;
  --ap-ctx-name-bdr: #2c493d;
  --ap-ctx-btn-bg:   #2c493d;
  --ap-ctx-btn-bg-h: #65a482;
  --ap-ctx-close-c:  #719983;
  --ap-ws-bg:        rgba(14,26,21,.88);
  --ap-ws-bdr:       rgba(79,226,148,.35);
  --ap-ws-title:     #6d9c83;
  --ap-ws-sep:       rgba(255,255,255,.07);
  --ap-ws-btn-c:     #94b8a5;
  --ap-ws-btn-bg-h:  rgba(255,255,255,.07);
  --ap-ws-act-bg:    rgba(79,226,148,.18);
  --ap-ws-act-c:     #bad6c8;
  --ap-ws-act-bdr:   rgba(79,226,148,.40);
  --ap-ws-del-c:     #fca5a5;
  --ap-ws-del-bg-h:  rgba(239,68,68,.14);
  --ap-ws-key-bg:    rgba(255,255,255,.06);
  --ap-ws-key-c:     #66a383;
  --ap-ws-hint:      #66a383;
  --ap-ib-bg:        rgba(14,26,21,.90);
  --ap-ib-bdr:       rgba(79,226,148,.35);
  --ap-ib-name:      #bad6c8;
  --ap-ib-name-bdr:  rgba(255,255,255,.10);
  --ap-ib-lbl:       #6d9c83;
  --ap-ib-input-bg:  rgba(255,255,255,.06);
  --ap-ib-input-bdr: rgba(255,255,255,.10);
  --ap-ib-input-c:   #e4eee9;
  --ap-ib-focus-bg:  rgba(79,226,148,.10);
  --ap-ib-focus-bdr: #4fe294;
  --ap-ib-div:       rgba(255,255,255,.08);
  --ap-ib-close-c:   #6d9c83;
  --ap-ib-close-c-h: #e4eee9;
}

/* ── Light overrides ── */
body.light-mode {
  --ap-bg:           rgba(253,252,250,.97);
  --ap-border:       rgba(22,122,75,.15);
  --ap-header-bg:    rgba(22,123,76,.05);
  --ap-accent:       #167b4c;
  --ap-tab-bg:       rgba(22,122,75,.04);
  --ap-tab-c:        #486457;
  --ap-tab-c-h:      #253d32;
  --ap-tab-bg-h:     rgba(0,0,0,.03);
  --ap-cnt-bg:       rgba(0,0,0,.07);
  --ap-cnt-c:        #486457;
  --ap-cnt-act-bg:   rgba(22,123,76,.15);
  --ap-cnt-act-c:    #167b4c;
  --ap-sec-bdr:      rgba(22,122,75,.10);
  --ap-cat-bg:       rgba(250,249,245,.98);
  --ap-cat-bdr:      rgba(22,122,75,.18);
  --ap-cat-c:        #486457;
  --ap-cat-c-h:      #167b4c;
  --ap-cat-bdr-h:    #167b4c;
  --ap-cat-act-bg:   rgba(22,123,76,.12);
  --ap-cat-act-bdr:  #167b4c;
  --ap-cat-act-c:    #167b4c;
  --ap-search-bg:    rgba(250,249,245,.98);
  --ap-search-bdr:   rgba(22,122,75,.22);
  --ap-text:         #1a3228;
  --ap-text2:        #253d32;
  --ap-muted:        #486457;
  --ap-card-bg:      rgba(250,249,245,.98);
  --ap-card-bdr:     rgba(22,122,75,.14);
  --ap-icon-bg:      rgba(22,123,76,.06);
  --ap-icon-bdr:     rgba(22,122,75,.12);
  --ap-label-c:      #253d32;
  --ap-placed-bg:    rgba(250,249,245,.98);
  --ap-placed-bdr:   rgba(22,122,75,.15);
  --ap-placed-name:  #334c40;
  --ap-empty-c:      #94b8a0;
  --ap-close-c:      #486457;
  --ap-close-bg-h:   rgba(0,0,0,.06);
  --ap-close-c-h:    #1a3228;
  --ap-scrollbar:    rgba(22,123,76,.30);
  --ap-ctx-bg:       rgba(253,252,250,.98);
  --ap-ctx-bdr:      rgba(22,123,76,.40);
  --ap-ctx-text:     #1a3228;
  --ap-ctx-name:     #167b4c;
  --ap-ctx-lbl:      #486457;
  --ap-ctx-name-bdr: rgba(22,122,75,.15);
  --ap-ctx-btn-bg:   rgba(22,122,75,.08);
  --ap-ctx-btn-bg-h: rgba(22,122,75,.16);
  --ap-ctx-close-c:  #486457;
  --ap-ws-bg:        rgba(253,252,250,.97);
  --ap-ws-bdr:       rgba(22,123,76,.30);
  --ap-ws-title:     #486457;
  --ap-ws-sep:       rgba(0,0,0,.07);
  --ap-ws-btn-c:     #253d32;
  --ap-ws-btn-bg-h:  rgba(0,0,0,.05);
  --ap-ws-act-bg:    rgba(22,123,76,.12);
  --ap-ws-act-c:     #167b4c;
  --ap-ws-act-bdr:   rgba(22,123,76,.35);
  --ap-ws-del-c:     #dc2626;
  --ap-ws-del-bg-h:  rgba(220,38,38,.10);
  --ap-ws-key-bg:    rgba(0,0,0,.06);
  --ap-ws-key-c:     #486457;
  --ap-ws-hint:      #486457;
  --ap-ib-bg:        rgba(253,252,250,.97);
  --ap-ib-bdr:       rgba(22,123,76,.30);
  --ap-ib-name:      #167b4c;
  --ap-ib-name-bdr:  rgba(0,0,0,.08);
  --ap-ib-lbl:       #486457;
  --ap-ib-input-bg:  rgba(250,249,245,.98);
  --ap-ib-input-bdr: rgba(22,122,75,.18);
  --ap-ib-input-c:   #1a3228;
  --ap-ib-focus-bg:  rgba(22,123,76,.07);
  --ap-ib-focus-bdr: #167b4c;
  --ap-ib-div:       rgba(0,0,0,.08);
  --ap-ib-close-c:   #486457;
  --ap-ib-close-c-h: #1a3228;
}

/* ══════════════════════════════════════════════════════════════════
   PANEL SHELL
══════════════════════════════════════════════════════════════════ */
#assets-panel {
  display: none; position: absolute; top: 0; right: 0;
  width: 320px; height: 100%;
  background: var(--ap-bg); border-left: 1px solid var(--ap-border);
  flex-direction: column; z-index: 28; backdrop-filter: blur(20px);
  box-shadow: -4px 0 20px rgba(0,0,0,.4); overflow: hidden;
  transition: background .2s, border-color .2s;
}
#assets-panel.open { display: flex; }

/* ── Header ── */
.assets-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .85rem; border-bottom: 1px solid var(--ap-border); flex-shrink: 0;
  background: var(--ap-header-bg); transition: background .2s, border-color .2s;
}
.assets-title { font-size: .8rem; font-weight: 700; color: var(--ap-accent); letter-spacing: .4px; }
#assets-close {
  background: none; border: none; color: var(--ap-close-c);
  font-size: .8rem; cursor: pointer; padding: 2px 5px; border-radius: 4px;
  transition: color .15s, background .15s;
}
#assets-close:hover { color: var(--ap-close-c-h); background: var(--ap-close-bg-h); }

/* ── Tab bar ── */
.assets-tab-bar {
  display: flex; border-bottom: 1px solid var(--ap-border); flex-shrink: 0;
  background: var(--ap-tab-bg); transition: background .2s, border-color .2s;
}
.assets-tab {
  flex: 1; padding: .55rem .4rem; background: transparent;
  border: none; border-bottom: 2px solid transparent; color: var(--ap-tab-c);
  font-size: .72rem; font-weight: 600; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  display: flex; align-items: center; justify-content: center; gap: .35rem; user-select: none;
}
.assets-tab:hover { color: var(--ap-tab-c-h); background: var(--ap-tab-bg-h); }
.assets-tab.active { color: var(--ap-accent); border-bottom-color: var(--ap-accent); }
.assets-tab-count {
  font-size: .62rem; background: var(--ap-cnt-bg); color: var(--ap-cnt-c);
  border-radius: 10px; padding: 1px 6px; font-weight: 600;
}
.assets-tab.active .assets-tab-count { background: var(--ap-cnt-act-bg); color: var(--ap-cnt-act-c); }
.assets-tab-pane { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.assets-tab-pane.active { display: flex; }

/* ── Placed assets ── */
#placed-assets-section { display: none; }
#placed-assets-body { max-height: 180px; overflow-y: auto; padding: .4rem .6rem .5rem; }
#placed-assets-body::-webkit-scrollbar { width: 4px; }
#placed-assets-body::-webkit-scrollbar-track { background: transparent; }
#placed-assets-body::-webkit-scrollbar-thumb { background: var(--ap-scrollbar); border-radius: 2px; }
.placed-asset-item {
  display: flex; align-items: center; gap: .4rem; padding: .28rem .35rem;
  border-radius: 5px; background: var(--ap-placed-bg); border: 1px solid var(--ap-placed-bdr);
  margin-bottom: .25rem; transition: border-color .15s, background .15s;
}
.placed-asset-item:hover { border-color: var(--ap-accent); }
.placed-asset-icon { font-size: 1rem; flex-shrink: 0; }
.placed-asset-name { flex: 1; font-size: .65rem; color: var(--ap-placed-name); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placed-asset-del { background: none; border: none; color: #ef4444; cursor: pointer; font-size: .75rem; padding: 0 .15rem; line-height: 1; border-radius: 3px; flex-shrink: 0; opacity: .7; transition: opacity .15s; }
.placed-asset-del:hover { opacity: 1; background: rgba(239,68,68,.12); }
.placed-assets-empty { font-size: .65rem; color: var(--ap-empty-c); text-align: center; padding: .5rem 0; }

/* ── Category pills ── */
#assets-categories {
  display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem .6rem .35rem;
  border-bottom: 1px solid var(--ap-sec-bdr); flex-shrink: 0; overflow-x: auto;
  transition: border-color .2s;
}
#assets-categories::-webkit-scrollbar { height: 3px; }
#assets-categories::-webkit-scrollbar-thumb { background: var(--ap-scrollbar); border-radius: 2px; }
.asset-cat-pill {
  padding: .2rem .55rem; border-radius: 12px;
  border: 1px solid var(--ap-cat-bdr); background: var(--ap-cat-bg); color: var(--ap-cat-c);
  font-size: .62rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .13s, color .13s, border-color .13s; user-select: none;
}
.asset-cat-pill:hover { border-color: var(--ap-cat-bdr-h); color: var(--ap-cat-c-h); }
.asset-cat-pill.active { background: var(--ap-cat-act-bg); border-color: var(--ap-cat-act-bdr); color: var(--ap-cat-act-c); }

/* ── Search ── */
.assets-search-wrap {
  padding: .35rem .6rem; border-bottom: 1px solid var(--ap-sec-bdr); flex-shrink: 0;
  transition: border-color .2s;
}
#assets-search {
  width: 100%; box-sizing: border-box;
  background: var(--ap-search-bg); border: 1px solid var(--ap-search-bdr);
  border-radius: 8px; color: var(--ap-text); font-size: .75rem; padding: .32rem .6rem; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
}
#assets-search::placeholder { color: var(--ap-muted); }
#assets-search:focus { border-color: var(--ap-accent); box-shadow: 0 0 0 2px rgba(44,221,127,.12); }
body.light-mode #assets-search:focus { box-shadow: 0 0 0 2px rgba(22,123,76,.12); }

/* ── Grids ── */
#assets-grid {
  flex: 1; overflow-y: auto; padding: .5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  align-content: start; min-height: 0;
}
#assets-grid::-webkit-scrollbar { width: 4px; }
#assets-grid::-webkit-scrollbar-track { background: transparent; }
#assets-grid::-webkit-scrollbar-thumb { background: var(--ap-scrollbar); border-radius: 2px; }

#company-assets-grid {
  flex: 1; overflow-y: auto; padding: .5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  align-content: start; min-height: 0;
}
#company-assets-grid::-webkit-scrollbar { width: 4px; }
#company-assets-grid::-webkit-scrollbar-track { background: transparent; }
#company-assets-grid::-webkit-scrollbar-thumb { background: var(--ap-scrollbar); border-radius: 2px; }

#company-assets-search {
  width: 100%; background: var(--ap-search-bg); border: 1px solid var(--ap-search-bdr);
  border-radius: 5px; color: var(--ap-text); font-size: .75rem;
  padding: .32rem .6rem; outline: none;
  transition: border-color .2s, background .2s, color .2s;
}
#company-assets-search:focus { border-color: var(--ap-accent); }

/* ── Asset cards ── */
.asset-card {
  background: var(--ap-card-bg); border: 1px solid var(--ap-card-bdr); border-radius: 10px;
  padding: .4rem; cursor: grab;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
  user-select: none;
}
.asset-card:hover {
  border-color: var(--ap-accent); transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(44,221,127,.15);
}
body.light-mode .asset-card:hover { box-shadow: 0 0 8px rgba(22,123,76,.15); }
.asset-card.dragging { opacity: .4; transform: scale(.96); }
.asset-icon {
  width: 100%; aspect-ratio: 1; background: var(--ap-icon-bg); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem;
  pointer-events: none; overflow: hidden; border: 1px solid var(--ap-icon-bdr);
}
.asset-icon img { width: 100%; height: 100%; object-fit: contain; }
.asset-label {
  font-size: .65rem; color: var(--ap-label-c); text-align: center;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
#assets-empty { display: none; color: var(--ap-empty-c); font-size: .75rem; text-align: center; padding: 2rem; }
#viewer-canvas.asset-drop-target { outline: 2px dashed var(--ap-accent); outline-offset: -3px; }
#btn-assets { color: #bad6c8; }
#btn-assets.open { background: rgba(79,226,148,.25); border-color: #4fe294; color: #bad6c8; }

/* ══════════════════════════════════════════════════════════════════
   ASSET CONTEXT MENU
══════════════════════════════════════════════════════════════════ */
#asset-ctx-menu {
  position: fixed; display: none;
  background: var(--ap-ctx-bg); border: 1px solid var(--ap-ctx-bdr);
  border-radius: 10px; padding: 10px 12px 8px; z-index: 200; min-width: 174px;
  box-shadow: 0 6px 28px rgba(0,0,0,.40); color: var(--ap-ctx-text);
  font-size: .78rem; pointer-events: all; transition: background .2s;
}
body.light-mode #asset-ctx-menu { box-shadow: 0 4px 18px rgba(35,67,54,.12); }
#asset-ctx-menu.visible { display: block; }
#asset-ctx-name {
  font-weight: 700; font-size: .83rem; color: var(--ap-ctx-name);
  padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid var(--ap-ctx-name-bdr);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px;
}
#asset-ctx-menu .ctx-section-label {
  font-size: .62rem; color: var(--ap-ctx-lbl);
  text-transform: uppercase; letter-spacing: .05em; margin: 5px 0 3px;
}
#asset-ctx-menu .ctx-row { display: flex; gap: 5px; margin-bottom: 5px; }
#asset-ctx-menu .ctx-btn {
  flex: 1; padding: 6px 4px; border-radius: 6px; border: none; cursor: pointer;
  font-size: .71rem; font-weight: 600; color: var(--ap-ctx-text);
  background: var(--ap-ctx-btn-bg); transition: background .15s; white-space: nowrap;
}
#asset-ctx-menu .ctx-btn:hover { background: var(--ap-ctx-btn-bg-h); }
#asset-ctx-menu .ctx-btn.move-btn { background: #31d87f; color: #fff; }
#asset-ctx-menu .ctx-btn.move-btn:hover { background: #36d37f; }
#asset-ctx-menu .ctx-btn.move-btn.active { background: #f59e0b; color: #000; }
#asset-ctx-menu .ctx-btn.del-btn { background: #7f1d1d; color: #fca5a5; }
#asset-ctx-menu .ctx-btn.del-btn:hover { background: #991b1b; }
#asset-ctx-close {
  position: absolute; top: 7px; right: 9px; background: none; border: none;
  color: var(--ap-ctx-close-c); cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
  transition: color .15s;
}
#asset-ctx-close:hover { color: var(--ap-ctx-text); }
#viewer-canvas.asset-move-mode { cursor: crosshair !important; }

/* ══════════════════════════════════════════════════════════════════
   ASSET EDITING WORKSPACE (left floating bar)
══════════════════════════════════════════════════════════════════ */
#asset-workspace-bar {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  background: var(--ap-ws-bg); border: 1px solid var(--ap-ws-bdr);
  border-radius: 14px; padding: 10px 8px 12px; display: none; flex-direction: column;
  align-items: stretch; gap: 3px; z-index: 30; min-width: 116px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35); backdrop-filter: blur(10px); user-select: none;
  transition: background .2s, border-color .2s;
}
body.light-mode #asset-workspace-bar { box-shadow: 0 4px 16px rgba(35,67,54,.10); }
#asset-workspace-bar.visible { display: flex; }
.aws-title {
  font-size: .63rem; font-weight: 700; color: var(--ap-ws-title);
  text-transform: uppercase; letter-spacing: .1em; text-align: center;
  padding-bottom: 7px; border-bottom: 1px solid var(--ap-ws-sep); margin-bottom: 3px;
}
.aws-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; font-size: .74rem; font-weight: 600;
  color: var(--ap-ws-btn-c); background: transparent;
  transition: background .14s, color .14s, border-color .14s; text-align: left; white-space: nowrap;
}
.aws-btn:hover { background: var(--ap-ws-btn-bg-h); color: var(--ap-text); }
.aws-btn.active { background: var(--ap-ws-act-bg); color: var(--ap-ws-act-c); border-color: var(--ap-ws-act-bdr); }
.aws-btn.aws-del { color: var(--ap-ws-del-c); }
.aws-btn.aws-del:hover { background: var(--ap-ws-del-bg-h); color: var(--ap-ws-del-c); }
.aws-key {
  font-size: .58rem; color: var(--ap-ws-key-c); background: var(--ap-ws-key-bg);
  border-radius: 3px; padding: 1px 4px; margin-left: auto; font-family: monospace;
}
.aws-sep { height: 1px; background: var(--ap-ws-sep); margin: 5px 0; }
#asset-workspace-bar .aws-hint {
  font-size: .6rem; color: var(--ap-ws-hint); text-align: center;
  padding-top: 7px; border-top: 1px solid var(--ap-ws-sep); margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   ASSET INFO BAR (bottom floating)
══════════════════════════════════════════════════════════════════ */
#asset-info-bar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: var(--ap-ib-bg); border: 1px solid var(--ap-ib-bdr);
  border-radius: 12px; padding: 8px 18px; display: none; align-items: center;
  gap: 12px; z-index: 30; backdrop-filter: blur(10px);
  box-shadow: 0 4px 22px rgba(0,0,0,.35); white-space: nowrap; user-select: none;
  transition: background .2s, border-color .2s;
}
body.light-mode #asset-info-bar { box-shadow: 0 4px 16px rgba(35,67,54,.10); }
#asset-info-bar.visible { display: flex; }
#aib-name {
  font-size: .78rem; font-weight: 700; color: var(--ap-ib-name);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--ap-ib-name-bdr); padding-right: 12px;
}
.aib-group { display: flex; align-items: center; gap: 4px; }
.aib-label { font-size: .62rem; color: var(--ap-ib-lbl); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.aib-input {
  width: 56px; background: var(--ap-ib-input-bg); border: 1px solid var(--ap-ib-input-bdr);
  border-radius: 6px; color: var(--ap-ib-input-c); font-size: .74rem;
  padding: 3px 6px; text-align: center; user-select: text;
  transition: border-color .15s, background .15s, color .15s;
}
.aib-input:focus { outline: none; border-color: var(--ap-ib-focus-bdr); background: var(--ap-ib-focus-bg); }
.aib-divider { width: 1px; height: 22px; background: var(--ap-ib-div); }
#aib-deselect {
  background: none; border: none; color: var(--ap-ib-close-c);
  cursor: pointer; font-size: 14px; padding: 0 0 0 4px; line-height: 1;
  transition: color .15s;
}
#aib-deselect:hover { color: var(--ap-ib-close-c-h); }