@browserbridge/bbx 1.0.1 → 1.1.0

package/packages/extension/ui/ui.css

@@ -1,1160 +0,0 @@
-:root {
-  color-scheme: light dark;
-  --bg: #faf7f5;
-  --panel: #ffffff;
-  --ink: #1a1d23;
-  --fg: #1a1d23;
-  --muted: #7a7068;
-  --accent: #d34a1e;
-  --accent-strong: #b33e18;
-  --update-bg: #4b8a6e;
-  --update-bg-hover: #3d7259;
-  --stroke: #e8e3de;
-  --cmd-bg: rgba(128, 112, 100, 0.07);
-  --cmd-bg-hover: rgba(128, 112, 100, 0.12);
-  --card-shadow: rgba(0, 0, 0, 0.04);
-  --disabled-bg: #c8c3be;
-  --hist-surface-top: rgba(255, 255, 255, 0.38);
-  --hist-surface-bottom: rgba(255, 255, 255, 0.12);
-  --hist-border: rgba(226, 229, 234, 0.72);
-  --hist-bar-bg: rgba(107, 114, 128, 0.13);
-  --hist-bar-border: rgba(107, 114, 128, 0.18);
-  --hist-dom: rgba(59, 108, 206, 0.82);
-  --hist-page: rgba(45, 86, 168, 0.7);
-  --hist-layout: rgba(75, 138, 110, 0.8);
-  --hist-style: rgba(96, 165, 136, 0.7);
-  --hist-input: rgba(107, 114, 128, 0.75);
-  --hist-patch: rgba(168, 137, 88, 0.88);
-  --hist-capture: rgba(196, 160, 98, 0.9);
-  --hist-other: rgba(107, 114, 128, 0.35);
-}
-
-[hidden] {
-  display: none !important;
-}
-
-html {
-  min-height: 100%;
-  background: var(--bg);
-}
-
-html[data-windowed="true"] {
-  min-height: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #1a1816;
-    --panel: #222018;
-    --ink: #e8e2da;
-    --fg: #e8e2da;
-    --muted: #9a9088;
-    --accent: #e8673f;
-    --accent-strong: #f08050;
-    --update-bg: #5ea882;
-    --update-bg-hover: #72bf96;
-    --stroke: #352f2a;
-    --cmd-bg: rgba(255, 248, 240, 0.06);
-    --cmd-bg-hover: rgba(255, 248, 240, 0.10);
-    --card-shadow: rgba(0, 0, 0, 0.3);
-    --disabled-bg: #3d3a34;
-    --hist-surface-top: rgba(224, 226, 232, 0.08);
-    --hist-surface-bottom: rgba(224, 226, 232, 0.02);
-    --hist-border: rgba(139, 144, 160, 0.2);
-    --hist-bar-bg: rgba(224, 226, 232, 0.12);
-    --hist-bar-border: rgba(224, 226, 232, 0.18);
-    --hist-dom: #6b9bef;
-    --hist-page: #5580d0;
-    --hist-layout: #5ea882;
-    --hist-style: #4d9070;
-    --hist-input: #8b90a0;
-    --hist-patch: #c5a66e;
-    --hist-capture: #ddb87a;
-    --hist-other: rgba(139, 144, 160, 0.45);
-  }
-
-  html {
-    background: var(--bg);
-  }
-}
-
-body {
-  margin: 0;
-  height: 100vh;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  background: transparent;
-  color: var(--ink);
-  overflow: hidden;
-  border-radius: 8px;
-}
-
-body[data-windowed="true"] {
-  height: auto;
-  overflow: visible;
-}
-
-.panel {
-  min-width: 0;
-  min-height: 160px;
-  padding: 14px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-body[data-windowed="true"] .panel {
-  height: auto;
-  min-height: 0;
-  overflow: visible;
-}
-
-body[data-windowed="true"] .panel-popup {
-  min-height: 0;
-}
-
-.panel-popup {
-  min-width: 380px;
-  min-height: 240px;
-  padding-top: 12px;
-  padding-bottom: 14px;
-  border-radius: 8px;
-}
-
-.panel-wide {
-  width: 100%;
-  max-width: none;
-  flex: 1 1 auto;
-}
-
-.panel section + section {
-  margin-top: 12px;
-}
-
-.panel header {
-  margin-bottom: 12px;
-}
-
-.panel header.panel-header-compact {
-  margin-bottom: 4px;
-}
-
-.panel-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.panel-header-compact {
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-}
-
-.panel-header-compact .header-status-indicator[data-connected="true"] {
-  display: none;
-}
-
-.stack {
-  display: grid;
-  gap: 8px;
-}
-
-.card {
-  padding: 10px 12px;
-  border: 1px solid var(--stroke);
-  border-radius: 8px;
-  background: var(--panel);
-  box-shadow: 0 1px 3px var(--card-shadow);
-  overflow-wrap: anywhere;
-  flex-shrink: 0;
-}
-
-.activity-card {
-  padding: 8px 10px 6px 10px;
-  border-radius: 6px;
-  box-shadow: 0 1px 2px var(--card-shadow);
-}
-
-.card-title {
-  margin: 0;
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-.activity-title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.activity-method {
-  display: block;
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.activity-source-tag {
-  flex-shrink: 0;
-  padding: 1px 5px;
-  border-radius: 3px;
-  background: var(--cmd-bg);
-  color: var(--muted);
-  font-size: 9px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.popup-title {
-  margin: 0;
-  max-width: 360px;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.15;
-  letter-spacing: -0.01em;
-}
-
-.eyebrow {
-  margin: 0 0 6px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.muted {
-  margin: 0 0 10px;
-  color: var(--muted);
-  overflow-wrap: anywhere;
-}
-
-.control-card {
-  display: grid;
-  gap: 0;
-}
-
-.control-copy {
-  display: grid;
-  gap: 6px;
-}
-
-.control-heading {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.control-heading .eyebrow {
-  margin: 0;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.control-detail {
-  margin: 0;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.control-disclosure {
-  color: var(--muted);
-}
-
-.control-links {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 10px;
-  margin-bottom: 0;
-  justify-content: flex-end;
-  flex: 0 0 auto;
-}
-
-@keyframes attention-pulse {
-  0%   { box-shadow: 0 0 0 0 rgba(211, 74, 30, 0.4); }
-  30%  { box-shadow: 0 0 0 3px rgba(211, 74, 30, 0.2); }
-  60%  { box-shadow: 0 0 0 0 rgba(211, 74, 30, 0.4); }
-  100% { box-shadow: 0 0 0 0 rgba(211, 74, 30, 0.4); }
-}
-
-.control-card.attention {
-  animation: attention-pulse 0.9s ease-out infinite;
-}
-
-.popup-control-card {
-  margin-top: 2px;
-  padding-right: 12px;
-  padding-left: 12px;
-}
-
-.panel-popup .panel-header {
-  margin-bottom: 8px;
-}
-
-.activity-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.activity-footer {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 3px;
-}
-
-.activity-badges {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 4px;
-  flex: 0 1 auto;
-  max-width: 100%;
-  min-width: 0;
-  justify-content: flex-end;
-  margin-left: auto;
-}
-
-.activity-time {
-  margin: 0;
-  font-size: 11px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.activity-tokens {
-  margin: 0;
-  font-size: 10px;
-  flex: 0 1 auto;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: right;
-  line-height: 1.25;
-  padding: 1px 5px;
-  border-radius: 3px;
-  background: var(--panel);
-  border: 1px solid var(--stroke);
-  letter-spacing: 0.01em;
-}
-
-.activity-tokens[data-cost-class="heavy"],
-.activity-tokens[data-cost-class="extreme"] {
-  background: rgba(209, 17, 68, 0.1);
-  color: var(--ink);
-}
-
-.activity-badge {
-  margin: 0;
-  font-size: 10px;
-  white-space: nowrap;
-  padding: 1px 5px;
-  border-radius: 3px;
-  letter-spacing: 0.02em;
-}
-
-.activity-badge-neutral {
-  background: var(--cmd-bg);
-  color: var(--muted);
-}
-
-.activity-badge-warn {
-  background: rgba(209, 17, 68, 0.1);
-  color: var(--ink);
-}
-
-.activity-hint {
-  margin: 6px 0 0;
-  font-size: 11px;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  white-space: normal;
-}
-
-.activity-scope-link {
-  color: var(--muted);
-  opacity: 0.5;
-  transition: opacity 0.15s;
-  line-height: 0;
-  vertical-align: middle;
-  margin-left: 3px;
-}
-
-.activity-scope-link:hover {
-  opacity: 1;
-}
-
-.activity-summary {
-  display: flex;
-  align-items: flex-start;
-  flex: 1 1 auto;
-  min-width: 0;
-  gap: 4px;
-  font-size: 11px;
-  line-height: 1.3;
-  color: var(--muted);
-}
-
-.activity-summary > span:last-child {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.activity-summary.activity-summary-error > span:last-child {
-  color: var(--ink);
-}
-
-.activity-status-dot {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #3faa6f;
-  flex-shrink: 0;
-  margin-top: 4px;
-}
-
-.activity-status-dot[data-ok="false"] {
-  background: #c44;
-}
-
-.setup-status-note {
-  margin-bottom: 10px;
-  font-size: 12px;
-}
-
-.setup-status-note[hidden] {
-  display: none;
-}
-
-.setup-status-item,
-.setup-status-placeholder {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 7px 9px;
-  border-radius: 6px;
-  background: var(--cmd-bg);
-}
-
-.setup-status-copy {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-
-.setup-status-label {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.setup-status-detail,
-.setup-status-placeholder {
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.35;
-}
-
-.setup-status-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: 4px;
-  padding: 2px 6px;
-  font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  background: rgba(209, 17, 68, 0.1);
-  color: #c44;
-  white-space: nowrap;
-}
-
-.setup-status-badge[data-ok="true"] {
-  background: rgba(45, 138, 87, 0.1);
-  color: #2d8a57;
-}
-
-.setup-status-matrix-wrap {
-  margin-top: 4px;
-  overflow-x: auto;
-}
-
-.setup-status-guidance {
-  margin: 10px 0 0;
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.45;
-}
-
-.setup-status-matrix {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: auto;
-}
-
-.setup-status-matrix th:first-child,
-.setup-status-matrix td:first-child {
-  width: 100%;
-}
-
-.setup-status-matrix th:nth-child(2),
-.setup-status-matrix td:nth-child(2),
-.setup-status-matrix th:nth-child(3),
-.setup-status-matrix td:nth-child(3) {
-  width: 60px;
-  min-width: 60px;
-  white-space: nowrap;
-}
-
-.setup-status-matrix th,
-.setup-status-matrix td {
-  padding: 8px 6px;
-  text-align: left;
-  vertical-align: middle;
-  border-top: 1px solid var(--stroke);
-  white-space: nowrap;
-}
-
-.setup-status-matrix thead th {
-  padding-top: 8px;
-  border-top: 1px solid var(--stroke);
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.setup-matrix-client {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.setup-matrix-beta {
-  color: #9aa0a6;
-  font-weight: 500;
-}
-
-.setup-matrix-muted {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.setup-install-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 0;
-  padding: 4px 10px;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.1;
-  white-space: nowrap;
-  border-radius: 4px;
-}
-
-.setup-install-button[data-variant="update"] {
-  background: var(--update-bg);
-}
-
-.setup-install-button[data-variant="update"]:hover {
-  background: var(--update-bg-hover);
-}
-
-.setup-install-button:disabled {
-  background: var(--disabled-bg);
-  cursor: progress;
-}
-
-.setup-context-menu {
-  position: fixed;
-  z-index: 1000;
-  min-width: 190px;
-  padding: 4px;
-  border: 1px solid var(--stroke);
-  border-radius: 8px;
-  background: var(--panel);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-}
-
-.setup-context-menu[hidden] {
-  display: none;
-}
-
-.setup-context-menu-item {
-  width: 100%;
-  justify-content: flex-start;
-  padding: 6px 10px;
-  font-size: 12px;
-  text-align: left;
-  background: transparent;
-  color: var(--fg);
-  border-radius: 6px;
-}
-
-.setup-context-menu-item:hover {
-  background: var(--cmd-bg-hover);
-}
-
-.status-line {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin: 0;
-  color: var(--muted);
-  font-size: 14px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: #d14;
-  box-shadow: 0 0 0 3px rgba(209, 17, 68, 0.12);
-  flex: 0 0 auto;
-}
-
-.status-dot[data-connected="true"] {
-  background: #2d8a57;
-  box-shadow: 0 0 0 3px rgba(45, 138, 87, 0.12);
-}
-
-.header-status-indicator {
-  margin-top: 0;
-  cursor: help;
-}
-
-.toggle-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.toggle-row input[type="checkbox"] {
-  width: 42px;
-  height: 24px;
-  accent-color: var(--accent);
-}
-
-button {
-  margin-right: 8px;
-  border: 0;
-  border-radius: 6px;
-  padding: 7px 14px;
-  font-size: 13px;
-  font-weight: 500;
-  background: var(--accent);
-  color: white;
-  cursor: pointer;
-  transition: background 0.12s;
-}
-
-button:hover {
-  background: var(--accent-strong);
-}
-
-.popup-action {
-  margin-top: 10px;
-  width: 100%;
-  margin-right: 0;
-}
-
-.popup-power-button {
-  min-height: 40px;
-  font-size: 14px;
-  font-weight: 600;
-  border-radius: 6px;
-}
-
-.popup-power-button[data-pending="true"] {
-  opacity: 0.7;
-  cursor: wait;
-  pointer-events: none;
-}
-
-.power-button {
-  width: 100%;
-  min-height: 40px;
-  margin-top: 10px;
-  margin-right: 0;
-  font-size: 14px;
-  font-weight: 600;
-  border-radius: 6px;
-}
-
-.power-button:disabled {
-  background: var(--disabled-bg);
-  cursor: not-allowed;
-}
-
-.power-button[data-pending="true"] {
-  opacity: 0.7;
-  cursor: wait;
-  pointer-events: none;
-}
-
-.toggle-error {
-  margin: 6px 0 0;
-  padding: 6px 10px;
-  background: var(--status-badge-bg, #fef3cd);
-  color: var(--text-primary, #856404);
-  border-radius: 6px;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.setup-steps {
-  display: grid;
-  gap: 6px;
-  margin-bottom: 12px;
-}
-
-.examples-eyebrow {
-  margin-bottom: 8px;
-}
-
-.examples-list {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.examples-content {
-  display: grid;
-  gap: 0px;
-  padding-top: 12px;
-}
-
-.examples-group {
-  display: grid;
-  gap: 4px;
-}
-
-.examples-group-title {
-  margin: 0;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.example-cmd {
-  width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  user-select: none;
-}
-
-.example-cmd::after {
-  display: none;
-}
-
-.example-cmd-text {
-  display: block;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-  font-size: 11px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: normal;
-  user-select: none;
-}
-
-.example-copy-button {
-  position: absolute;
-  right: 6px;
-  top: 6px;
-  border: 0;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  font-size: 14px;
-  font-family: system-ui, sans-serif;
-  line-height: 1;
-  color: var(--muted);
-  cursor: pointer;
-}
-
-.example-copy-button:hover {
-  background: transparent;
-  color: var(--muted);
-}
-
-.example-copy-button:focus-visible {
-  outline: 1px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.setup-step-hint {
-  display: block;
-  font-size: 11px;
-  color: var(--muted);
-  margin-top: 6px;
-}
-
-.setup-step-hint:first-child {
-  margin-top: 0;
-}
-
-.setup-cmd {
-  display: block;
-  position: relative;
-  padding: 6px 10px;
-  padding-right: 28px;
-  border-radius: 4px;
-  background: var(--cmd-bg);
-  border: 1px solid var(--stroke);
-  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
-  font-size: 11.5px;
-  color: var(--ink);
-  cursor: pointer;
-  word-break: break-all;
-  user-select: none;
-}
-
-.setup-cmd:hover {
-  background: var(--cmd-bg-hover);
-}
-
-.setup-cmd::after {
-  content: '⧉';
-  position: absolute;
-  right: 6px;
-  top: 6px;
-  font-size: 14px;
-  font-family: system-ui, sans-serif;
-  color: var(--muted);
-  user-select: none;
-  line-height: 1;
-}
-
-.setup-cmd:hover::after {
-  color: var(--ink);
-}
-
-.setup-cmd.copied {
-  background: rgba(45, 138, 87, 0.07);
-  border-color: rgba(45, 138, 87, 0.25);
-}
-
-.setup-cmd.copied::after {
-  content: '✓';
-  color: #2d8a57;
-}
-
-.setup-link {
-  font-size: 12px;
-  color: var(--accent);
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.setup-link:hover {
-  text-decoration: underline;
-}
-
-/* Activity section: fill remaining space & scroll */
-#activity-section {
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  margin-top: 12px;
-}
-
-.activity-histogram {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin: 0 0 10px;
-  padding: 8px 10px 10px;
-  border: 1px solid var(--hist-border);
-  border-radius: 8px;
-  background: var(--panel);
-  box-shadow: 0 1px 3px var(--card-shadow);
-  flex-shrink: 0;
-}
-
-.activity-histogram-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.activity-histogram-label {
-  margin: 0;
-}
-
-.activity-histogram-range {
-  margin: 0;
-  font-size: 10px;
-  line-height: 1.1;
-  letter-spacing: 0.03em;
-  opacity: 0.58;
-  white-space: nowrap;
-}
-
-.activity-histogram-bars {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, 1fr);
-  align-items: end;
-  gap: 4px;
-  height: 58px;
-  padding-top: 2px;
-}
-
-.activity-histogram-bar {
-  display: flex;
-  flex-direction: column-reverse;
-  justify-content: flex-start;
-  min-width: 0;
-  min-height: 8px;
-  overflow: hidden;
-  background: var(--hist-bar-bg);
-  border: 1px solid var(--hist-bar-border);
-  opacity: 0.9;
-}
-
-.activity-histogram-bar[data-empty="true"] {
-  opacity: 0.42;
-}
-
-.activity-histogram-segment {
-  display: block;
-  width: 100%;
-  min-height: 2px;
-}
-
-.activity-histogram-segment[data-family="dom"] {
-  background: var(--hist-dom);
-}
-
-.activity-histogram-segment[data-family="page"] {
-  background: var(--hist-page);
-}
-
-.activity-histogram-segment[data-family="layout"] {
-  background: var(--hist-layout);
-}
-
-.activity-histogram-segment[data-family="style"] {
-  background: var(--hist-style);
-}
-
-.activity-histogram-segment[data-family="input"] {
-  background: var(--hist-input);
-}
-
-.activity-histogram-segment[data-family="patch"] {
-  background: var(--hist-patch);
-}
-
-.activity-histogram-segment[data-family="capture"] {
-  background: var(--hist-capture);
-}
-
-.activity-histogram-segment[data-family="other"] {
-  background: var(--hist-other);
-}
-
-.activity-section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin: 0 0 8px;
-  flex-shrink: 0;
-}
-
-#activity-section h2 {
-  margin: 0;
-  font-size: 15px;
-  flex-shrink: 0;
-}
-
-.activity-summary-tokens {
-  font-size: 10px;
-  line-height: 1.2;
-  color: var(--muted);
-  white-space: nowrap;
-  padding: 2px 7px;
-  border-radius: 4px;
-  background: var(--panel);
-  border: 1px solid var(--stroke);
-  letter-spacing: 0.02em;
-}
-
-.activity-summary-tokens[data-cost-class="heavy"],
-.activity-summary-tokens[data-cost-class="extreme"] {
-  background: rgba(209, 17, 68, 0.1);
-  color: var(--ink);
-}
-
-#activity-section .stack {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 4px;
-  align-content: start;
-}
-
-#activity-section .stack::-webkit-scrollbar {
-  width: 4px;
-}
-#activity-section .stack::-webkit-scrollbar-thumb {
-  background: var(--stroke);
-  border-radius: 2px;
-}
-
-/* Collapsible examples section */
-.examples-details,
-.setup-details {
-  flex-shrink: 0;
-  margin-top: 12px;
-}
-
-.setup-details,
-.setup-details * {
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.examples-details summary,
-.setup-details summary {
-  cursor: pointer;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.examples-details summary::-webkit-details-marker,
-.setup-details summary::-webkit-details-marker {
-  display: none;
-}
-
-.examples-details summary .eyebrow,
-.setup-details summary .eyebrow {
-  margin: 0;
-}
-
-.examples-details summary::after {
-  content: '\25B6';
-  font-size: 8px;
-  color: var(--muted);
-  transition: transform 0.15s;
-}
-
-.examples-details[open] summary::after {
-  transform: rotate(90deg);
-}
-
-.setup-details summary {
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-}
-
-.setup-details-summary-heading {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.setup-details-summary-icon::before {
-  content: '\25B6';
-  font-size: 8px;
-  color: var(--muted);
-  transition: transform 0.15s;
-  display: inline-block;
-}
-
-.setup-details[open] .setup-details-summary-icon::before {
-  transform: rotate(90deg);
-}
-
-.setup-summary-note {
-  margin-left: auto;
-  color: var(--muted);
-  opacity: 0.72;
-  font-size: 12px;
-  flex: 1 1 auto;
-  min-width: 0;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.setup-details:not([open]) .setup-summary-note {
-  display: none;
-}
-
-.examples-details .examples-list,
-.setup-details .setup-details-body {
-  margin-top: 8px;
-}
-
-@media (max-width: 360px) {
-  .panel {
-    padding: 10px;
-  }
-
-  .panel header {
-    margin-bottom: 10px;
-  }
-
-  .panel-header {
-    gap: 8px;
-  }
-
-  .panel-header h1 {
-    margin: 0;
-    font-size: 16px;
-    line-height: 1.15;
-  }
-
-  .card {
-    padding: 8px 10px;
-  }
-
-  .control-card {
-    gap: 0;
-  }
-
-  .power-button {
-    min-height: 36px;
-    font-size: 13px;
-  }
-
-  .stack {
-    gap: 6px;
-  }
-}