/* packages/@mach33/ui/static/plugins.css — the Plugins window
   (lib/proto/plugins-view.js, ADR 0069 5a-2, Addendum A: one place, one
   question, one card). House tokens first (shell.css); the fallbacks are the
   retail surface's colours. Rule 10a: appearance lives here. */

.m33-pl { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 48px 16px;
  background: rgba(6,10,20,0.72); }
.m33-pl[hidden] { display: none; }
.m33-pl-box { width: 100%; max-width: 880px; height: min(78vh, 720px); display: grid; grid-template-columns: 180px 1fr;
  background: var(--m33-bg, #0f1420); color: var(--m33-text, #eef2fb); border: 1px solid var(--m33-border, rgba(255,255,255,0.08)); border-radius: 14px; overflow: hidden;
  font: 400 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.m33-pl-side { background: var(--m33-panel, #0d1119); border-right: 1px solid var(--m33-border, rgba(255,255,255,0.07)); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.m33-pl-lbl { font: 600 10.5px/1.2 system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--m33-text-muted, #6d7997); padding: 6px 8px 8px; }
.m33-pl-tab { background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; text-align: left; color: var(--m33-text-muted, #8a93a6);
  font: 500 13px/1.2 system-ui, sans-serif; cursor: pointer; }
.m33-pl-tab:hover { color: var(--m33-text, #eef2fb); }
.m33-pl-on { background: rgba(110,231,168,0.09); border-color: rgba(110,231,168,0.3); color: var(--m33-text, #eef2fb); }
.m33-pl-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.m33-pl-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; border-bottom: 1px solid var(--m33-border, rgba(255,255,255,0.06)); }
.m33-pl-h { font: 600 16px/1.2 system-ui, sans-serif; margin-right: auto; }
.m33-pl-search { width: min(240px, 40%); background: var(--m33-card, #161b26); border: 1px solid var(--m33-border, rgba(255,255,255,0.08)); border-radius: 8px; padding: 6px 10px;
  color: var(--m33-text, #eef2fb); font: 400 12.5px/1.3 system-ui, sans-serif; outline: none; }
.m33-pl-search[hidden] { display: none; }
.m33-pl-search:focus-visible { border-color: rgba(110,231,168,0.45); }
.m33-pl-x { background: none; border: 0; color: var(--m33-text-muted, #8a93a6); font: 400 20px/1 system-ui; padding: 2px 6px; cursor: pointer; }
.m33-pl-x:hover { color: var(--m33-text, #eef2fb); }
.m33-pl-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.m33-pl-lead { margin: 0; color: var(--m33-text-muted, #8a93a6); font-size: 12.5px; }
.m33-pl-sub { font: 600 10.5px/1.2 system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--m33-text-muted, #6d7997); margin-top: 6px; }
.m33-pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.m33-pl-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left;
  background: var(--m33-card, #161b26); border: 1px solid var(--m33-border, rgba(255,255,255,0.07)); border-radius: 10px; padding: 9px 10px; color: inherit; font: inherit; cursor: pointer; }
.m33-pl-card:hover { border-color: rgba(255,255,255,0.16); }
.m33-pl-card:focus-visible, .m33-pl-tab:focus-visible, .m33-pl-back:focus-visible, .m33-pl-btn:focus-visible { outline: 2px solid var(--m33-accent, #6ee7a8); outline-offset: 1px; }
.m33-pl-static { cursor: default; }
.m33-pl-tile { box-sizing: border-box; overflow: hidden; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #232a3a; color: #cfd6e6;
  font: 700 13px/1 system-ui, sans-serif; }
.m33-pl-tile-lg { width: 44px; height: 44px; border-radius: 11px; font-size: 18px; }
.m33-pl-tile-worker { background: #3a4150; }
/* A vendor's mark sits on white, as the vendors draw them (dark marks like GitHub and X stay legible). */
.m33-pl-tile-logo { background: #fff; padding: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.m33-pl-tile-lg.m33-pl-tile-logo { padding: 9px; }
.m33-pl-tile-logo img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.m33-pl-meta { display: flex; flex-direction: column; min-width: 0; }
.m33-pl-name { font-weight: 600; font-size: 13px; }
.m33-pl-name-lg { font-size: 17px; }
.m33-pl-what { color: var(--m33-text-muted, #8a93a6); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m33-pl-state { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.m33-pl-st-on { background: rgba(110,231,168,0.14); color: var(--m33-good, #6ee7a8); }
.m33-pl-st-wait { background: rgba(61,107,216,0.18); color: #9db8f5; }
.m33-pl-st-add { background: #232a3a; color: var(--m33-text, #eef2fb); }
.m33-pl-st-blocked { background: rgba(229,72,77,0.13); color: #f19a9d; }
.m33-pl-st-soon { background: rgba(224,180,92,0.13); color: var(--m33-warn, #e0b45c); }
.m33-pl-empty { color: var(--m33-text-muted, #8a93a6); font-size: 12.5px; padding: 4px 0; }
.m33-pl-err { color: var(--m33-warn, #e0b45c); }
.m33-pl-back { align-self: flex-start; background: none; border: 0; color: var(--m33-text-muted, #8a93a6); padding: 0; font: 500 12.5px/1.4 system-ui, sans-serif; cursor: pointer; }
.m33-pl-back:hover { color: var(--m33-text, #eef2fb); }
.m33-pl-page-h { display: flex; gap: 12px; align-items: center; }
.m33-pl-page-h .m33-pl-what { white-space: normal; }
.m33-pl-q { border: 1px solid var(--m33-border, rgba(255,255,255,0.08)); border-radius: 10px; padding: 10px 12px; margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; }
.m33-pl-q legend { padding: 0 4px; color: var(--m33-text-muted, #8a93a6); font-size: 12.5px; }
.m33-pl-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.m33-pl-opt:hover { background: #141a26; }
.m33-pl-opt:has(input:checked) { background: rgba(110,231,168,0.07); border-color: rgba(110,231,168,0.3); }
.m33-pl-opt input { margin-top: 3px; accent-color: var(--m33-accent, #6ee7a8); }
.m33-pl-opt > span { display: flex; flex-direction: column; gap: 1px; }
.m33-pl-hint { color: var(--m33-text-muted, #8a93a6); font-size: 12px; }
.m33-pl-status { font-size: 12.5px; color: var(--m33-text, #eef2fb); min-height: 18px; }
.m33-pl-note, .m33-pl-where, .m33-pl-by { color: var(--m33-text-muted, #6d7997); font-size: 12px; }
.m33-pl-why { border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.m33-pl-why-blocked { background: rgba(229,72,77,0.08); border: 1px solid rgba(229,72,77,0.28); }
.m33-pl-why-soon { background: rgba(224,180,92,0.08); border: 1px solid rgba(224,180,92,0.28); }
.m33-pl-op { border-top: 1px solid var(--m33-border, rgba(255,255,255,0.06)); margin-top: 8px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.m33-pl-op-l { color: var(--m33-text-muted, #8a93a6); font-size: 12.5px; }
.m33-pl-reason { background: var(--m33-card, #161b26); border: 1px solid var(--m33-border, rgba(255,255,255,0.08)); border-radius: 8px; padding: 8px 10px; color: var(--m33-text, #eef2fb);
  font: 400 13px/1.4 system-ui, sans-serif; resize: vertical; outline: none; }
.m33-pl-reason:focus-visible { border-color: rgba(110,231,168,0.45); }
.m33-pl-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.m33-pl-btn { align-self: flex-start; background: var(--m33-text, #eef2fb); color: var(--m33-bg, #0d1119); border: 0; border-radius: 8px; padding: 7px 12px;
  font: 600 12px/1 system-ui, sans-serif; cursor: pointer; }
.m33-pl-btn:disabled { opacity: .5; cursor: default; }
.m33-pl-ghost { background: transparent; color: var(--m33-text, #eef2fb); border: 1px solid var(--m33-border, rgba(255,255,255,0.12)); }
.m33-pl-danger { background: var(--m33-bad, #e5484d); color: #fff; }
.m33-pl-op-msg { color: var(--m33-warn, #e0b45c); font-size: 12px; min-height: 16px; }
.m33-pl-list { display: flex; flex-direction: column; }
.m33-pl-row { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--m33-border, rgba(255,255,255,0.05)); }
.m33-pl-row .m33-pl-what { white-space: normal; }
@media (max-width: 640px) {
  .m33-pl-box { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 88vh; }
  .m33-pl-side { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--m33-border, rgba(255,255,255,0.07)); overflow-x: auto; }
  .m33-pl-lbl { display: none; }
  .m33-pl-grid { grid-template-columns: 1fr; }
}

/* The one card in the conversation (Addendum A): allow this · a new file inline. */
.m33-pl-chatcard { align-self: flex-start; width: min(560px, 100%); margin: 6px 0 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  background: var(--m33-card, #161b26); color: var(--m33-text, #eef2fb); border: 1px solid var(--m33-border, rgba(255,255,255,0.1)); border-radius: 12px;
  font: 400 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.m33-pl-chatcard-h { display: flex; align-items: center; gap: 10px; }
.m33-pl-chatcard-t { font-weight: 600; }
.m33-pl-chatcard-arg { color: var(--m33-text-muted, #8a93a6); font-size: 12.5px; overflow-wrap: anywhere; }
.m33-pl-embed { align-self: flex-start; width: min(var(--m33-read-col), 100%); margin: 6px 0 10px; border: 1px solid var(--m33-border, rgba(255,255,255,0.1)); border-radius: 12px; overflow: hidden;
  background: var(--m33-card, #161b26); }
.m33-pl-chatcard .m33-pl-embed { margin: 4px 0 0; width: 100%; }
.m33-pl-embed-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--m33-border, rgba(255,255,255,0.08)); }
.m33-pl-embed-bar .m33-pl-name { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m33-pl-embed-open { color: var(--m33-accent, #6ee7a8); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.m33-pl-embed-open:hover { text-decoration: underline; }
.m33-pl-embed-frame { display: block; width: 100%; height: 520px; border: 0; background: #fff; }
.m33-pl-embed-slides { height: auto; aspect-ratio: 16 / 9.6; }

/* Bots tab: a switch per agent for the person's own tray. */
.m33-pl-tag { font: 500 10.5px/1 system-ui, sans-serif; color: var(--m33-text-muted, #8a93a6); margin-left: 4px; }
.m33-pl-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.m33-pl-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m33-pl-switch-track { width: 34px; height: 20px; border-radius: 999px; background: var(--m33-card, #2a3242); border: 1px solid var(--m33-border, rgba(255,255,255,0.12)); position: relative; transition: background .15s; }
.m33-pl-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--m33-text-muted, #cfd6e6); transition: transform .15s; }
.m33-pl-switch input:checked + .m33-pl-switch-track { background: var(--m33-accent, #6ee7a8); border-color: transparent; }
.m33-pl-switch input:checked + .m33-pl-switch-track::after { transform: translateX(14px); background: var(--m33-bg, #0d1119); }
.m33-pl-switch input:focus-visible + .m33-pl-switch-track { outline: 2px solid var(--m33-accent, #6ee7a8); outline-offset: 2px; }
.m33-pl-switch input:disabled + .m33-pl-switch-track { opacity: .5; }
.m33-pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .m33-pl-switch-track, .m33-pl-switch-track::after { transition: none; } }