/* TlbxMacros (shared/macros/panel.js): the Macros panel and the recording bar. The colours are TlbxUI's (--sui-*), then the
 * app's own tokens, then the page theme (--sl-*), the same chain as tlbxui.css, so the panel matches each app. */
.smac, .smac-bar {
  --m-bg: var(--sui-bg2, var(--panel-2, var(--panel, var(--sl-surface, #2c2c2c))));
  --m-fg: var(--sui-fg, var(--fg, var(--sl-text, #e6e6e6)));
  --m-line: var(--sui-line, var(--line-2, var(--line, var(--sl-border, #3d3d3d))));
  --m-dim: var(--sui-dim, var(--fg-dim, color-mix(in srgb, var(--m-fg) 66%, transparent)));
  --m-rec: #e5484d;
  color: var(--m-fg); font: 13px/1.4 var(--sui-font, var(--ui, "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif));
}
.smac { --ssh-z: 900; position: fixed; inset-inline-end: 16px; inset-block-end: 40px; z-index: 900; inline-size: 340px; max-inline-size: calc(100vw - 32px);
  max-block-size: min(70vh, 560px); overflow: auto; box-sizing: border-box; padding: 14px; background: var(--m-bg);
  border: 1px solid var(--m-line); border-radius: 12px; box-shadow: var(--sui-shadow, 0 18px 50px rgba(0, 0, 0, .45)); }
.smac[hidden] { display: none; }
.smac-title { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.smac-controls, .smac-more, .smac-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.smac-controls .sui-btn, .smac-more .sui-btn, .smac-actions .sui-btn, .smac-live .sui-btn, .smac-bar .sui-btn { min-block-size: 32px; }
.smac-rec-btn { display: inline-flex; align-items: center; gap: 6px; }
.smac-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--m-rec); flex: none; }
.smac.is-recording .smac-rec-btn .smac-dot, .smac-bar .smac-dot { animation: smac-pulse 1.2s ease-in-out infinite; }
@keyframes smac-pulse { 50% { opacity: .35; } }
.smac-hint { margin: 10px 0; color: var(--m-dim); font-size: 12.5px; }
.smac-live { margin-block: 10px; padding: 8px 10px; border: 1px dashed var(--m-rec); border-radius: 8px; }
.smac-live .smac-hint { margin: 0 0 6px; color: var(--m-fg); font-weight: 600; }
.smac-steps { margin: 0 0 8px; padding-inline-start: 22px; }
.smac-steps li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-block: 2px; }
.smac-x { border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; inline-size: 28px; block-size: 28px; border-radius: 6px; cursor: pointer; }
.smac-x:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.smac-x:focus-visible { outline: 2px solid var(--sui-accent, var(--accent, var(--sl-accent, Highlight))); }
.smac-list { margin-block: 10px 6px; border: 1px solid var(--m-line); border-radius: 8px; overflow: hidden; }
.smac-list .sl-empty { margin: 12px; }
.smac-actions { margin-block-end: 6px; }
.smac-actions[hidden] { display: none; }
/* the recording bar: bottom left, clear of the menus (Macros floats bottom right, toasts are in the middle); while the panel
   is open it shows the same, so the bar steps aside */
.smac-bar { position: fixed; inset-block-end: 64px; inset-inline-start: 16px; z-index: 950; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 14px; background: var(--m-bg); border: 1px solid var(--m-rec); border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); white-space: nowrap; }
.smac-bar[hidden], .smac-open .smac-bar { display: none; }
.smac-bar-n { font-weight: 600; }
/* phones: the panel is TlbxSheet's bottom sheet (shared/ui/sheet.js draws it); the bar sits above it */
@media (max-width: 640px) {
  .ssh-phone .smac.ssh-panel { inset-inline: 0; inline-size: auto; max-inline-size: none; border-radius: 18px 18px 0 0; padding: 14px 16px 20px; }
  .smac-bar { inset-block-end: 12px; inset-inline-start: 12px; max-inline-size: calc(100vw - 24px); gap: 6px; padding-inline-start: 10px; }
  .smac-bar .smac-bar-n { overflow: hidden; text-overflow: ellipsis; }
  .smac-controls .sui-btn, .smac-actions .sui-btn, .smac-more .sui-btn { min-block-size: 44px; flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .smac-dot { animation: none !important; } }