/* ===========================================
   AI Agent Embed — Admin Dashboard Styles
   WordPress管理画面のエージェント設定ページ用

   NeccoSpeak agent-ui: ai-agent-embed v1.5.1.1 の
   assets/css/admin-agent-settings.css をそのまま複製。
   見た目の同一性を保つためクラス名は変更しない。
   =========================================== */

/* ── Dashboard wrapper ── */
.ai-agent-dashboard {
  max-width: 1200px;
}

.ai-agent-dashboard h1 {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

/* ── Tabs ── */
.ai-agent-tabs {
  margin-bottom: 0;
}

.ai-agent-tab-content {
  background: #fff;
  border: 1px solid #c3c4c7;
  border-top: none;
  padding: 24px;
  min-height: 400px;
}

/* ── Section header with action buttons ── */
.ai-agent-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ai-agent-section-header h2 {
  margin: 0;
  padding: 0;
}

.ai-agent-section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Overview grid ── */
.ai-agent-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 960px) {
  .ai-agent-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card ── */
.ai-agent-card {
  background: #f6f7f7;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  padding: 16px 20px;
}

.ai-agent-card h3 {
  margin: 0 0 12px;
  padding: 0;
  font-size: 14px;
  color: #1d2327;
  border-bottom: 1px solid #dcdcde;
  padding-bottom: 8px;
}

/* ── Status indicator ── */
.ai-agent-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.ai-agent-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ai-agent-status-dot--ok {
  background: #00a32a;
}

.ai-agent-status-dot--error {
  background: #d63638;
}

.ai-agent-status-dot--warning {
  background: #dba617;
}

/* ── Badge ── */
.ai-agent-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

.ai-agent-badge--active {
  background: #d4edda;
  color: #155724;
}

.ai-agent-badge--draft {
  background: #fff3cd;
  color: #856404;
}

.ai-agent-badge--inactive {
  background: #f8d7da;
  color: #721c24;
}

.ai-agent-badge--published {
  background: #d1ecf1;
  color: #0c5460;
}

/* ── Issue #118: 保存モード表示バッジ (即時反映 vs ドラフト保存) ── */
.ai-agent-save-mode {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: middle;
}

.ai-agent-save-mode--immediate {
  background: #ffe1c8;
  color: #8a3d00;
  border: 1px solid #f0b07c;
}

.ai-agent-save-mode--draft {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.ai-agent-save-mode--mixed {
  background: #e2d9f3;
  color: #492a8a;
  border: 1px solid #c9bdee;
}

/* ── Data display ── */
.ai-agent-data-placeholder {
  min-height: 60px;
  display: flex;
  align-items: center;
  color: #646970;
}

.ai-agent-data-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 13px;
}

.ai-agent-data-grid dt {
  font-weight: 600;
  color: #50575e;
  white-space: nowrap;
}

.ai-agent-data-grid dd {
  margin: 0;
  color: #1d2327;
  word-break: break-word;
}

/* ── Loading indicator ── */
.ai-agent-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  color: #646970;
}

/* ── Actions ── */
.ai-agent-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-agent-action-result {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 13px;
}

.ai-agent-action-result.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.ai-agent-action-result.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ── Form table overrides ── */
.ai-agent-form-table th {
  width: 180px;
  font-weight: 600;
}

.ai-agent-form-table textarea.large-text {
  width: 100%;
  max-width: 700px;
}

/* ── List editor (do_rules, dont_rules, etc.) ── */
.ai-agent-list-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 700px;
}

.ai-agent-list-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ai-agent-list-item input[type="text"] {
  flex: 1;
  min-width: 0;
}

.ai-agent-list-item .ai-agent-remove-item {
  flex-shrink: 0;
  color: #b32d2e;
  cursor: pointer;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}

.ai-agent-list-item .ai-agent-remove-item:hover {
  color: #d63638;
}

.ai-agent-add-item {
  align-self: flex-start;
  margin-top: 4px;
}

/* ── Key-Value editor ── */
.ai-agent-kv-editor {
  max-width: 700px;
}

.ai-agent-kv-row textarea.ai-agent-kv-val {
  min-height: 36px;
  resize: vertical;
}

/* ── Persona editor ── */
.ai-agent-persona-editor {
  max-width: 700px;
}

.ai-agent-persona-tab.active {
  background: #2271b1;
  color: #fff;
  border-color: #2271b1;
}

.ai-agent-persona-comm-table th {
  padding: 6px 10px 6px 0;
  font-weight: 600;
}

.ai-agent-persona-comm-table td {
  padding: 6px 0;
}

/* ── Trigger condition builder ── */
.ai-agent-trigger-builder {
  max-width: 700px;
}

/* ── JSON advanced toggle ── */
.ai-agent-json-advanced summary:hover {
  color: #2271b1;
}

/* ── JSON display ── */
.ai-agent-json-display {
  background: #f0f0f1;
  border: 1px solid #dcdcde;
  border-radius: 3px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  max-width: 700px;
  max-height: 300px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Color grid (for theme colors display) ── */
.ai-agent-color-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-agent-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ai-agent-color-swatch__preview {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid #dcdcde;
}

.ai-agent-color-swatch__label {
  font-size: 11px;
  color: #646970;
}

.ai-agent-color-swatch__value {
  font-size: 11px;
  font-family: monospace;
  color: #1d2327;
}

.ai-agent-color-swatch--heading {
  width: 100%;
  flex-basis: 100%;
  align-items: flex-start;
  margin-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcde;
}

.ai-agent-color-swatch--heading:first-child {
  margin-top: 0;
}

/* ── CTA cards ── */
.ai-agent-cta-card {
  background: #f6f7f7;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 12px;
}

.ai-agent-cta-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.ai-agent-cta-card__header h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-agent-cta-card__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ai-agent-cta-card .ai-agent-data-grid {
  font-size: 13px;
}

/* ── Modal ── */
.ai-agent-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-agent-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.ai-agent-modal__content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 24px;
  max-width: 600px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.ai-agent-modal__content h3 {
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid #dcdcde;
}

.ai-agent-modal__content .form-table th {
  width: 140px;
  padding: 8px 10px 8px 0;
}

.ai-agent-modal__content .form-table td {
  padding: 8px 0;
}

.ai-agent-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #dcdcde;
}

/* ── Icon picker (0.3.0-dev.38 / フェーズ2 §1) ──
 * 本番 ai-agent-embed の #ai-agent-dash-qa-picker（admin-agent-settings.js が
 * インラインスタイルで組み立てるフロートパネル）と同じ見た目を、素のCSSに
 * 起こしたもの。position は fixed — CTAモーダル（.ai-agent-modal）の中から
 * 開くことがあり、絶対配置だとスクロール時に台座からズレるため。
 * z-index はモーダル(100200)より上。 */
.neccospeak-icon-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.neccospeak-icon-btn.button {
  width: 40px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.neccospeak-icon-btn .bi {
  font-size: 18px;
  line-height: 1;
}

.neccospeak-icon-btn__placeholder {
  font-size: 10px;
  color: #999;
}

/* 0.3.0-dev.67: アイコン名のインライン表示と「クリア」リンクは行から
 * 非表示にする。名前の長さ(briefcase-fill 等)で後続の入力欄の開始位置が
 * 行ごとにズレる実機報告があり、本番 ai-agent-embed の設定欄(アイコン
 * ボタンのみの固定幅)へ寄せた。名前はボタンの title(ツールチップ)へ、
 * クリアはピッカーパネル内のボタンへ移設(agent-ui.js)。DOM 自体は
 * JS 契約([data-neccospeak-icon-name]/[data-neccospeak-icon-clear])を
 * 壊さないよう残している。 */
.neccospeak-icon-name {
  display: none;
}

.neccospeak-icon-clear {
  display: none;
}

/* dev.67: ピッカー内へ移設した「アイコンなしにする」ボタン。 */
.neccospeak-icon-picker__clear {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 4px 8px;
  font-size: 12px;
  color: #b32d2e;
  background: transparent;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  cursor: pointer;
}

.neccospeak-icon-picker__clear:hover {
  background: #fcf0f1;
  border-color: #b32d2e;
}

.neccospeak-icon-picker {
  position: fixed;
  z-index: 100400;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: #fff;
  border: 1px solid #ccd0d4;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.neccospeak-icon-picker[hidden] {
  display: none;
}

.neccospeak-icon-picker__search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
}

.neccospeak-icon-picker__hint,
.neccospeak-icon-picker__empty,
.neccospeak-icon-picker__count {
  margin: 6px 0 0;
  font-size: 11px;
  color: #666;
}

.neccospeak-icon-picker__count:empty {
  display: none;
}

.neccospeak-icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
}

.neccospeak-icon-picker__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  line-height: 1.2;
}

.neccospeak-icon-picker__cell .bi {
  font-size: 20px;
  display: block;
}

.neccospeak-icon-picker__cell:hover,
.neccospeak-icon-picker__cell:focus {
  background: #f0f6fc;
  border-color: #0073aa;
  outline: none;
}

/* ── CTA summary cards (0.3.0-dev.38 / フェーズ2 §2) ── */
.neccospeak-cta-card__glyph .bi {
  font-size: 18px;
  line-height: 1;
  color: #50575e;
}

.neccospeak-cta-card__glyph:empty {
  display: none;
}

.neccospeak-cta-card--off {
  opacity: 0.65;
}

.neccospeak-cta-card__off {
  color: #999;
  font-weight: normal;
}

.neccospeak-cta-card .ai-agent-cta-card__header h4 {
  flex-wrap: wrap;
}

.neccospeak-cta-modal__advanced > summary {
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

.neccospeak-cta-modal__error {
  margin: 12px 0 0;
  color: #b32d2e;
}

.neccospeak-cta-modal__error[hidden] {
  display: none;
}

/* [hidden] のUA既定 (display:none) は作者スタイルに負ける。WP管理画面は
 * 狭幅で .form-table tr / th / td に display:block を当てるため、モーダルの
 * 「値」行 (voice のとき隠す) や CF7 マップ行がそこで露出してしまう。
 * 自前のトグル対象だけ明示的に打ち消す。 */
[data-neccospeak-cta-value-row][hidden],
[data-neccospeak-cta-cf7-row][hidden],
[data-neccospeak-cta-delay-wrap][hidden],
[data-neccospeak-cta-replies-wrap][hidden],
[data-neccospeak-cta-empty][hidden],
[data-neccospeak-cta-off-note][hidden],
[data-neccospeak-cta-proto][hidden],
[data-neccospeak-icon-clear][hidden] {
  display: none !important;
}

/* ── Audit log table ── */
#ai-agent-logs-table {
  margin-top: 8px;
}

#ai-agent-logs-table td {
  vertical-align: top;
  font-size: 13px;
}

.ai-agent-log-action {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}

.ai-agent-log-action--publish {
  background: #d1ecf1;
  color: #0c5460;
}

.ai-agent-log-action--update {
  background: #fff3cd;
  color: #856404;
}

.ai-agent-log-action--create {
  background: #d4edda;
  color: #155724;
}

.ai-agent-log-action--delete {
  background: #f8d7da;
  color: #721c24;
}

.ai-agent-log-action--rollback {
  background: #e2e3e5;
  color: #383d41;
}

.ai-agent-log-detail {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-agent-log-detail summary {
  cursor: pointer;
  color: #2271b1;
  font-size: 12px;
}

.ai-agent-log-detail pre {
  font-size: 11px;
  margin: 4px 0 0;
  max-height: 200px;
  overflow: auto;
  background: #f0f0f1;
  padding: 6px;
  border-radius: 3px;
}

/* ── Toast notification ── */
.ai-agent-toast {
  position: fixed;
  top: 48px;
  right: 24px;
  z-index: 100100;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.ai-agent-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.ai-agent-toast--success {
  background: #00a32a;
  color: #fff;
}

.ai-agent-toast--error {
  background: #d63638;
  color: #fff;
}

/* ── Wide card (spans full width in grid) ── */
.ai-agent-card--wide {
  grid-column: 1 / -1;
}

/* ── Version comparison ── */
.ai-agent-version-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .ai-agent-version-diff {
    grid-template-columns: 1fr;
  }
}

.ai-agent-version-col__header {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-block;
}

.ai-agent-version-col:first-child .ai-agent-version-col__header {
  background: #d1ecf1;
  color: #0c5460;
}

.ai-agent-version-col:last-child .ai-agent-version-col__header {
  background: #fff3cd;
  color: #856404;
}

.ai-agent-version-diff .ai-agent-json-display {
  max-width: 100%;
  max-height: 400px;
  font-size: 11px;
}

/* ── Details / collapsible section ── */
.ai-agent-detail-section {
  margin-top: 24px;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  background: #f6f7f7;
}

.ai-agent-detail-section summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  color: #2271b1;
  user-select: none;
}

.ai-agent-detail-section summary:hover {
  color: #135e96;
}

.ai-agent-detail-section[open] summary {
  border-bottom: 1px solid #dcdcde;
}

.ai-agent-detail-section .form-table {
  margin: 0;
  padding: 0 16px 16px;
}

/* ── Range slider enhancement ── */
input[type="range"]#ai-agent-design-temperature {
  accent-color: #2271b1;
}

/* ===========================================
   Prompt Builder UI — ユーザーフレンドリー設定
   =========================================== */

/* ── セグメント選択（話し方セレクタ） ── */
.ai-agent-segment-selector {
  display: inline-flex;
  gap: 0;
  border: 1px solid #c3c4c7;
  border-radius: 6px;
  overflow: hidden;
}

.ai-agent-segment {
  padding: 8px 18px;
  border: none;
  border-right: 1px solid #c3c4c7;
  background: #f0f0f1;
  color: #50575e;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.ai-agent-segment:last-child {
  border-right: none;
}

.ai-agent-segment:hover {
  background: #e0e0e1;
}

.ai-agent-segment.active {
  background: #2271b1;
  color: #fff;
}

/* ── チェックボックスグループ ── */
.ai-agent-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-agent-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* ── トグルスイッチ ── */
.ai-agent-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.ai-agent-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ai-agent-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #c3c4c7;
  border-radius: 24px;
  transition: background-color 0.2s;
}

.ai-agent-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.ai-agent-toggle input:checked + .ai-agent-toggle-slider {
  background-color: #2271b1;
}

.ai-agent-toggle input:checked + .ai-agent-toggle-slider::before {
  transform: translateX(20px);
}

/* ── スライダーグループ ── */
.ai-agent-slider-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-agent-slider-label {
  font-size: 12px;
  color: #646970;
  min-width: 32px;
}

/* ── 役割テンプレート・キャラクターテンプレートボタン ── */
.ai-agent-role-templates .button.active,
.ai-agent-character-templates .button.active {
  background: #2271b1;
  color: #fff;
  border-color: #2271b1;
}

/* ── プリセットバー ── */
.ai-agent-preset-bar {
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: #f0f6fc;
  border: 1px solid #c8d7e8;
  border-radius: 6px;
}

.ai-agent-preset-bar .button-small {
  margin: 2px 4px 2px 0;
}

.ai-agent-preset-bar .button-small.active,
.ai-agent-preset-btn.active {
  background: #2271b1;
  color: #fff;
  border-color: #2271b1;
}

/* ── NGルールサジェスト ── */
.ai-agent-rule-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.ai-agent-rule-suggestions .button-small {
  font-size: 11px;
  padding: 2px 8px;
  min-height: auto;
  line-height: 1.6;
}

/* ── バッジ: warning ── */
.ai-agent-badge--warning {
  background: #f0b849;
  color: #1d2327;
}

/* ── ツールチップ ── */
.ai-agent-tooltip {
  cursor: help;
  color: #646970;
  font-size: 16px;
  vertical-align: middle;
}

/* ── 高度な設定タブ: 折りたたみスタイル ── */
.ai-agent-detail-section {
  margin-top: 16px;
  border: 1px solid #e2e4e7;
  border-radius: 4px;
  padding: 0;
}

.ai-agent-detail-section > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  background: #f6f7f7;
  border-radius: 4px;
}

.ai-agent-detail-section[open] > summary {
  border-bottom: 1px solid #e2e4e7;
  border-radius: 4px 4px 0 0;
}

.ai-agent-detail-section > *:not(summary) {
  padding: 0 16px;
}

/* ===========================================
   サブタブ（タブ内タブ）
   =========================================== */
.ai-agent-subtab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #c3c4c7;
  margin: 0 0 20px;
}

.ai-agent-subtab-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #50575e;
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s, background 0.15s;
}

.ai-agent-subtab-btn:hover {
  color: #135e96;
  background: #f0f0f1;
}

.ai-agent-subtab-btn--active {
  background: #fff;
  border-color: #c3c4c7;
  color: #1d2327;
  font-weight: 600;
}

/* ── メディアライブラリ画像プレビュー ── */
.ai-agent-image-preview img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 8px;
  border: 1px solid #dcdcde;
  object-fit: contain;
  background: #f0f0f1;
}

/* ── Readonly fields ── */
.ai-agent-readonly {
  background: #f0f0f1 !important;
  cursor: default;
}

/* ===========================================
   NeccoSpeak agent-ui 追加分
   =========================================== */

/* 各カード = 独立した <form> (options.php 送信)。
   production は AJAX 保存だが NeccoSpeak は素の Settings API 送信のため
   フォーム境界の余白だけ調整する。 */
.ai-agent-section form.neccospeak-agent-ui-form,
.ai-agent-card form.neccospeak-agent-ui-form {
  margin: 0;
}

form.neccospeak-agent-ui-form .ai-agent-section-actions {
  display: inline-block;
}

.neccospeak-agent-ui-saved-notice {
  margin: 0 0 16px;
}

/* ── Sticky change-summary panel (0.3.0-dev.36) ──
   本番 ai-agent-embed の #228 パネル (admin-agent-settings.css:1092-) からの
   移植。NS ではサーバーレンダリング（差分ありのときだけ出力）のため、
   本番にあった display:none 初期状態や JS 制御用のルールは持たない。 */
.ai-agent-change-summary {
  position: sticky;
  bottom: 0;
  z-index: 100;
  margin: 24px -20px 0;
  padding: 0;
  background: #fff;
  border-top: 2px solid #2271b1;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.ai-agent-change-summary__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-height: 220px;
  overflow-y: auto;
}
.ai-agent-change-summary__main {
  flex: 1;
  min-width: 0;
}
.ai-agent-change-summary__headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1d2327;
}
.ai-agent-change-summary__pending-label .dashicons {
  color: #856404;
  font-size: 16px;
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}
.ai-agent-change-summary__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #50575e;
}
.ai-agent-change-summary__list li {
  padding: 2px 0;
  border-bottom: 1px solid #f0f0f1;
  word-break: break-word;
}
.ai-agent-change-summary__list li:last-child {
  border-bottom: none;
}
.ai-agent-change-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.ai-agent-change-summary__actions form {
  margin: 0;
}
.ai-agent-change-summary__actions .button {
  width: 100%;
  text-align: center;
}
