/* Plugins dialog (src/ui/plugins-dialog.js) + plugin device blocks (src/ui/plugin-device.js). Prefix: plg- */

.modal.plg-dialog { height: min(760px, calc(100vh - 40px)); }
.plg-dialog .modal-body { display: flex; flex-direction: column; min-height: 0; flex: 1; padding-bottom: 8px; overflow: hidden; }
.plg-dialog-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.plg-dialog-body > .tabs-wrap { flex: 1; min-height: 0; }
.plg-dialog .tab-body { display: flex; flex-direction: column; }
.plg-tab { display: flex; flex-direction: column; gap: 10px; padding: 10px 2px 4px; min-height: 0; flex: 1; }
.plg-msg { min-height: 18px; font-size: 12px; color: var(--text-2); padding: 6px 2px 0; }
.plg-msg[data-level="error"] { color: var(--bad); }
.plg-msg[data-level="warn"] { color: var(--warn); }

.plg-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-3); }
.plg-search { flex: 1; min-width: 220px; }
.plg-count { margin-left: auto; font-size: 12px; color: var(--text-3); }
.plg-search, .plg-url-input, .plg-name-input {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text);
  padding: 6px 9px; font: inherit; outline: none;
}
.plg-search:focus, .plg-url-input:focus, .plg-name-input:focus, .plg-code:focus { border-color: var(--accent); }

.plg-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
  overflow: auto; min-height: 0; flex: 1; padding: 2px 4px 8px 0; align-content: start;
}
.plg-empty { grid-column: 1 / -1; color: var(--text-3); padding: 30px; text-align: center; }
.plg-card, .plg-detected {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px;
  display: flex; flex-direction: column; gap: 5px; border-top: 3px solid var(--plg-kind, var(--accent));
}
.plg-card:hover { border-color: var(--line-2); border-top-color: var(--plg-kind, var(--accent)); }
.plg-kind-faust { --plg-kind: #ff8c42; }
.plg-kind-soundfont { --plg-kind: var(--accent-2); }
.plg-kind-wam { --plg-kind: var(--accent-3); }
.plg-card-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.plg-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 9px; background: var(--bg-4); color: var(--text-2); white-space: nowrap; }
.plg-badge-faust { background: color-mix(in srgb, #ff8c42 22%, transparent); color: #ff9d5c; }
.plg-badge-soundfont { background: color-mix(in srgb, var(--accent-2) 20%, transparent); color: var(--accent-2); }
.plg-badge-wam { background: color-mix(in srgb, var(--accent-3) 20%, transparent); color: var(--accent-3); }
.plg-badge-exp { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
:root[data-theme="light"] .plg-badge-faust { color: #c05a12; }
:root[data-theme="light"] .plg-badge-soundfont { color: #00799a; }
:root[data-theme="light"] .plg-badge-exp { color: #9a6200; }
.plg-cat { margin-left: auto; font-size: 11px; color: var(--text-3); }
.plg-card-name { font-weight: 600; font-size: 14px; }
.plg-card-desc { color: var(--text-2); font-size: 12px; flex: 1; }
.plg-card-meta { color: var(--text-3); font-size: 11px; }
.plg-card-meta a, .plg-doc, .plg-url { color: var(--accent-2); text-decoration: none; }
.plg-card-meta a:hover, .plg-doc:hover, .plg-url:hover { text-decoration: underline; }
.plg-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.plg-actions .btn { padding: 4px 8px; }

.plg-help { margin: 0; color: var(--text-2); }
.plg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plg-row label { color: var(--text-3); font-size: 12px; }
.plg-url-row .plg-url-input { flex: 1; min-width: 260px; font-family: var(--mono); font-size: 12px; }
.plg-examples { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-3); }
.plg-example { background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2); border-radius: 12px; padding: 3px 9px; cursor: pointer; font: inherit; font-size: 11px; }
.plg-example:hover { color: var(--text); border-color: var(--line-2); }
.plg-link-result { min-height: 40px; }
.plg-formats { color: var(--text-2); font-size: 12px; }
.plg-formats summary { cursor: pointer; color: var(--text-3); }
.plg-formats ul { margin: 6px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.plg-formats code, .plg-param { font-family: var(--mono); font-size: 11px; background: var(--bg-3); border-radius: 4px; padding: 1px 4px; }

.plg-stage { display: flex; align-items: center; gap: 8px; color: var(--text-2); padding: 6px 0; }
.plg-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: plg-spin .8s linear infinite; flex-shrink: 0; }
@keyframes plg-spin { to { transform: rotate(360deg); } }
.plg-error { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; font-size: 12px; margin: 0; max-height: 180px; overflow: auto; }
pre.plg-error { font-family: var(--mono); }
.plg-ok { color: var(--good); font-size: 12px; }

.plg-faust .plg-code {
  flex: 1; min-height: 220px; resize: none; background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px; font: 12px/1.5 var(--mono); outline: none; tab-size: 2;
}
.plg-faust-out { display: flex; flex-direction: column; gap: 6px; }
.plg-param-list { display: flex; flex-wrap: wrap; gap: 4px; }
.plg-faust-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.plg-faust-actions .plg-actions { margin: 0; }
.plg-doc { font-size: 12px; margin-left: 4px; }

/* ---- device panel blocks ---- */
.plg-device { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 8px; min-width: 240px; }
.plg-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.plg-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); flex-shrink: 0; }
.plg-source { display: flex; flex-direction: column; min-width: 0; }
.plg-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plg-url { font-size: 11px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.plg-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; min-height: 22px; }
.plg-status .btn { padding: 2px 7px; }
.plg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.plg-status[data-state="ready"] .plg-dot { background: var(--good); }
.plg-status[data-state="loading"] .plg-dot { background: var(--warn); animation: plg-pulse 1s ease-in-out infinite; }
.plg-status[data-state="error"] .plg-dot { background: var(--bad); }
.plg-status[data-state="error"] .plg-status-msg { color: var(--bad); white-space: normal; }
.plg-status-msg { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes plg-pulse { 50% { opacity: .35; } }
.plg-progress { width: 90px; height: 4px; border-radius: 2px; background: var(--bg-4); overflow: hidden; }
.plg-progress-fill { height: 100%; background: var(--accent); transition: width .2s; }
.plg-progress.indeterminate .plg-progress-fill { width: 40% !important; animation: plg-indet 1.1s ease-in-out infinite; }
@keyframes plg-indet { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.plg-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.plg-buttons .btn { padding: 3px 8px; }
.plg-faust-knobs { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.plg-knobs { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.plg-section { display: flex; flex-direction: column; gap: 2px; }
.plg-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.plg-wam-modal .modal-body { display: flex; justify-content: center; }
.plg-wam-gui { min-height: 120px; max-width: 100%; overflow: auto; }
.plg-wam-loading { color: var(--text-2); display: flex; align-items: center; gap: 6px; padding: 30px; }