/* Shared sidebar chrome. Preview artwork and editable color swatches retain
   their document colors; only controls and navigation use the brand palette. */
#app #panel[data-tool] { --tool:var(--coral); --tool-soft:var(--coral-soft); color:var(--ink); background:var(--paper); }
#app #panel #panel-head { background:var(--paper); box-shadow:none; border-bottom:1px solid var(--line-soft); padding:16px; }
#app #panel #panel-title { font-size:17px; font-weight:700; letter-spacing:-.025em; }
#app #panel #panel-sub { color:var(--ink-soft); font:400 12px/1.5 var(--font); }
#app #panel #panel-body { padding:14px; }
#app #panel .p-section { margin:0 0 20px; padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
#app #panel .panel-eyebrow { color:var(--ink); font:600 13px/1.5 var(--font); text-transform:none; letter-spacing:0; margin:16px 0 10px; }
#app #panel .panel-eyebrow::before { display:none; }
#app #panel .panel-count { color:var(--ink-soft); background:var(--control-bg); font:500 11px/1.4 var(--font); }
#app #panel :is(.pbtn,.fchip,.el-tabs button,.seg-mini button) { font-family:var(--font); }
#app #panel .pbtn { min-height:38px; border-radius:8px; white-space:normal; line-height:1.4; font-size:12px; }
#app #panel .pbtn.primary { color:#fff; background:var(--coral-action); border-color:var(--coral-action); box-shadow:none; }
#app #panel .pbtn.primary:hover:not(:disabled) { background:var(--coral-deep); }
#app #panel :is(.p-card,.look-card,.dev-card,.dev-pose,.font-row,.asset-item) { color:var(--ink); border:1px solid var(--line-w); border-radius:10px; background:var(--card); box-shadow:none; }
#app #panel :is(.p-card,.look-card,.dev-card,.dev-pose,.font-row):hover { background:var(--control-bg-hover); border-color:var(--control-border-hover); box-shadow:none; transform:none; }
#app #panel :is(.p-card,.dev-card)[hidden] { display:none; }
#app #panel :is(.layers-hint,.panel-note,.library-state,.fg-note,.el-count) { color:var(--ink-soft); font:400 12px/1.6 var(--font); }
#app #panel :is(.ins-label,.fg-lede) { color:var(--ink); font:600 12px/1.5 var(--font); letter-spacing:0; text-transform:none; }
#app #panel :is(.ins-input,.ins-select,.ins-textarea,.sidebar-search,.template-search,.el-search) { min-height:40px; box-sizing:border-box; border:1px solid var(--control-border-hover); background-color:var(--control-bg); color:var(--ink); border-radius:8px; font:400 12px/1.5 var(--font); }
#app #panel .sidebar-search { width:100%; padding:9px 10px; margin:0 0 12px; }
#app #panel input::placeholder { color:var(--ink-soft); opacity:1; }
#app #panel :is(button,input,select,textarea,summary):focus-visible { outline:2px solid var(--coral); outline-offset:3px; }
#app #panel :is(input[type=checkbox],input[type=radio],input[type=range]) { accent-color:var(--coral); }
#app #panel .el-tabs { display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin-bottom:12px; background:var(--control-bg); border:1px solid var(--line-soft); border-radius:10px; }
#app #panel .el-tabs button { flex:1 1 auto; min-height:36px; padding:6px 9px; font-size:12px; border-radius:7px; color:var(--ink-soft); white-space:normal; }
#app #panel .el-tabs button.active { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgb(0 0 0 / .08); }
#app #panel .seg-mini { border-color:var(--line-soft); background:var(--control-bg); }
#app #panel .seg-mini button { min-height:34px; color:var(--ink-soft); }
#app #panel .seg-mini button.active { background:var(--control-bg-active); color:var(--ink); box-shadow:none; }
#app #panel .fchip { min-height:32px; padding:5px 10px; color:var(--ink-soft); border-color:var(--line-w); background:transparent; font-size:12px; }
#app #panel .fchip.active { background:var(--coral-soft); color:var(--coral); border-color:var(--coral); }
#app #panel .sidebar-section { margin:16px 0; padding:0; border:0; border-top:1px solid var(--line-soft); background:none; }
#app #panel .sidebar-section > h3 { margin:12px 0 10px; color:var(--ink); font:600 13px/1.5 var(--font); }
#app #panel .sidebar-section > .p-section:last-child { margin-bottom:0; }
/* Screens and text: recognizable content, no technical metadata on add buttons. */
#app #panel .screen-page-row { padding:3px; border:1px solid var(--line-w); border-radius:10px; background:var(--card); box-shadow:none; }
#app #panel .screen-page-row.is-selected { border-color:var(--coral); background:var(--card); box-shadow:0 0 0 1px var(--coral); }
#app #panel .screen-page-row .mini-thumb { border:0; border-radius:6px; box-shadow:none; }
#app #panel .screen-page-row .mini-thumb canvas { object-fit:contain; }
#app #panel .screen-page-row .screen-page-index { top:8px; left:8px; }
#app #panel .type-style-card { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:66px; }
#app #panel .type-style-meta { color:var(--ink-soft); font:400 20px/1 var(--font); }
#app #panel .type-preview { color:var(--ink); }
#app #panel .type-preview-pill { color:#fff; background:var(--coral-action); padding-inline:14px; }
#app #panel .font-row { margin-bottom:6px; }
/* Uploads: one readable asset per row with clear placement actions. */
#app #panel .dropzone { padding:18px 12px; min-height:104px; background:var(--card); border:1px dashed var(--control-border-hover); border-radius:10px; color:var(--ink-soft); }
#app #panel .dropzone .ic { color:var(--coral); }
#app #panel .dropzone b { color:var(--ink); font-size:14px; }
#app #panel .asset-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
#app #panel .asset-item { padding:10px; }
#app #panel .asset-cell { height:112px; aspect-ratio:auto; background:var(--control-bg); border-radius:7px; }
#app #panel .media-asset-info b { font-size:12px; color:var(--ink); }
#app #panel .media-asset-info small { font-size:11px; line-height:1.5; color:var(--ink-soft); }
#app #panel .media-asset-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
#app #panel .media-asset-actions .pbtn { font-size:11px; }
/* Library helpers and background scope use neutral chrome. */
#app #panel .el-loupe-card { padding:12px; margin:0 0 10px; border:1px solid var(--line-w); background:var(--card); border-radius:10px; }
#app #panel .el-loupe-copy span { font-size:12px; color:var(--ink-soft); }
#app #panel .el-cell-name { font:400 10px/1.4 var(--font); color:var(--ink-soft); }
#app #panel .el-group-head { color:var(--ink); font-size:13px; }
#app #panel .backdrop-scope { padding:10px; margin:4px 0 16px; background:var(--card); border:1px solid var(--line-w); border-radius:10px; }
#app #panel .backdrop-scope-label { color:var(--ink); font:600 12px/1.5 var(--font); }
#app #panel .studio-preview { border:1px solid var(--line-w); border-radius:10px; }
/* Device previews keep their colors; finish names remain readable. */
#app #panel .dev-meta b { font-size:12px; }
#app #panel .dev-meta span { font:400 10px/1.4 var(--font); color:var(--ink-soft); text-transform:none; letter-spacing:0; }
#app #panel .dev-fin { background:var(--card); border-color:var(--line-w); }
#app #panel .dev-fin.active { border-color:var(--coral); background:var(--coral-soft); }
#app #panel .dev-fin-name { color:var(--ink); font-size:11px; white-space:normal; }
#app #panel .dev-pose b { font-size:12px; }
#app #panel .dev-pose-sub { font:400 10px/1.4 var(--font); color:var(--ink-soft); letter-spacing:0; text-transform:none; }
#app #panel .dev-poses { margin-top:16px; }
#app #panel .look-card { padding:12px; gap:12px; }
#app #panel .look-card b { color:var(--ink); font-size:14px; }
#app #panel .look-card > span > span { color:var(--ink-soft); font-size:12px; line-height:1.5; }
#app #panel .style-token-shell { padding:0; margin:0; border:0; border-radius:0; background:none; }
#app #panel .style-token-head span { color:var(--ink-soft); font-size:12px; line-height:1.5; }
#app #panel .style-token-head b { display:none; }
#app #panel .fg-chip { min-height:38px; padding:8px 10px; border-color:var(--line-w); background:var(--card); color:var(--ink); font:500 12px/1.4 var(--font); }
#app #panel .fg-chip.on { border-color:var(--coral); background:var(--coral-soft); color:var(--coral); }
#app #panel .fg-preview { border-color:var(--line-w); box-shadow:none; }
#app #panel .fg-source { font-size:12px; color:var(--ink-soft); line-height:1.6; }
#app #panel .ai-mode-btn.active { border-color:var(--coral); color:var(--coral); background:var(--coral-soft); }
#app #panel .ai-task-choice { margin-bottom:12px; }
#app #panel .ai-usage { margin-block:12px; }
@media(max-width:900px) {
  /* Choosing assets needs more room than the former 280px inline drawer cap. */
  #app #panel[data-tool]:not([data-tool="production"]) { position:fixed; height:min(70dvh,720px); max-height:calc(100dvh - 72px)!important; bottom:0; }
  #app #panel #panel-head { padding:14px; }
  #app #panel #panel-sub { white-space:normal; }
}
@media(prefers-reduced-motion:reduce) {
  #app #panel :is(button,.p-card,.dev-card,.dev-pose) { transition:none; }
}

#app #panel .el-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#app #panel .el-tabs button { min-width:0; }
#app #panel .style-token-head { margin-bottom:8px; }
#app #panel .style-token-shell .layers-hint { margin:8px 0; }
#app #panel .style-token-shell .group-command { gap:5px; }
#app #panel .style-token-shell .pbtn { padding:6px; font-size:11px; }
/* Selecting an item opens the inspector in the same sidebar area. */
#app #inspector[data-tool] { --tool:var(--coral); --tool-soft:var(--coral-soft); }
#app #inspector #inspector-head { background:var(--paper); box-shadow:none; }
#app #inspector .ins-label::before { background:var(--coral); }

#app #panel .font-chip { color:var(--ink-soft); border-color:var(--line-w); background:var(--control-bg); min-height:30px; font:500 11px/1.4 var(--font); }
#app #panel .font-chip.active { color:var(--coral); border-color:var(--coral); background:var(--coral-soft); }
#app #panel .font-card { background:var(--card); color:var(--ink); border-color:var(--line-w); border-radius:9px; }
#app #panel .font-card.is-active { border-color:var(--coral); background:var(--coral-soft); }
#app #panel .font-search-input { min-height:40px; font-size:12px; color:var(--ink); border-color:var(--control-border-hover); background:var(--control-bg); }
#app #panel .font-search-input:focus { border-color:var(--coral); box-shadow:none; }
#app #panel .font-card-style { color:var(--ink-soft); }
#app #panel[data-tool="screens"] .p-section { margin-bottom:10px; }
#app #panel[data-tool="screens"] .panel-eyebrow { margin:6px 0 8px; }
:root[data-theme="light"] #app #panel :is(.fchip.active,.font-chip.active,.fg-chip.on) { color:var(--coral-action); }
#app #panel .el-icon-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
#app #panel :is(.el-icon-cell,.el-shape-cell,.el-emoji-cell) { min-width:0; }
#app #panel .el-cell-name { max-width:100%; overflow-wrap:anywhere; }

/* Free/error AI states use the same surfaces as the main Assistant form. */
#app #panel[data-tool="ai"] .ai-error { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; padding:14px; margin-bottom:14px; border:1px solid var(--coral); border-radius:10px; background:var(--card); }
#app #panel[data-tool="ai"] .ai-error > span { width:24px; height:24px; font-size:15px; color:var(--coral); background:var(--coral-soft); }
#app #panel[data-tool="ai"] .ai-error > div { min-width:0; }
#app #panel[data-tool="ai"] .ai-error b { display:block; font:600 13px/1.4 var(--font); color:var(--ink); }
#app #panel[data-tool="ai"] .ai-error p { margin-top:5px; font:400 12px/1.5 var(--font); color:var(--ink-soft); }
#app #panel[data-tool="ai"] .ai-error > button { grid-column:2; justify-self:start; min-height:34px; }
#app #panel[data-tool="ai"] .ai-paywall-card { margin-top:16px; padding:16px; border:1px solid var(--line-w); border-radius:10px; background:var(--card); box-shadow:none; }
#app #panel[data-tool="ai"] .ai-paywall-badge { color:var(--ink); background:var(--control-bg); border-color:var(--line-w); font:600 11px/1.4 var(--font); letter-spacing:0; }
#app #panel[data-tool="ai"] .ai-paywall-title { color:var(--ink); font:700 16px/1.4 var(--font); }
#app #panel[data-tool="ai"] .ai-paywall-desc { font:400 12px/1.5 var(--font); color:var(--ink-soft); }
#app #panel[data-tool="ai"] .ai-paywall-feat { background:var(--control-bg); border-color:var(--line-soft); }
#app #panel[data-tool="ai"] .ai-paywall-feat .feat-icon { color:var(--coral); background:var(--coral-soft); }
#app #panel[data-tool="ai"] .ai-paywall-upgrade-btn { background:var(--coral-action); color:#fff; box-shadow:none; }

/* Group and saved-style actions remain comfortable to tap. */
#app #panel .group-command button,
#app #panel .style-token-actions button,
#app #panel [data-production-action],
#app #panel [data-production-queue] button { min-height:44px; }