#ai-connections-dialog { width: min(var(--container-content-read), calc(100vw - 8 * var(--spacing))); }
.ai-connections-body, .ai-setup, .ai-guide, .ai-section { display: grid; gap: calc(4 * var(--spacing)); }
.ai-connections-body { margin-top: calc(3 * var(--spacing)); gap: calc(7 * var(--spacing)); }
.ai-connections-body p, .ai-connections-body h3 { margin: 0; }
.ai-section, .ai-setup { gap: calc(3 * var(--spacing)); }
.ai-section-heading, .ai-grant { display: flex; align-items: center; justify-content: space-between; gap: calc(3 * var(--spacing)); }
.ai-connection-card, .ai-setup-box { border: 1px solid var(--color-line-1); background: transparent; border-radius: var(--radius-sm); padding: 0; }
.ai-connection-card { padding: calc(3 * var(--spacing)) calc(4 * var(--spacing)); }
.ai-setting-row { display: flex; align-items: center; justify-content: space-between; gap: calc(3 * var(--spacing)); padding: calc(3 * var(--spacing)) calc(4 * var(--spacing)); border-bottom: 1px solid var(--color-line-1); }
.ai-setting-row[hidden] { display: none; }
.ai-setting-row .select-field { margin-left: auto; }
.ai-guide { padding: calc(4 * var(--spacing)); }
[data-ai-count] { margin-left: var(--spacing); }
[data-ai-status]:empty { display: none; }
.ai-setup-box .ai-steps { display: grid; gap: calc(4 * var(--spacing)); list-style: none; padding: 0; margin: 0; }
.ai-steps > li { min-width: 0; }
.ai-steps strong { font-weight: var(--text-body--font-weight); }
.ai-steps p { color: var(--color-fg-secondary); font-size: var(--text-small); margin-top: var(--spacing); }
.ai-code-box { display: flex; align-items: flex-start; gap: calc(2 * var(--spacing)); margin-top: calc(3 * var(--spacing)); padding: calc(2 * var(--spacing)) calc(3 * var(--spacing)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-fg-primary) 4%, transparent); }
.ai-code-box .ai-code { flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; margin: 0; padding: var(--spacing) 0; font-size: .6875rem; line-height: 1.6; color: var(--color-fg-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-code-box .ai-code code { font-size: inherit; }
.ai-code-status:empty { display: none; }
.ai-guide-link { width: fit-content; text-decoration: none; }
.ai-guide-link:hover { text-decoration: underline; }
.ai-grant {
  padding-block: var(--spacing);
}
.ai-grant + .ai-grant { margin-top: calc(3 * var(--spacing)); padding-top: calc(3 * var(--spacing)); border-top: 1px solid var(--color-line-1); }
.ai-grant > div {
  display: grid;
  gap: var(--spacing);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ai-grant strong {
  font-weight: var(--text-body--font-weight);
}
.ai-consent-summary {
  display: grid;
  gap: calc(3 * var(--spacing));
  margin-bottom: calc(6 * var(--spacing));
}
.ai-consent-summary p {
  margin: 0;
  overflow-wrap: anywhere;
}
.ai-consent-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(2 * var(--spacing));
}
.playground-ai {
  width: min(var(--container-content-read), 100%);
  padding: calc(6 * var(--spacing));
  background: var(--color-surface-raised);
  border-radius: var(--radius-card);
}
@media (max-width: 480px) {
  .ai-consent-actions {
    flex-direction: column-reverse;
  }
}



#chrome-extension-dialog { width: min(var(--container-content-read), calc(100vw - 8 * var(--spacing))); }
.extension-download { flex-wrap: wrap; }

/* Shortcut actions share the settings row rhythm, separate from tutorial prose. */
.shortcut-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: calc(2 * var(--spacing)); }
[data-shortcut-status]:empty { display: none; }
@media (max-width: 480px) {
  [data-shortcut-token] .settings-row, .shortcut-download .settings-row { flex-direction: column; gap: calc(3 * var(--spacing)); }
  [data-shortcut-token] .settings-row-control, .shortcut-download .settings-row-control { min-width: 0; }
  .shortcut-actions { justify-content: flex-start; }
}