/* Live controls use their own layout so manual recording stays unchanged. */
.interaction-mode-wrap { margin: 19px 0 0; padding: 0; }
.interaction-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.interaction-option {
  display: flex; min-width: 0; align-items: flex-start; gap: 9px; padding: 13px;
  border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer;
}
.interaction-option:hover { border-color: #93c5fd; }
.interaction-option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.interaction-option:has(input:focus-visible) { outline: 3px solid #93c5fd; outline-offset: 2px; }
.interaction-option:has(input:disabled) { opacity: .6; cursor: default; }
.interaction-option input { flex: none; width: 15px; height: 15px; margin: 3px 0 0; accent-color: #2563eb; }
.interaction-option-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.interaction-option-copy strong { color: #334155; font-size: 12.5px; line-height: 1.6; }
.interaction-option-copy small { color: #64748b; font-size: 11px; line-height: 1.65; }
.interaction-mode-note { margin: 9px 1px 0; color: #64748b; font-size: 11px; line-height: 1.7; }

.live-panel { margin-top: 18px; padding: 14px; border: 1px solid #bfdbfe; border-radius: 11px; background: #f8fbff; }
.live-panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.live-mode-label { display: inline-flex; align-items: center; gap: 6px; color: #1d4ed8; font-size: 11px; font-weight: 750; }
.live-mode-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #2563eb; }
.live-status { min-width: 0; color: #334155; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.live-hint { margin: 7px 0 12px; color: #64748b; font-size: 11.5px; line-height: 1.7; overflow-wrap: anywhere; }
.live-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.live-action-button {
  display: inline-flex; flex: 1 1 90px; min-width: 0; max-width: 100%; min-height: 42px; padding: 9px 12px;
  align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 8px;
  background: #fff; color: #334155; font: inherit; font-size: 11.5px; font-weight: 650; line-height: 1.5;
  text-align: center; overflow-wrap: anywhere; cursor: pointer;
}
.live-action-button:hover:not(:disabled) { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.live-action-button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.live-action-button:disabled { opacity: .5; cursor: default; }
.live-action-primary { border-color: #2563eb; background: #2563eb; color: #fff; }
.live-action-primary:hover:not(:disabled) { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.live-action-secondary { flex-grow: 0; }

@media (max-width: 720px) {
  .interaction-options { grid-template-columns: 1fr; gap: 8px; }
  .interaction-option { padding: 12px; }
  .live-panel { padding: 12px; }
  .live-action-button { min-height: 44px; }
}

@media (max-width: 390px) {
  .live-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-action-secondary { grid-column: 1 / -1; }
}