/* Canva v217: contextual Search & asset tools and Assets group affordances. */
.guided-asset-drawer-kicker {
 font-family: "Permutrix UI Inter", "Inter", system-ui, "Segoe UI", sans-serif;
 font-size: 13px;
 font-weight: 400;
 color: #d8dee9;
 letter-spacing: 0;
 text-transform: none;
}

html[data-theme="light"] .guided-asset-drawer-kicker { color: #283142; }

.asset-tools-popover {
 position: fixed;
 z-index: 80;
 box-sizing: border-box;
 width: min(460px, calc(100vw - 32px));
 max-height: calc(100vh - 32px);
 overflow-x: hidden;
 overflow-y: auto;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: 10px;
 background: var(--editor-panel, var(--bg-panel));
 color: var(--text-main);
 box-shadow: 0 18px 48px rgba(5, 8, 14, .42);
 font-family: "Permutrix UI Inter", "Inter", system-ui, "Segoe UI", sans-serif;
 font-size: 13px;
 scrollbar-width: thin;
 scrollbar-color: #737b88 color-mix(in srgb, var(--border) 44%, transparent);
}

.asset-tools-popover[hidden] { display: none; }
.asset-tools-popover::-webkit-scrollbar { width: 8px; }
.asset-tools-popover::-webkit-scrollbar-track { background: color-mix(in srgb, var(--border) 44%, transparent); }
.asset-tools-popover::-webkit-scrollbar-thumb { border-radius: 8px; background: #737b88; }

.asset-tools-popover-head {
 min-height: 40px;
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 7px 8px 7px 16px;
 border-bottom: 1px solid var(--border);
}

.asset-tools-popover-head h2 {
 flex: 1 1 auto;
 min-width: 0;
 margin: 0;
 font: inherit;
 font-size: 15px;
 font-weight: 600;
}

.asset-tools-popover-head .btn.icon-only {
 width: 36px;
 min-width: 36px;
 height: 36px;
 min-height: 36px;
 padding: 0;
 border: 0;
 background: transparent;
 font-size: 20px;
}

#viewEditor .asset-tools-popover-head .btn.icon-only {
 width: 36px;
 min-width: 36px;
 height: 36px;
 min-height: 36px;
}

.asset-tools-scope {
 margin: 0;
 padding: 10px 16px 0;
 color: var(--text-muted);
 font-size: 12px;
 overflow-wrap: anywhere;
}

.asset-tools-popover .asset-tools {
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding: 10px 16px 16px;
 border: 0;
 background: transparent;
}

.asset-tools-popover .asset-tools-group { gap: 8px; }
.asset-tools-popover .asset-tools-search-row { gap: 8px; }
.asset-tools-popover .asset-tools input.compact { min-height: 36px; font-size: 13px; }
.asset-tools-popover .asset-tools .btn.sm {
 min-height: 36px;
 padding: 7px 11px;
 border-color: var(--border);
 background: var(--card);
 font-size: 13px;
 font-weight: 550;
}

#viewEditor .asset-tools-popover .asset-tools input.compact,
#viewEditor .asset-tools-popover .asset-tools .btn.sm {
 height: 36px;
 min-height: 36px;
}

.asset-tools-popover #btnAssetSearchClear {
 width: 36px;
 min-width: 36px;
 padding: 0;
 border-color: transparent;
 background: transparent;
 font-size: 19px;
}

.asset-tools-popover :is(button, input, summary):focus-visible {
 outline: 2px solid var(--primary);
 outline-offset: 2px;
}

.asset-tools-metrics {
 min-height: 20px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 color: var(--text-muted);
 font-size: 12px;
}

.asset-tools-popover .asset-tools-selection-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.asset-tools-popover .asset-tools-selection-row .asset-tools-status { margin-left: 0; }
.asset-tools-view-options {
 width: 100%;
 display: flex;
 align-items: center;
 gap: 18px;
 padding: 2px 0;
 color: var(--text-muted);
}
.asset-tools-view-options .chk { min-height: 36px; display: inline-flex; align-items: center; }

.asset-tools-section {
 border-top: 1px solid var(--border);
 padding-top: 4px;
}

.asset-tools-section > summary {
 min-height: 40px;
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 padding: 0 2px;
 color: var(--text-main);
 cursor: pointer;
 list-style: none;
 user-select: none;
}

.asset-tools-section > summary::-webkit-details-marker { display: none; }
.asset-tools-section-chevron { width: 16px; height: 16px; display: inline-flex; color: var(--text-muted); }
.asset-tools-section-chevron svg { width: 16px; height: 16px; transition: transform 120ms ease; }
.asset-tools-section[open] .asset-tools-section-chevron svg { transform: rotate(90deg); }
.asset-tools-section-title { flex: 1 1 auto; font-weight: 600; }
.asset-tools-reroll-state { color: var(--text-muted); font-size: 12px; }
#viewEditor .asset-tools-popover .asset-tools-section-title { min-width: 0; white-space: nowrap; }
#viewEditor .asset-tools-popover .asset-tools-reroll-state { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.asset-tools-section-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px 24px; }
.asset-tools-target-info,
.asset-tools-reroll-help { margin: 0; color: var(--text-muted); font-size: 12px; }
.asset-tools-popover .asset-tools-filename-row { gap: 8px; }
.asset-tools-popover .asset-tools-tags-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.asset-tools-popover .asset-tools-tags-row input { grid-column: 1 / -1; }
.asset-tools-popover .asset-tools-reroll-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }

.guided-asset-layer-chevron {
 width: 16px;
 height: 16px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 color: var(--text-muted);
 font-size: 0;
 font-weight: 400;
}
.guided-asset-layer-chevron svg { width: 16px; height: 16px; }

.guided-asset-workspace-list,
#viewEditor.guided-studio .guided-asset-drawer .thumbGrid {
 scrollbar-width: thin;
 scrollbar-color: #737b88 color-mix(in srgb, var(--border) 38%, transparent);
}
.guided-asset-workspace-list::-webkit-scrollbar,
#viewEditor.guided-studio .guided-asset-drawer .thumbGrid::-webkit-scrollbar { width: 8px; }
.guided-asset-workspace-list::-webkit-scrollbar-track,
#viewEditor.guided-studio .guided-asset-drawer .thumbGrid::-webkit-scrollbar-track {
 background: color-mix(in srgb, var(--border) 38%, transparent);
}
.guided-asset-workspace-list::-webkit-scrollbar-thumb,
#viewEditor.guided-studio .guided-asset-drawer .thumbGrid::-webkit-scrollbar-thumb {
 border-radius: 8px;
 background: #737b88;
}

@media (max-width: 560px) {
 .asset-tools-popover { width: calc(100vw - 32px); }
 .asset-tools-popover .asset-tools-tags-row { grid-template-columns: 1fr 1fr; }
 .asset-tools-popover .asset-tools-reroll-row { grid-template-columns: 1fr; }
}