/* Inspector options - details/sides/bypass/state/material-param - extracted from inspector.css (phase C) */
.insp-events-add-btn:hover{background:var(--bg);border-color:var(--text-muted);}

/* ── Option Inspector: Details row (image + fields) ── */
.opt-details-row{
  display:flex;gap:12px;padding:0 14px;align-items:flex-start;
}
.opt-img-thumb{
  width:68px;height:68px;flex-shrink:0;border:1.5px dashed var(--border);border-radius:var(--r-sm);
  display:grid;place-items:center;cursor:pointer;overflow:hidden;position:relative;
  transition:border-color .15s, background .15s;
}
.opt-img-thumb:hover{border-color:var(--text-muted);background:var(--bg);}
.opt-img-thumb.dragover{border-color:var(--primary);border-style:solid;background:var(--primary-bg);}
.opt-img-thumb.has-img{border-style:solid;border-color:var(--border);}
.opt-img-ph{width:20px;height:20px;color:var(--text-faint);}
.opt-img-thumb.has-img .opt-img-ph{display:none;}
.opt-img-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-sm) - 1px);}
/* Thumbnail switch button (image ↔ color) — bottom-right droplet */
.opt-thumb-switch{
  position:absolute;bottom:3px;right:3px;width:18px;height:18px;padding:0;
  border:none;border-radius:var(--r-sm,4px);background:var(--surface);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-faint);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:color .12s, background .12s;z-index:2;line-height:0;
}
.opt-thumb-switch:hover{color:var(--primary);background:var(--primary-bg);}
.opt-thumb-switch svg{width:11px;height:11px;}
/* Thumbnail action button — top-right (upload / swap, opens menu) */
.opt-thumb-action{
  position:absolute;top:3px;right:3px;width:18px;height:18px;padding:0;
  border:none;border-radius:var(--r-sm,4px);background:var(--surface);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-faint);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:color .12s, background .12s;z-index:2;line-height:0;
}
.opt-thumb-action:hover{color:var(--primary);background:var(--primary-bg);}
.opt-thumb-action svg{width:11px;height:11px;}
/* Thumbnail locate button — bottom-left, shows only when an image is linked */
.opt-thumb-locate{
  position:absolute;bottom:3px;left:3px;width:18px;height:18px;padding:0;
  border:none;border-radius:var(--r-sm,4px);background:var(--surface);
  cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--text-faint);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:color .12s, background .12s;z-index:2;line-height:0;
}
.opt-thumb-locate:hover{color:var(--primary);background:var(--primary-bg);}
.opt-thumb-locate svg{width:11px;height:11px;}
.opt-img-thumb.has-img .opt-thumb-locate{display:flex;}
/* Toggle add/swap icons based on filled state */
.opt-img-thumb:not(.has-img):not(.color-mode) .opt-thumb-action-swap{display:none;}
.opt-img-thumb.has-img    .opt-thumb-action-add,
.opt-img-thumb.color-mode .opt-thumb-action-add{display:none;}
/* Color picker inside thumbnail */
.opt-color-input{
  position:absolute;top:0;left:0;width:100%;height:100%;padding:0;border:none;
  cursor:pointer;border-radius:calc(var(--r-sm) - 1px);background:none;
}
.opt-color-input::-webkit-color-swatch-wrapper{padding:0;}
.opt-color-input::-webkit-color-swatch{border:none;border-radius:calc(var(--r-sm) - 1px);}
.opt-img-thumb.color-mode .opt-img-ph{display:none;}
.opt-img-thumb.color-mode .opt-color-input{display:block!important;}
.opt-details-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.opt-details-fields .fc-row.compact{grid-template-columns:36px 1fr;padding-left:0;padding-right:0;}
/* ── Thumbnail context menu ── */
.thumb-ctx-menu{
  display:none;position:absolute;z-index:200;
  background:var(--surface-raised,var(--surface));border:1px solid var(--border-light);
  border-radius:var(--r-md,6px);box-shadow:0 4px 12px rgba(0,0,0,.18);
  min-width:180px;max-height:260px;overflow-y:auto;padding:4px;
  font-size:12px;
}
.thumb-ctx-menu.open{display:block;}
.thumb-ctx-item{
  display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;
  font:inherit;font-size:12px;color:var(--text);cursor:pointer;padding:5px 10px;text-align:left;
  border-radius:var(--r-sm);transition:background .12s, color .12s;
}
.thumb-ctx-item:hover{background:var(--primary-bg);color:var(--primary);}
.thumb-ctx-item svg{width:14px;height:14px;flex-shrink:0;color:currentColor;opacity:.7;}
.thumb-ctx-item img{width:14px;height:14px;flex-shrink:0;object-fit:cover;border-radius:2px;}
.thumb-ctx-sep{height:1px;background:var(--border-light);margin:2px 0;}
.thumb-ctx-empty{padding:6px 10px;color:var(--text-faint);font-style:italic;font-size:11px;}
.thumb-ctx-item.danger:hover{color:var(--red,#d33);background:color-mix(in srgb,var(--red,#e53935) 10%,transparent);}

/* ── Option Inspector: Sides (slot pattern) ── */
.opt-sides-list{display:flex;flex-direction:column;gap:2px;padding:0 14px;}
.opt-side-row{
  display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:var(--r-sm);cursor:pointer;transition:background .12s;
}
.opt-side-row:hover{background:var(--bg);}
.opt-side-slot.open>.opt-side-row{background:var(--bg);border-radius:var(--r-sm) var(--r-sm) 0 0;}
.opt-side-preview{
  width:28px;height:28px;flex-shrink:0;border-radius:4px;border:1px solid var(--border);
  display:grid;place-items:center;overflow:hidden;background:var(--surface);
  cursor:pointer;transition:border-color .15s;
}
.opt-side-preview:hover{border-color:var(--primary-light);}
.opt-side-ph{width:14px;height:14px;color:var(--text-faint);}
.opt-side-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.opt-side-name{
  font-size:12px;font-weight:500;color:var(--text);outline:none;
  border-bottom:1px solid transparent;transition:border-color .15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.opt-side-name:focus{border-bottom-color:var(--primary);}
.opt-side-obj-select{
  font-size:10px;color:var(--text-muted);background:none;border:none;
  padding:0;cursor:pointer;font-family:inherit;outline:none;
  max-width:100%;
}
.opt-side-obj-select:hover{color:var(--text);}
.opt-side-obj-select:focus{color:var(--text);}
.opt-side-del{
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border:none;background:none;border-radius:var(--r-sm);
  color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity .1s, background .1s, color .1s;
  flex-shrink:0;
}
.opt-side-row:hover .opt-side-del{opacity:1;}
.opt-side-del:hover{background:var(--red-bg);color:var(--red);}

/* ── Side mapping sub-panel (expandable, reuses tex-sub pattern) ── */
.opt-side-sub{
  display:none;background:var(--bg);
  border-radius:0 0 var(--r-sm) var(--r-sm);
  padding:10px 14px 12px;margin:0 0 4px 0;
}
.opt-side-slot.open>.opt-side-sub{display:block;}
.opt-print-area-btn{white-space:nowrap;}

/* ── Action head dropdown ── */
.insp-event-action-head .fc-dropdown-btn{font-size:12px;font-weight:600;color:var(--text);}

/* ── Transition param row ── */
.insp-event-action-param .insp-trans-dur{width:46px;}
.insp-event-action-param .fc-num{flex-shrink:0;}

/* ── Bypass (eye) toggle ── */
.insp-bypass-btn{
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--text-faint);cursor:pointer;
  border-radius:var(--r-sm);transition:background .1s, color .1s;flex-shrink:0;
}
.insp-bypass-btn:hover{background:var(--bg);color:var(--text-secondary);}
.insp-bypass-btn svg{width:13px;height:13px;}
.insp-event-action-head .insp-bypass-btn{width:18px;height:18px;margin-left:auto;}
.insp-event-action-head .insp-bypass-btn svg{width:11px;height:11px;}
.insp-event-card.bypassed .insp-bypass-btn,
.insp-event-action.bypassed .insp-bypass-btn{color:var(--orange);}
.insp-event-card.bypassed .insp-event-card-title{text-decoration:line-through;color:var(--text-muted);}
.insp-event-card.bypassed .insp-event-card-body{opacity:.4;}
.insp-event-action.bypassed .insp-event-action-params{opacity:.4;}

/* ── State inline rename ── */
.insp-list-item-name[contenteditable]{
  outline:none;padding:1px 4px;margin:-1px -4px;
  border-radius:2px;border:1px solid var(--primary);
  background:var(--surface);min-width:40px;
}

/* ── Text inputs & Textarea (Details) ── */
.fc-text{
  font-size:11px;padding:5px 8px;border:1px solid var(--border);border-radius:4px;
  background:var(--surface-raised);color:var(--text);width:100%;box-sizing:border-box;
  font-family:inherit;
}
.fc-text:focus{border-color:var(--primary);outline:none;}
.fc-textarea{
  font-size:11px;padding:5px 8px;border:1px solid var(--border);border-radius:4px;
  background:var(--surface-raised);color:var(--text);width:100%;box-sizing:border-box;
  resize:vertical;font-family:inherit;line-height:1.4;
}
.fc-textarea:focus{border-color:var(--primary);outline:none;}

/* ── Material Param Row ── */
.mat-param{
  display:grid;grid-template-columns:22px 1fr 48px 1fr 32px;gap:4px 6px;
  align-items:center;padding:4px 14px;transition:opacity .15s;
}
.mat-param.inherited{opacity:.5;}
.mat-param.inherited .param-ctrl input,
.mat-param.inherited .param-ctrl select,
.mat-param.inherited input.param-val{pointer-events:none;}
.mat-param.inherited .param-tex{pointer-events:none;}

/* Inherit toggle */
.param-inherit{
  width:20px;height:20px;border:none;background:transparent;border-radius:4px;
  cursor:pointer;display:grid;place-items:center;color:var(--text-muted);transition:var(--tr);
}
.param-inherit:hover{background:var(--bg);color:var(--primary);}
.param-inherit svg{width:12px;height:12px;}
.mat-param.inherited .param-inherit{color:var(--primary-light);}

/* label */
.param-label{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Controls */
.param-ctrl{display:flex;align-items:center;gap:0;min-width:0;}
.param-ctrl input[type="range"]{
  flex:1;height:4px;-webkit-appearance:none;appearance:none;
  background:var(--border);border-radius:2px;outline:none;
  min-width:0;
}
.param-ctrl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--primary);cursor:pointer;border:2px solid var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.param-ctrl input[type="color"]{
  width:28px;height:22px;border:1px solid var(--border);border-radius:4px;
  cursor:pointer;padding:1px;background:var(--surface);
}
.param-color{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;border:none;border-radius:3px;
  cursor:pointer;padding:0;background:none;box-sizing:border-box;
}
.param-color::-webkit-color-swatch-wrapper{padding:0;}
.param-color::-webkit-color-swatch{border:none;border-radius:3px;}
.param-color::-moz-color-swatch{border:none;border-radius:3px;}
.param-val{
  font-size:11px;color:var(--text);text-align:center;
  font-variant-numeric:tabular-nums;
}
input.param-val{
  border:1px solid var(--border);background:var(--surface-raised);border-radius:4px;
  padding:4px 6px;width:100%;box-sizing:border-box;outline:none;
  font-family:inherit;cursor:text;transition:border-color .15s;
}
input.param-val:hover{border-color:var(--border-focus);}
input.param-val:focus{border-color:var(--primary);outline:none;}
.param-ctrl select{
  font-size:11px;padding:3px 6px;border:1px solid var(--border);border-radius:4px;
  background:var(--surface);color:var(--text);cursor:pointer;flex:1;
}

/* Texture slot */
.param-tex{
  width:30px;height:30px;border:1.5px dashed var(--border);border-radius:4px;
  display:grid;place-items:center;cursor:pointer;transition:var(--tr);overflow:hidden;
  position:relative;z-index:1;background:var(--surface);
}
.param-tex:hover{border-color:var(--primary-light);background:var(--primary-bg);}
.param-tex svg{width:12px;height:12px;color:var(--text-faint);}
.param-tex.has-tex{border-style:solid;border-color:var(--border);background:var(--bg);}
.param-tex.has-tex img{width:100%;height:100%;object-fit:cover;}

/* Color row special */
.param-color-row .param-val-hex{grid-column:4/5;}

/* Toggle row (double sided, etc) */
.param-toggle{
  width:32px;height:18px;border-radius:9px;border:none;
  background:var(--border);cursor:pointer;position:relative;transition:var(--tr);
}
.param-toggle.on{background:var(--primary);}
.param-toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:white;transition:transform .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.param-toggle.on::after{transform:translateX(14px);}